1.
Master Class:
Isomorphic JavaScript
Spike Brehm
@spikebrehm

2.
New iOS,
Android apps
launched
today
</marketing>

3.
Agenda

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

5.
WTF is Isomorphic
JavaScript?

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

7.
A brief note on
“isomorphic”.

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

9.
Example, plz.

10.
Example: Underscore.js
var posts = [{
id: 1,
title: 'JavaScript is cool'
}, {
id: 2,
title: 'The Web is the platform'
}];
_.pluck(posts, 'title');
// ['JavaScript is cool', 'The Web is the platform']

11.
Ye olde days:
fat-serer, thinclient.

12.
DOM
manipulation
Form
validation
Client
Animations
JavaScript
Serer
Routing
View layer
Application logic
Persistence
Ruby
Python
Java
PHP

13.
Circa 2011:
thin-serer, fatclient.

14.
DOM
manipulation
Form
validation
Client
Animations
JavaScript
Routing
View layer
Application logic
Serer
Persistence
Ruby
Python
Java
PHP

15.
Teh footure:
shared, fat-serer,
fat-client.

16.
DOM
manipulation
Form
validation
Client
Animations
JavaScript
Shared
Routing
JavaScript
View layer
Application logic
Serer
Persistence
Ruby
Python
Java
PHP

17.
Isomorphic
JavaScript can be
environmentagnostic
or
shimmed per
environment .

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

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

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

21.
Example: Superagent
superagent
.post('/api/posts.json')
.send({ title: 'Moar JavaScript', body: '...' })
.set('X-Api-KEY', '123456abcdef')
.end(function(response) {
if (response.status === 200) {
console.log("Success!");
} else {
console.error("Error", response.body.error);
}
});

22.
Isomorphic use
cases.

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

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

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

26.
Isomorphic
JavaScript is a
spectrum.

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

28.
Few
abstractions
Many
abstractions

29.
Simple
Complex

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

31.
Wy go to the
trouble?

32.
Performance
Initial pageload speed.
SEO
Crawlable single-page apps.
Maintainability
Reduce code duplication.

33.
Building and
bundling.

34.
Browserif
Package up CommonJS modules
for the browser.
Use ‘require()’ in the browser, the
same way you would on the server.

35.
Browserif
// app/template_renderer.js
var handlebars = require('handlebars');
module.exports = function(templatePath, data) {
var templateFn = require('./views/' + templatePath)
, html = templateFn(data);
return html;
};
Bundles a module and all its dependencies.

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

37.
Grunt
• Compile
Handlebars templates
• Run Browserify to package up
your shared app files
• Recompile files and restart Node
server on every change

38.
Any questions thus
far?

39.
Hack time.

40.
Sample Node.js app
Combines a few modules together
for MVP of isomorphic app.
Express.js blog platform
Basic web server with RESTful API.

41.
Handlebars.js
Templating.
Superagent
HTTP requests to API.
Director
Routing HTTP and HTML5.

42.
Tour of the app.

43.
Setting up locally.

44.
Clone the sample app
git clone git@github.com:spikebrehm/
isomorphic-tutorial.git
github.com/spikebrehm/isomorphic-tutorial

45.
Ensure Node >= 0.8.x
$ node --version
v0.10.21
Have to install?
$ brew install node
or
http://nodejs.org
github.com/spikebrehm/isomorphic-tutorial

46.
Install `grunt-cli`
$ npm install grunt-cli -g
github.com/spikebrehm/isomorphic-tutorial

47.
Run `npm install`
$ cd isomorphic-tutorial
$ npm install
github.com/spikebrehm/isomorphic-tutorial

48.
Run the serer!
$ grunt server
View `localhost:3030` in browser
github.com/spikebrehm/isomorphic-tutorial

49.
Let’s add a feature.

50.
Date formatting
Before:
After:
Moment
moment('2013-11-04T17:23:01.329Z').format('LLLL');
// "Monday, November 4 2013 9:23 AM"

51.
Add Moment using NPM
$ npm install moment --save

52.
Create `formatDate`
Handlebars helper
Posted at {{created_at}}
Posted at {{formatDate created_at}}
function formatDate(dateStr) {
return moment(dateStr).format('LLLL');
}

53.
Questions?

54.
Thanks!
@AirbnbNerds
@spikebrehm