Fluxible
- 1. Using Fluxible to Create Isomorphic JavaScript Applications
- 2. Who Am I? • My name is Taylor Lovett • Director of Web Engineering at 10up • Open source community member • WordPress core contributor • Creator of the dockunit.io (Docker based testing service) @tlovett12
- 4. What is an isomorphic web application?
- 5. Isomorphic Web Applications • Applications where the same code is used for both server side and client side rendering • Create single page applications without having to wait a long time for initial loading • Run JavaScript in the browser and server side via Node.js
- 6. Isomorphic Web Applications • Many frameworks to accomplish this - Fluxible, Redux, Alt, Reflux, Rendr, Meteor, etc. • “App-like” experiences are the future of the web
- 8. React.js • Stateful, composable components or views for high performance client/server side rendering via JavaScript. • Components use a virtual DOM to re-render components very efficiently. • Embrace tying logic into templates • Built by Facebook
- 10. Flux • An application architecture for building highly dynamic isomorphic JavaScript applications using React.js • Built by Facebook • https://facebook.github.io/flux
- 11. Flux • Framework constrains how data flows to prevent application code from becoming messy. • Unidirectional data flow • Dispatcher, stores, and views
- 12. Views • Views are created as React.js components. • Views execute actions to communicate with the server, APIs, modify data, etc. • For example, an action named loadMore might be executed to load more items.
- 13. Actions • Actions, having been called from views, communicate with external services if necessary, and tell the dispatcher to broadcast a payload.
- 14. Stores • Stores hold data. • Stores register listeners with the dispatcher. When relevant payloads are broadcasted, stores update themselves and emit a change event.
- 15. Views (again) • Views listen for change events from relevant stores. • When a store change occurs, the view completely re-renders itself based on the new data. • React.js virtual DOM makes the complete re- render performant (awesome).
- 16. Flux
- 18. Fluxible • Fluxible is an implementation/extension of the Flux application architecture. • Created by Yahoo • https://github.com/yahoo/fluxible
- 19. Fluxible • Vibrant community of developers with Discord channel for support • Has a number of helper Github repos built around it
- 20. Let’s build something simple
- 22. Example Application • File system: - server.js - client.js - app.js components/ actions/ stores/
- 23. server.js • Executed by the server • Instantiates application code in app.js
- 24. app.js • Creates a new Fluxible instance giving our application “context”. • Within that Fluxible instance we can: • Register stores • Export/import state (dehydrate/rehydrate)
- 25. server.js • Passes context to tree of React components start with the “Html” component. Fluxible wrapper functions handle a lot of this behind the scenes. • Saves context or state of application as JSON on the DOM. This is called dehydrating your application. • Renders your application returning HTML to the browser via Express
- 26. client.js • This is what makes your application “isomorphic” • Instantiates/rehydrates your application code in app.js with existing context or state stored in the DOM
- 27. React Components Tools • provideContext() A handy Fluxible tool to provide context to React components. Context access allows you to execute actions within all child components. http://fluxible.io/addons/provideContext.html
- 28. React Components Tools • connectToStores() Lets you easily connect stores to React components. When a store is connected to a component, the component will automatically re- render when the store changes. http://fluxible.io/addons/connectToStores.html
- 29. Router • Fluxible gives you a pre-made store for handling route changes. • Fluxible also gives you a handy React navigation link component. https://github.com/yahoo/fluxible/tree/master/packages/fluxible-router
- 32. Questions? We need to send a PUT request to this endpoint with our post data. Of course we must authenticate before doing this. @tlovett12 10up.com [email protected] taylorlovett.com github.com/tlovett1 dockunit.io