+ All Categories
Home > Technology > Fluxible

Fluxible

Date post: 16-Feb-2017
Category:
Upload: taylor-lovett
View: 270 times
Download: 0 times
Share this document with a friend
32
Using Fluxible to Create Isomorphic JavaScript Applications
Transcript
Page 1: Fluxible

Using Fluxible to Create Isomorphic JavaScript Applications

Page 2: Fluxible

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

Page 3: Fluxible

10up is hiring!@tlovett12

[email protected]

Page 4: Fluxible

What is an isomorphic web application?

Page 5: Fluxible

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

Page 6: Fluxible

Isomorphic Web Applications

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

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

Page 7: Fluxible

What is React.js?

Page 8: Fluxible

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

Page 9: Fluxible

What is Flux?

Page 10: Fluxible

Flux

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

• Built by Facebook

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

Page 11: Fluxible

Flux

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

• Unidirectional data flow

• Dispatcher, stores, and views

Page 12: Fluxible

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.

Page 13: Fluxible

Actions

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

Page 14: Fluxible

Stores

• Stores hold data.

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

Page 15: Fluxible

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

Page 16: Fluxible

Flux

Page 17: Fluxible

What is Fluxible?

Page 18: Fluxible

Fluxible

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

• Created by Yahoo

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

Page 19: Fluxible

Fluxible

• Vibrant community of developers with Discord channel for support

• Has a number of helper Github repos built around it

Page 20: Fluxible

Let’s build something simple

Page 21: Fluxible

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

Page 22: Fluxible

Example Application

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

Page 23: Fluxible

server.js

• Executed by the server

• Instantiates application code in app.js

Page 24: Fluxible

app.js

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

• Within that Fluxible instance we can:

• Register stores

• Export/import state (dehydrate/rehydrate)

Page 25: Fluxible

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

Page 26: Fluxible

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

Page 27: Fluxible

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

Page 28: Fluxible

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

Page 29: Fluxible

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

Page 30: Fluxible

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

Page 31: Fluxible

What about framework ________?

Page 32: Fluxible

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

[email protected]

taylorlovett.com

github.com/tlovett1

dockunit.io


Recommended