This document provides an overview of using Fluxible to create isomorphic JavaScript applications. It defines what an isomorphic app is, discusses React and Flux, and then introduces Fluxible. Key points about Fluxible include that it is an implementation of Flux, has a vibrant community, and includes tools like provideContext and connectToStores to help build React components. The document demonstrates building a simple Fluxible app with files for the server, client, app, components, actions and stores. It also discusses routing and exporting/importing state between server and client.
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
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).
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
taylor.lovett@10up.com
taylorlovett.com
github.com/tlovett1
dockunit.io