Date post: | 16-Feb-2017 |
Category: |
Technology |
Upload: | taylor-lovett |
View: | 270 times |
Download: | 0 times |
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
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
taylorlovett.com
github.com/tlovett1
dockunit.io