Fluxible
Isomorphic Flux Applications
Reza Akhavan
@jedireza
Agenda
...loading...
Agenda
Assumed
React / Flux / Express
Isomorphic™
i·so·mor·phic [adjective]
corresponding or similar in form and relations.
The Good Parts
SPA + SEO
Speed
<noscript>
Links
Rendering
with React
var React = require('react');
�module.exports = React.createClass({� handleClick: function () {� alert('Hello ' + this.props.name);� },� render: function () {� return (� <div onClick={this.handleClick}>� <div className="greeting">� Good morning {this.props.name}.� </div>� </div>� );� }�});
React.renderToStaticMarkup(...)
React.renderToString(...)
React.renderToStaticMarkup(Component({ name: 'JS Breakfast' }));
<div>� <div class="greeting">� Good morning JS Breakfast.� </div>�</div>
React.renderToString(Component({ name: 'JS Breakfast' }));
<div data-reactid=".292o9vx6ry8" data-react-checksum="-530623552">� <div class="greeting" data-reactid=".292o9vx6ry8.0">� <span data-reactid=".292o9vx6ry8.0.0">Good morning </span>� <span data-reactid=".292o9vx6ry8.0.1">JS Breakfast</span>� <span data-reactid=".292o9vx6ry8.0.2">.</span>� </div>�</div>
Let’s Fiddle
with This
A Mini
Isomorphic React App
https://github.com/jedireza/mini-isomorphic-react
Flux
Dispatcher
Store
View
one instance
singletons
Action
fire & forget
instances
Fluxible
Dispatcher
Store
View
one instance
per request
one instance per request
Action
instances
fire & forget + async
Isolated
Dispatcher
Store
View
one instance
per request
one instance per request
Action
instances
fire & forget + async
Per Request
Actions
You can create any application state through some set of action calls.
// ./actions/navigate.js
function navigate (context, params, done) {
var route = context.router.getRoute(params.path);
context.dispatch('CHANGE_ROUTE_START', route);�� context.executeAction(route.action, function (err, data) {
// route action now complete
context.dispatch('CHANGE_ROUTE_SUCCESS', route);
done();
});�}
module.exports = navigate;
Context
Action / Store / Component
Routing
fluxible-router / react-router
State
Dehydrate / Rehydrate
// ./stores/Article.js
module.exports = createStore({� // ...� dehydrate: function () {� return {� articles: this.articles,� current: this.current� };� },� rehydrate: function (state) {� this.articles = state.articles;� this.current = state.current;� }�});
Plugins
http://fluxible.io/api/plugins.html
// ./app.js
var React = require('react');�var Fluxible = require('fluxible');�var FetchrPlugin = require('fluxible-plugin-fetchr');��var app = new Fluxible({/* config */});
// apply the plugin�app.plug(FetchrPlugin({/* config */)});��module.exports = app;
// ./actions/getArticle.js
function getArticle (context, params, done) {
context.service.read('articles', {id: params.id}, function (err, article) {
// ...� });�}
module.exports = getArticle;
Isomorphic
Data Fetching
// ./services/Article.js�var db = require(/* some data resource */);
�module.exports = {� name: 'articles',� read: function (req, resource, params, config, callback) {� var query = { id: params.id };� db.articles.findOne(query, function (err, article) {� if (err) {� return callback(err);� }� callback(null, article);� });� }�};
// ./server.js
var Express = require('express');�var App = require('./app');�var ArticleService = require('./services/Article');�
var server = Express();�var fetchrPlugin = App.getPlugin('FetchrPlugin');
FetchrPlugin.registerService(ArticleService);�server.use(fetchrPlugin.getXhrPath(), fetchrPlugin.getMiddleware());
// ...�server.listen(3000);
// ./actions/getArticle.js
function getArticle (context, params, done) {
context.dispatch('GET_ARTICLE_START', params);
context.service.read('articles', {id: params.id}, function (err, article) {
if (err) {� return context.dispatch('GET_ARTICLE_FAIL', params);� }� context.dispatch('GET_ARTICLE_SUCCESS', article);
done();
});�}
module.exports = getArticle;
The Fluxible
Lifecycle
Action
Dispatcher
Action
Dispatcher
Store
Action
Dispatcher
Store
View
Action
Dispatcher
Store
View
Action
Per Request
Dispatcher
Store
View
Action
Dehydrate Server
state
html
Rehydrate Browser
Dispatcher
Store
View
Action
Dehydrate Server
state
html
Dispatcher
Store
View
Action
Rehydrate Browser
Dispatcher
Store
View
Action
Dehydrate Server
state
html
Demos
github.com/yahoo/flux-examples
Open Source,
Open Minded
fluxible.io
For docs, guides and links.
(built with Fluxible)
Core Team
Michael Ridgway
Lingyan Zhu
Seth Bertalotto
Rajiv Tirumalareddy
Kaeson Ho
Thank You
Reza Akhavan
@jedireza