JSConf US 2014: Building Isomorphic Apps

Building Isomorphic Apps
Spike Brehm
@spikebrehm
@spikebrehm
@AirbnbNerds
Spike Brehm
Isomorphic
JavaScript.
WTF is Isomorphic
JavaScript?
JavaScript code that can be
shared between environments.
JavaScript code that can be
shared between environments.
JavaScript code that can be
shared between environments.
JavaScript code that can be
shared between environments.
Backend
Ruby
Python
Java
PHP
Node.js
Persistence
Client
JavaScript
Shared
JavaScript
DOM manipulation UX
View layer
Application
logic
Routing
Etymology of
“Isomorphic
JavaScript”.
adjective
corresponding or similar in form and relations.
i·so·mor·phic
i·so·mor·phic
formsame
http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/
“monomorphic”
“heteromorphic”
“homomorphic”
“polymorphic”
You’re using it wrong!
JSConf US 2014: Building Isomorphic Apps
Isomorphic
JavaScript
in the wild.
Flickr
Flickr
! Yahoo’s Modown libraries
(successor to Mojito).
Flickr
Instagram*
Instagram*
! Facebook’s React library
in a Django app.
Instagram*
Airbnb Mobile
Airbnb Mobile
! Airbnb’s Rendr library, built on
Backbone and Express.
Airbnb Mobile
Asana
! Entire App runtime synced
between client & server.
Asana
Meteor
! Realtime app framework.
Meteor
Wy go to the
trouble?
Initial pageload speed.
Performance
Crawlable single-page apps.
SEO*
Reduce code duplication.
Maintainability
Run code anywhere.
Flexibility
Isomorphic use
cases.
• Templating
• I18n
• Date & currency formatting
• Application logic
• Routing
• Model validation
• API interaction
• ...?
Isomorphic use cases.
Isomorphic
JavaScript is a
spectrum.
Entire view
layer and app
logic shared
Small bits of
view layer or
logic shared
Many
abstractions
Few
abstractions
View layer
shared
Entire app
runtime synced
between client
& server
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});
Provide shims for accessing
environment-specific properties so
module can expose a single API.
window.location.pathname	
vs.
req.path
Shimmed per environment
Example: Superagent
superagent!
.get('/api/posts.json')!
.end(function(res) {!
if (res.status === 200) {!
console.log("Posts:", res.body);!
} else {!
console.error("Error");!
}!
});
Abstractions.
Abstraction: User Agent
Client navigator.userAgent
Server req.get('user-agent')
Abstraction: Cookies
Client
document.cookie =!
'myCookie=1; Domain=.example.org';
Server
res.setHeader(!
'Set-Cookie: myCookie=1; ' +!
'Domain=.example.org'!
);
Abstraction: Redirects
Client
document.location.href = '/login';!
!
window.pushState({}, '', '/login');
Server res.redirect('/login');
How to isomorph.
Let’s write a module that abstracts the
setting of cookies, providing the same
API for client & server.
setCookie('myCookie', 'the value');
setCookie('myCookie', 'the value');
document.cookie = 'myCookie=the%20value';
or
res.setHeader('Set-Cookie: myCookie=the%20value;');
setCookie('myCookie', 'the value', {!
path: '/',!
domain: '.example.org',!
expires: new Date(2014, 12, 31)!
});
document.cookie =!
'myCookie=the%20value; Domain=.example.org; ' +!
'Path=/; Expires=Sat, 31 Jan 2015 05:00:00 GMT';
Eww, that looks hard.
JSConf US 2014: Building Isomorphic Apps
NPM & Browserify
to the rescue.
Browserify
Use CommonJS to require()
modules in the browser.
Browserify
Package dependencies from
node_modules into our bundle.
How do we make a
shimmed-per-
environment module?
Utilize package.json “browser” field.
{!
"name": "set-cookie",!
"dependencies": {...}!
}!
!
!
!
{!
"name": "set-cookie",!
"dependencies": {...},!
"browser": "./lib/client.js"!
}!
!
!
Swap out the entire
implementation.
{!
"name": "set-cookie",!
"dependencies": {...},!
"browser": {!
"./lib/node.js": "./lib/client.js"!
}!
}!
Swap out specific files.
{!
"name": "set-cookie",!
"dependencies": {...},!
"browser": {!
"./lib/node.js": "./lib/client.js",!
"cookie": "cookie-browser"!
}!
}
Swap out dependencies.
Let’s build `set-cookie`.
https://github.com/spikebrehm/set-cookie
Module structure
.!
"## index.js!
"## lib!
$   %## setter!
$   "## index.js!
$   %## client.js!
"## node_modules!
$   %## cookie
// ./index.js!
!
var cookie = require('cookie');!
var setter = require('./lib/setter');!
!
module.exports = function(name, value, options) {!
  var cookieStr = cookie.serialize(name, value, options);!
  setter(cookieStr, options);!
};
// ./lib/setter/index.js!
!
module.exports = function setter(cookieStr, options) {!
  var res = options && options.res;!
!
  if (!res)!
throw new Error('Must specify `res` ' +!
'when setting cookie.’);!
!
  res.setHeader('Set-Cookie', cookieStr);!
};
// ./lib/setter/client.js!
!
module.exports = function setter(cookieStr) {!
  document.cookie = cookieStr;!
};
// ./package.json!
!
{!
"name": "set-cookie",!
"dependencies": {!
"cookie": "^0.1.2"!
},!
"browser": {!
"./lib/setter/index.js": "./lib/setter/client.js"!
}!
}
// ./index.js!
!
var cookie = require('cookie');!
var setter = require('./lib/setter');!
!
module.exports = function(name, value, options) {!
  var cookieStr = cookie.serialize(name, value, options);!
  setter(cookieStr, options);!
};
How to isomorph
in a nutshell.
@spikebrehm

@AirbnbNerds
Thanks!
More resources available at

http://spike.technology
@spikebrehm

@AirbnbNerds
Thanks!
More resources available at

http://spike.technology
We’re hiring!!!We’re hiring!!!We’re hiring!!!We’re hiring!!!We’re hiring!!!We’re hiring!!!
1 of 71

Recommended

Building Isomorphic Apps (JSConf.Asia 2014) by
Building Isomorphic Apps (JSConf.Asia 2014)Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)Spike Brehm
9.5K views71 slides
General Assembly Workshop: Advanced JavaScript by
General Assembly Workshop: Advanced JavaScriptGeneral Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScriptSpike Brehm
6.2K views72 slides
Integrating Browserify with Sprockets by
Integrating Browserify with SprocketsIntegrating Browserify with Sprockets
Integrating Browserify with SprocketsSpike Brehm
1.8K views34 slides
Building Isomorphic JavaScript Apps - NDC 2015 by
Building Isomorphic JavaScript Apps - NDC 2015Building Isomorphic JavaScript Apps - NDC 2015
Building Isomorphic JavaScript Apps - NDC 2015Eirik Vullum
1.9K views125 slides
Isomorphic JavaScript: #DevBeat Master Class by
Isomorphic JavaScript: #DevBeat Master ClassIsomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master ClassSpike Brehm
24.1K views55 slides
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps by
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsIn Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsSpike Brehm
25.5K views46 slides

