Using Fluxible to Create Isomorphic JavaScript Applications

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

10up is hiring!@tlovett12

taylor.lovett@10up.com

What is an isomorphic web application?

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

Isomorphic Web Applications

• Many frameworks to accomplish this - Fluxible, Redux, Alt, Reflux, Rendr, Meteor, etc.

• “App-like” experiences are the future of the web

What is React.js?

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

What is Flux?

Flux

• An application architecture for building highly dynamic isomorphic JavaScript applications using React.js

• Built by Facebook

• https://facebook.github.io/flux

Flux

• Framework constrains how data flows to prevent application code from becoming messy.

• Unidirectional data flow

• Dispatcher, stores, and views

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.

Actions

• Actions, having been called from views, communicate with external services if necessary, and tell the dispatcher to broadcast a payload.

Stores

• Stores hold data.

• Stores register listeners with the dispatcher. When relevant payloads are broadcasted, stores update themselves and emit a change event.

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).

Flux

What is Fluxible?

Fluxible

• Fluxible is an implementation/extension of the Flux application architecture.

• Created by Yahoo

• https://github.com/yahoo/fluxible

Fluxible

• Vibrant community of developers with Discord channel for support

• Has a number of helper Github repos built around it

Let’s build something simple

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

Example Application

• File system:- server.js- client.js- app.jscomponents/actions/stores/

server.js

• Executed by the server

• Instantiates application code in app.js

app.js

• Creates a new Fluxible instance giving our application “context”.

• Within that Fluxible instance we can:

• Register stores

• Export/import state (dehydrate/rehydrate)

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

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

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

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

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

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

What about framework ________?

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