This document discusses isomorphic JavaScript, which allows JavaScript code to run on both the client and server sides. It explains that isomorphic JavaScript is environment-agnostic and does not depend on browser- or server-specific properties. Popular libraries like Handlebars, Backbone, and React can be used isomorphically. Building isomorphic apps improves performance, enables search engine crawling of single-page apps, reduces code duplication, and increases flexibility. The document outlines how tools like Browserify and build systems like Grunt can be used to bundle code for both environments.

1. In Pursuit of the Holy Grail:
Building Isomorphic
JavaScript Apps
Spike Brehm
@spikebrehm

2. Spike Brehm
Software Engineer
@AirbnbNerds

3. Agenda

4. ...TF is Isomorphic JavaScript?
Wat
...is it relevant to web developers?
Wy
...can I build isomorphic apps?
How

5. WTF is Isomorphic
JavaScript?

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

7. A brief note on
“isomorphic”.

8. “monomorphic”
“heteromorphic”
“homomorphic”
“multi-platform”
You’re using it wrong!

9. Isomorphic
JavaScript can be
or
shimmed per
environment .
environment-
agnostic

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

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

12. Provides shims for accessing
environment-specific properties so
module can expose a single API.
window.location.pathname
vs.
req.path
Shimmed per environment

13. 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);!
}!
});

14. Isomorphic use
cases.

15. • Templating
• Routing
• I18n
• Date & currency formatting
• Model validation
• API interaction
• ...?
Isomorphic use cases.

16. Most of your
favorite libraries
can be used
isomorphically.

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

18. Wy go to the
trouble?

19. Initial pageload speed.
Performance
Crawlable single-page apps.
SEO
Reduce code duplication.
Maintainability
Run code where you want.
Flexibility

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

21. Client
JavaScript
Server
Ruby
Python
Java
PHP
Persistence
View layer
Application logic
Routing
DOM manipulation Animations

22. Circa 2011:
thin-server, fat-
client.

23. Routing
View layer
Server
Ruby
Python
Java
PHP
Persistence
Client
JavaScript
Application logic
DOM manipulation Animations

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

25. Server
Ruby
Python
Java
PHP
Persistence
Client
JavaScript
Routing
View layer
Application logic
Shared
JavaScript
DOM manipulation Animations

26. Isomorphic
JavaScript is a
spectrum.

27. Entire view
layer and app
logic shared
Small bits of
view layer or
logic shared

28. Many
abstractions
Few
abstractions

29. ComplexSimple

30. View layer
shared
Entire app
runtime synced
between client
& server

31. How to Isomorphic.

32. The magic happens in the
build process.
Browserify & Grunt

33. Browserify
Use require() in the browser, the
same way you would on the server.
Package up CommonJS modules for
the browser.

34. Browserify
demo
!
github.com/
spikebrehm/isomorphic-examples

35. Task runner for automating build and
development workflow.
Grunt

36. Grunt
demo
!
github.com/
spikebrehm/isomorphic-examples

37. Wat about
shimmed per
environment?

38. 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",

39. Isomorphic
frameworks.

40. Mojito
Yahoo!; Full-stack; Never caught on.
Meteor
Realtime; Full-stack; Awesome.
No server-side rendering (yet).
Rendr
Airbnb; Library; Backbone & Handlebars.
Came from m.airbnb.com.

41. Towards an
isomorphic future.

42. JavaScript is the lingua
franca of the Web.
The Web is the platform;
JavaScript provides the runtime.

43. More reusable solutions;
more small modules.
It will be rare to see a web app
using no server-side JavaScript.

44. The revolution will come
in the build systems.
Static analysis, conditional builds,
source transforms.

45. Questions?

46. @AirbnbNerds
@spikebrehm
Thanks!