More Related Content

What's hot

The Evolution of Airbnb's Frontend by
The Evolution of Airbnb's FrontendThe Evolution of Airbnb's Frontend
The Evolution of Airbnb's FrontendSpike Brehm
378.5K views56 slides
Browserify by
BrowserifyBrowserify
Browserifydavidchubbs
1.6K views14 slides
Getting Started with HTML 5 Web workers by
Getting Started with HTML 5 Web workersGetting Started with HTML 5 Web workers
Getting Started with HTML 5 Web workersFlumes
1.7K views33 slides
Node, express & sails by
Node, express & sailsNode, express & sails
Node, express & sailsBrian Shannon
712 views33 slides
SxSW 2015 by
SxSW 2015SxSW 2015
SxSW 2015Mike McNeil
1K views99 slides
Workshop Intro: FrontEnd General Overview by
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewVisual Engineering
668 views34 slides

What's hot(20)

The Evolution of Airbnb's Frontend by Spike Brehm
The Evolution of Airbnb's FrontendThe Evolution of Airbnb's Frontend
The Evolution of Airbnb's Frontend
Spike Brehm378.5K views
Getting Started with HTML 5 Web workers by Flumes
Getting Started with HTML 5 Web workersGetting Started with HTML 5 Web workers
Getting Started with HTML 5 Web workers
Flumes1.7K views
JavaScript Dependencies, Modules & Browserify by Johan Nilsson
JavaScript Dependencies, Modules & BrowserifyJavaScript Dependencies, Modules & Browserify
JavaScript Dependencies, Modules & Browserify
Johan Nilsson8.4K views
Isomorphic web application by Oliver N
Isomorphic web applicationIsomorphic web application
Isomorphic web application
Oliver N3K views
Web Workers by IntexSoft
Web WorkersWeb Workers
Web Workers
IntexSoft94 views
Service Worker 201 (en) by Chang W. Doh
Service Worker 201 (en)Service Worker 201 (en)
Service Worker 201 (en)
Chang W. Doh426 views
Single Page Application (SPA) using AngularJS by M R Rony
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
M R Rony29.8K views
Packing it all: JavaScript module bundling from 2000 to now by Derek Willian Stavis
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone by Deepu S Nath
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Deepu S Nath45.7K views
Webpack Tutorial, Uppsala JS by Emil Öberg
Webpack Tutorial, Uppsala JSWebpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JS
Emil Öberg1.3K views
Once upon a time, there were css, js and server-side rendering by Andrea Giannantonio
Once upon a time, there were css, js and server-side renderingOnce upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side rendering
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08 by Tim Stephenson
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
Tim Stephenson638 views

