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.

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

3. 10up is hiring!
@tlovett12
taylor.lovett@10up.com

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

7. What is React.js?

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. What is Flux?

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

17. What is Fluxible?

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

21. Example code:
https://github.com/tlovett1/fluxible-starter

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

30. Example code (again):
https://github.com/tlovett1/fluxible-starter

31. What about framework
________?

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