Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fluxible

803 views

Published on

Fluxible is a new framework by Yahoo that follows the Flux architecture by Facebook. The framework enables you to build powerful isomorphic JavaScript applications that are extremely maintainable, extensible, and scalable. The Flux architecture employs a “unidirectional dataflow” and has three major parts: “dispatcher”, “stores”, and “views”. Yahoo’s Fluxible library contains some very powerful tools for setting up your application. This session will run through some important pieces of Fluxible and some basics for setting up an application.

Published in: Technology
  • Be the first to comment

Fluxible

  1. 1. Using Fluxible to Create Isomorphic JavaScript Applications
  2. 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
  3. 3. 10up is hiring! @tlovett12 taylor.lovett@10up.com
  4. 4. What is an isomorphic web application?
  5. 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. 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
  7. 7. What is React.js?
  8. 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
  9. 9. What is Flux?
  10. 10. Flux • An application architecture for building highly dynamic isomorphic JavaScript applications using React.js • Built by Facebook • https://facebook.github.io/flux
  11. 11. Flux • Framework constrains how data flows to prevent application code from becoming messy. • Unidirectional data flow • Dispatcher, stores, and views
  12. 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. 13. Actions • Actions, having been called from views, communicate with external services if necessary, and tell the dispatcher to broadcast a payload.
  14. 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. 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. 16. Flux
  17. 17. What is Fluxible?
  18. 18. Fluxible • Fluxible is an implementation/extension of the Flux application architecture. • Created by Yahoo • https://github.com/yahoo/fluxible
  19. 19. Fluxible • Vibrant community of developers with Discord channel for support • Has a number of helper Github repos built around it
  20. 20. Let’s build something simple
  21. 21. Example code: https://github.com/tlovett1/fluxible-starter
  22. 22. Example Application • File system: - server.js
 - client.js
 - app.js
 components/
 actions/
 stores/
  23. 23. server.js • Executed by the server • Instantiates application code in app.js
  24. 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. 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. 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. 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. 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. 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
  30. 30. Example code (again): https://github.com/tlovett1/fluxible-starter
  31. 31. What about framework ________?
  32. 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 taylor.lovett@10up.com taylorlovett.com github.com/tlovett1 dockunit.io

×