Similar to JSConf US 2014: Building Isomorphic Apps

Be ef presentation-securitybyte2011-michele_orru by
Be ef presentation-securitybyte2011-michele_orruBe ef presentation-securitybyte2011-michele_orru
Be ef presentation-securitybyte2011-michele_orruMichele Orru
2.7K views32 slides
Isomorphic JS - new silver bullet by
Isomorphic JS - new silver bulletIsomorphic JS - new silver bullet
Isomorphic JS - new silver bulletimevs
877 views28 slides
VisualWeb - Building a NodeJS Server Meshwork and Full-Javascript Stack Frame... by
VisualWeb - Building a NodeJS Server Meshwork and Full-Javascript Stack Frame...VisualWeb - Building a NodeJS Server Meshwork and Full-Javascript Stack Frame...
VisualWeb - Building a NodeJS Server Meshwork and Full-Javascript Stack Frame...itsatony
986 views45 slides
(In)Security Implication in the JS Universe by
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS UniverseStefano Di Paola
1.6K views49 slides
Intro to node.js - Ran Mizrahi (27/8/2014) by
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Ran Mizrahi
1.1K views34 slides
Intro to node.js - Ran Mizrahi (28/8/14) by
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Ran Mizrahi
564 views34 slides

Similar to JSConf US 2014: Building Isomorphic Apps(20)

