Single Page Applications

• Single page load

• pure data after first load 

• renders on client side

• examples: Angular, Backbone etc.

BUT

SPA Problems

• Initial pageload speed

• SEO

• Code dublication: validation, routing

• Legacy browser support

Isomorphic JavaScript

JavaScript code that can be shared between environments.

Isomorphic code

It's code, which either 

• doesn't depend on the browser or server specifics e.g. window or request objects
• or is adopted to environment-specific properties (like window.location.pathname and req.path) and expose a single API

Isomorphic JavaScript Use Cases

• Templating (handlebars.js)
• Routing (react-router.js)
• I18n (polyglot.js)
• Date & currency formatting (moment.js, money.js)
• Model validation
• API interaction (superagent, fetchr)
• etc......

DOM manipulation, animation

Client JS

views, routing, app logic

Backend API

Shared JS

Server (any lang.)

Isomorphic frameworks

• Mojito. Yahoo!, Full stack. YUI specific

• Meteor. Realtime, Full stack, No server side rendering for now.

• Rendr. Airbnb. Library. Based on Backbone & Handlebars.

• See more at  http://isomorphic.net/

• Fluxible. Facebook's flux on server.

How does it work?

Isomorphic challengies:

• Singleton app on client -> request scoped on server

 

• Init app on both sides

 

• Data fetching. Environment specific.

Different implementation for client and server, but same functionality and interface.

Flux

Server-side flux

Isomorphic Flux:

• Per request isolated Dispatcher and Stores.

 

• Share Stores state: serialize on server / deserialize on client

 

• Server rendering should wait initial data load.

Fluxible

Build isomorphic Flux applications

• Singleton-free for server rendering. 

• Dehydration/Rehydration. Stores can propagate the initial server state to the client.

• React integration. Helper utilities for creating React components with less boilerplate.

• Flow Regulation. FluxibleContext restricts access to Flux methods so that you can't break out of the unidirectional flow

Fluxible-app

Container for isomorphic Flux applications

• Wrapper around Dispatchr
• Provides clean APIs for constructing isomorphic flux application
• Removes boilerplate
• Enforces unidirectional flow by restricting interfaces
• Pluggable: can add new interfaces

Fluxible-plugin-routr

Adds isomorphic routing interfaces to your fluxible-app

• Shared routes between server and client
• Shared route matching logic

Fluxible-plugin-fetchr

Adds isomorphic CRUD interfaces to your fluxible-app

• Create server side web services
• Expose them via an XHR endpoint
• Access your services from an action with the same code both server and client
• Client uses XHR, server calls service directly

Demo