in pursuit of the holy grail: building isomorphic javascript apps
DESCRIPTION
TRANSCRIPT
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!