In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps

Spike Brehm @spikebrehm

Spike Brehm

Software Engineer @AirbnbNerds

Agenda

...TF is Isomorphic JavaScript?Wat

...is it relevant to web developers?Wy

...can I build isomorphic apps?How

WTF is Isomorphic JavaScript?

JavaScript code that can run on both the client and server.

A brief note on “isomorphic”.

“monomorphic” “heteromorphic” “homomorphic” “multi-platform”

You’re using it wrong!

Isomorphic JavaScript can be

or shimmed per environment .

environment-agnostic

Does not depend on browser-specific properties (window) or server-specific properties (process.env, req.cookies).

Environment-agnostic

Example: Handlebars.js

var template = ! '<ul>' \! '{{#each posts}}' \! ' <li>{{title}}</li>' \! '{{/each}}' \! '</ul>'!;! !var templateFn = Handlebars.compile(template)! , html = templateFn({posts: posts});! !// <ul>!// <li>JavaScript is cool</li>!// <li>The Web is the platform</li>!// </ul>

Provides shims for accessing environment-specific properties so module can expose a single API.

window.location.pathnamevs. req.path

Shimmed per environment

Example: Superagent

superagent! .post('/api/posts.json')! .send({ title: 'Moar JavaScript', body: '...' })! .end(function(response) {! if (response.status === 200) {! console.log("Success!");! } else {! console.error("Error", response.body.error);! }! });

Isomorphic use cases.

• Templating • Routing • I18n • Date & currency formatting • Model validation • API interaction • ...?

Isomorphic use cases.

Most of your favorite libraries can be used isomorphically.

• Underscore.js • Backbone.js • Handlebars.js • jQuery • Moment • React.js • Polyglot.js (I18n)

Wy go to the trouble?

Initial pageload speed.Performance

Crawlable single-page apps.SEO

Reduce code duplication.Maintainability

Run code where you want.Flexibility

Ye olde days: fat-server, thin-client.

Client JavaScript

Server Ruby

Python Java PHP

Persistence

View layer

Application logic

Routing

DOM manipulation Animations

Circa 2011: thin-server, fat-client.

Routing

View layer

Server Ruby

Python Java PHP

Persistence

Client JavaScript

Application logic

DOM manipulation Animations

Teh footure: shared, fat-server, fat-client.

Server Ruby

Python Java PHP

Persistence

Client JavaScript

Routing

View layer

Application logic

Shared JavaScript

DOM manipulation Animations

Isomorphic JavaScript is a spectrum.

Entire view layer and app

logic shared

Small bits of view layer or logic shared

Many abstractions

Few abstractions

ComplexSimple

View layer shared

Entire app runtime synced between client

& server

How to Isomorphic.

The magic happens in the build process.Browserify & Grunt

BrowserifyUse require() in the browser, the same way you would on the server.

Package up CommonJS modules for the browser.

Browserifydemo !

github.com/ spikebrehm/isomorphic-examples

Task runner for automating build and development workflow.

Grunt

Gruntdemo !

github.com/ spikebrehm/isomorphic-examples

Wat about shimmed per environment?

How does Superagent do it?

Use package.json’s “browser” field

"browser": { "./lib/node/index.js": “./lib/client.js", "emitter": "emitter-component", "reduce": "reduce-component" },

“browser”: STRING || OBJECT,

“browser": "./lib/client.js",

Isomorphic frameworks.

MojitoYahoo!; Full-stack; Never caught on.

MeteorRealtime; Full-stack; Awesome. No server-side rendering (yet).

RendrAirbnb; Library; Backbone & Handlebars. Came from m.airbnb.com.

Towards an isomorphic future.

JavaScript is the lingua franca of the Web.

The Web is the platform; JavaScript provides the runtime.

More reusable solutions; more small modules.

It will be rare to see a web app using no server-side JavaScript.

The revolution will come in the build systems.

Static analysis, conditional builds, source transforms.

Questions?

@AirbnbNerds@spikebrehm

Thanks!