Be ef presentation-securitybyte2011-michele_orru by Michele Orru
Be ef presentation-securitybyte2011-michele_orruBe ef presentation-securitybyte2011-michele_orru
Be ef presentation-securitybyte2011-michele_orru
Michele Orru2.7K views
Isomorphic JS - new silver bullet by imevs
Isomorphic JS - new silver bulletIsomorphic JS - new silver bullet
Isomorphic JS - new silver bullet
imevs877 views
VisualWeb - Building a NodeJS Server Meshwork and Full-Javascript Stack Frame... by itsatony
VisualWeb - Building a NodeJS Server Meshwork and Full-Javascript Stack Frame...VisualWeb - Building a NodeJS Server Meshwork and Full-Javascript Stack Frame...
VisualWeb - Building a NodeJS Server Meshwork and Full-Javascript Stack Frame...
itsatony986 views
(In)Security Implication in the JS Universe by Stefano Di Paola
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe
Stefano Di Paola1.6K views
Intro to node.js - Ran Mizrahi (27/8/2014) by Ran Mizrahi
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)
Ran Mizrahi1.1K views
Intro to node.js - Ran Mizrahi (28/8/14) by Ran Mizrahi
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)
Ran Mizrahi564 views
JavaScript Libraries: The Big Picture by Simon Willison
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
Simon Willison4K views
Refactoring JavaScript Applications by Jovan Vidić
Refactoring JavaScript ApplicationsRefactoring JavaScript Applications
Refactoring JavaScript Applications
Jovan Vidić768 views
Beginning MEAN Stack by Rob Davarnia
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
Rob Davarnia1.5K views
Developing Java Web Applications by hchen1
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applications
hchen116.4K views
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28 by Frédéric Harper
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28
Frédéric Harper734 views
From Backbone to Ember and Back(bone) Again by jonknapp
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
jonknapp746 views
Creating Custom Dojo Widgets Using WTP by nsandonato
Creating Custom Dojo Widgets Using WTPCreating Custom Dojo Widgets Using WTP
Creating Custom Dojo Widgets Using WTP
nsandonato1K views
从小书签到浏览器扩展的应用 by Alipay
从小书签到浏览器扩展的应用从小书签到浏览器扩展的应用
从小书签到浏览器扩展的应用
Alipay1K views
Flash And Dom by Mike Wilcox
Flash And DomFlash And Dom
Flash And Dom
Mike Wilcox10.5K views
From Idea to App (or “How we roll at Small Town Heroes”) by Bramus Van Damme
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
Bramus Van Damme8.6K views

Recently uploaded

Serverless computing with Google Cloud (2023-24) by
Serverless computing with Google Cloud (2023-24)Serverless computing with Google Cloud (2023-24)
Serverless computing with Google Cloud (2023-24)wesley chun
11 views33 slides
Future of Indian ConsumerTech by
Future of Indian ConsumerTechFuture of Indian ConsumerTech
Future of Indian ConsumerTechKapil Khandelwal (KK)
22 views68 slides
PharoJS - Zürich Smalltalk Group Meetup November 2023 by
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023Noury Bouraqadi
132 views17 slides
SUPPLIER SOURCING.pptx by
SUPPLIER SOURCING.pptxSUPPLIER SOURCING.pptx
SUPPLIER SOURCING.pptxangelicacueva6
16 views1 slide
virtual reality.pptx by
virtual reality.pptxvirtual reality.pptx
virtual reality.pptxG036GaikwadSnehal
14 views15 slides
6g - REPORT.pdf by
6g - REPORT.pdf6g - REPORT.pdf
6g - REPORT.pdfLiveplex
10 views23 slides

Recently uploaded(20)

Serverless computing with Google Cloud (2023-24) by wesley chun
Serverless computing with Google Cloud (2023-24)Serverless computing with Google Cloud (2023-24)
Serverless computing with Google Cloud (2023-24)
wesley chun11 views
PharoJS - Zürich Smalltalk Group Meetup November 2023 by Noury Bouraqadi
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023
Noury Bouraqadi132 views
6g - REPORT.pdf by Liveplex
6g - REPORT.pdf6g - REPORT.pdf
6g - REPORT.pdf
Liveplex10 views
Case Study Copenhagen Energy and Business Central.pdf by Aitana
Case Study Copenhagen Energy and Business Central.pdfCase Study Copenhagen Energy and Business Central.pdf
Case Study Copenhagen Energy and Business Central.pdf
Aitana16 views
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by sugiuralab
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors
sugiuralab21 views
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by Dr. Jimmy Schwarzkopf
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson92 views
Unit 1_Lecture 2_Physical Design of IoT.pdf by StephenTec
Unit 1_Lecture 2_Physical Design of IoT.pdfUnit 1_Lecture 2_Physical Design of IoT.pdf
Unit 1_Lecture 2_Physical Design of IoT.pdf
StephenTec12 views
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf

JSConf US 2014: Building Isomorphic Apps