Your SlideShare is downloading. ×
0
Master Class:
Isomorphic JavaScript

Spike Brehm
@spikebrehm
irst,
introductions.
Spike Brehm
Software Engineer
Airbnb 2.5 years
JavaScript & Ruby

No CS background;
self-taught hacker
My team
My team
My team
Introduce
yourselves.
Wo you are.
Were you work.
Wy you’re here.
Agenda
Wat
...TF is Isomorphic JavaScript?

Wy
...is it relevant to web developers?

How
...can I build isomorphic apps?
WTF is Isomorphic
JavaScript?
JavaScript code that can run
on both the client and server.
A brief note on
“isomorphic”.
You’re using it wrong!
“monomorphic”
“heteromorphic”
“homomorphic”
“multi-platform”
Example, plz.
Example: Underscore.js
var posts = [{
id: 1,
title: 'JavaScript is cool'
}, {
id: 2,
title: 'The Web is the platform'
}];
...
Ye olde days:
fat-serer, thinclient.
DOM
manipulation

Form
validation

Client
Animations

JavaScript

Serer
Routing
View layer
Application logic
Persistence
...
Circa 2011:
thin-serer, fatclient.
DOM
manipulation

Form
validation

Client
Animations

JavaScript

Routing
View layer
Application logic

Serer
Persistence...
Teh footure:
shared, fat-serer,
fat-client.
DOM
manipulation

Form
validation

Client
Animations

JavaScript

Shared
Routing

JavaScript

View layer
Application logic...
Isomorphic
JavaScript can be
environmentagnostic
or
shimmed per
environment .
Environment-agnostic
Does not depend on browserspecific properties (window) or
server-specific properties
(process.env, req....
Example: Handlebars.js
var template =
'<ul>' 
'{{#each posts}}' 
' <li>{{title}}</li>' 
'{{/each}}' 
'</ul>'
;
 
var templ...
Shimmed per environment
Provides shims for accessing
environment-specific properties so
module can expose a single API.
win...
Example: Superagent
superagent
.post('/api/posts.json')
.send({ title: 'Moar JavaScript', body: '...' })
.set('X-Api-KEY',...
Isomorphic use
cases.
Isomorphic use cases.
• Templating
• Routing
• I18n
• Date

& currency formatting
• Model validation
• API interaction
• ....
Most of your
favorite libraries
can be used
isomorphically.
• Underscore.js
• Backbone.js
• Handlebars.js
• jQuery
• Moment
• React.js
• Polyglot.js

(I18n)
Wy go to the
trouble?
Performance
Initial pageload speed.

SEO
Crawlable single-page apps.

Maintainability
Reduce code duplication.
Isomorphic
JavaScript is a
spectrum.
Small bits of
view layer or
logic shared

Entire view
layer and app
logic shared
Few
abstractions

Many
abstractions
Simple

Complex
View layer
shared

Entire app
runtime synced
between client
& server
Isomorphic
frameworks.
Mojito
One of the first isomorphic
frameworks.
•
•
•
•

Released by Yahoo! a few years ago.
Full-stack framework; YUI compo...
Meteor
Awesome framework for building
real-time apps.
• Full web application framework; has own
•
•
•
•

build system and ...
Rendr
Library for isomorphic Backbone.js
+ Handlebars.js.
•
•
•
•

Render your Backbone apps on the server.
Open-sourced b...
Building and
bundling.
Browserif
Package up CommonJS modules for
the browser.
Use ‘require()’ in the browser, the
same way you would on the serv...
Browserif

demo
Grunt
Task runner for automating build and
development workflow.
Grunt
• Compile

Handlebars templates
• Run Browserify to package up your
shared app files
• Recompile files and restart Nod...
Any questions thus
far?
Hack time.
Sample Node.js app
Combines a few modules together
for MVP of isomorphic app.

Express.js blog platform
Basic web server w...
Handlebars.js
Templating.

Superagent
HTTP requests to API.

Director
Routing HTTP and HTML5.
Tour of the app.
Setting up locally.
Clone the sample app
git clone git@github.com:spikebrehm/
isomorphic-tutorial.git

github.com/spikebrehm/isomorphic-tutori...
Ensure Node >= 0.8.x
$ node --version
v0.10.21

Have to install?
$ brew install node
or
http://nodejs.org
github.com/spike...
Install `grunt-cli`
$ npm install grunt-cli -g

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

github.com/spikebrehm/isomorphic-tutorial
Run the serer!
$ grunt server

View `localhost:3030` in browser

github.com/spikebrehm/isomorphic-tutorial
Let’s add a feature.
Date formatting
Before:
After:

Moment
moment('2013-11-04T17:23:01.329Z').format('LLLL');
// "Monday, November 4 2013 9:23...
Add Moment using NPM
$ npm install moment --save
Create `formatDate`
Handlebars helper
Posted at {{created_at}}
Posted at {{formatDate created_at}}

function formatDate(da...
That wasn’t so hard.
Let’s do another.
Create a new post
New page at /posts/new
Form for post data
On submit, POST to the API.
Use JavaScript to intercept the
su...
Moar features!
Markdown formatting
Using Showdown.js.

Swap out templating
Jade, EJS, Underscore, React.js.

Add UI librar

Backbone.js,...
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?
Thanks!
@AirbnbNerds
@spikebrehm
Upcoming SlideShare
Loading in...5
×

General Assembly Workshop: Advanced JavaScript

4,791

Published on

Published in: Technology

Transcript of "General Assembly Workshop: Advanced JavaScript"

  1. 1. Master Class: Isomorphic JavaScript Spike Brehm @spikebrehm
  2. 2. irst, introductions.
  3. 3. Spike Brehm Software Engineer Airbnb 2.5 years JavaScript & Ruby No CS background; self-taught hacker
  4. 4. My team
  5. 5. My team
  6. 6. My team
  7. 7. Introduce yourselves.
  8. 8. Wo you are. Were you work. Wy you’re here.
  9. 9. Agenda
  10. 10. Wat ...TF is Isomorphic JavaScript? Wy ...is it relevant to web developers? How ...can I build isomorphic apps?
  11. 11. WTF is Isomorphic JavaScript?
  12. 12. JavaScript code that can run on both the client and server.
  13. 13. A brief note on “isomorphic”.
  14. 14. You’re using it wrong! “monomorphic” “heteromorphic” “homomorphic” “multi-platform”
  15. 15. Example, plz.
  16. 16. 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']
  17. 17. Ye olde days: fat-serer, thinclient.
  18. 18. DOM manipulation Form validation Client Animations JavaScript Serer Routing View layer Application logic Persistence Ruby Python Java PHP
  19. 19. Circa 2011: thin-serer, fatclient.
  20. 20. DOM manipulation Form validation Client Animations JavaScript Routing View layer Application logic Serer Persistence Ruby Python Java PHP
  21. 21. Teh footure: shared, fat-serer, fat-client.
  22. 22. DOM manipulation Form validation Client Animations JavaScript Shared Routing JavaScript View layer Application logic Serer Persistence Ruby Python Java PHP
  23. 23. Isomorphic JavaScript can be environmentagnostic or shimmed per environment .
  24. 24. Environment-agnostic Does not depend on browserspecific properties (window) or server-specific properties (process.env, req.cookies).
  25. 25. 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>
  26. 26. Shimmed per environment Provides shims for accessing environment-specific properties so module can expose a single API. window.location.pathname vs. req.path
  27. 27. 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); } });
  28. 28. Isomorphic use cases.
  29. 29. Isomorphic use cases. • Templating • Routing • I18n • Date & currency formatting • Model validation • API interaction • ...?
  30. 30. Most of your favorite libraries can be used isomorphically.
  31. 31. • Underscore.js • Backbone.js • Handlebars.js • jQuery • Moment • React.js • Polyglot.js (I18n)
  32. 32. Wy go to the trouble?
  33. 33. Performance Initial pageload speed. SEO Crawlable single-page apps. Maintainability Reduce code duplication.
  34. 34. Isomorphic JavaScript is a spectrum.
  35. 35. Small bits of view layer or logic shared Entire view layer and app logic shared
  36. 36. Few abstractions Many abstractions
  37. 37. Simple Complex
  38. 38. View layer shared Entire app runtime synced between client & server
  39. 39. Isomorphic frameworks.
  40. 40. Mojito One of the first isomorphic frameworks. • • • • Released by Yahoo! a few years ago. Full-stack framework; YUI components. Super-advanced deferred rendering. Never caught on.
  41. 41. Meteor Awesome framework for building real-time apps. • Full web application framework; has own • • • • build system and package manager. Realtime from the ground up. Requires MongoDB (or adapter). No server-side rendering (yet). All-star dev team.
  42. 42. Rendr Library for isomorphic Backbone.js + Handlebars.js. • • • • Render your Backbone apps on the server. Open-sourced by Airbnb. Less opinionated than the big frameworks. Came out of m.airbnb.com.
  43. 43. Building and bundling.
  44. 44. Browserif Package up CommonJS modules for the browser. Use ‘require()’ in the browser, the same way you would on the server. Bundles a module and all its dependencies.
  45. 45. Browserif demo
  46. 46. Grunt Task runner for automating build and development workflow.
  47. 47. Grunt • Compile Handlebars templates • Run Browserify to package up your shared app files • Recompile files and restart Node server on every change
  48. 48. Any questions thus far?
  49. 49. Hack time.
  50. 50. Sample Node.js app Combines a few modules together for MVP of isomorphic app. Express.js blog platform Basic web server with RESTful API.
  51. 51. Handlebars.js Templating. Superagent HTTP requests to API. Director Routing HTTP and HTML5.
  52. 52. Tour of the app.
  53. 53. Setting up locally.
  54. 54. Clone the sample app git clone git@github.com:spikebrehm/ isomorphic-tutorial.git github.com/spikebrehm/isomorphic-tutorial
  55. 55. 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
  56. 56. Install `grunt-cli` $ npm install grunt-cli -g github.com/spikebrehm/isomorphic-tutorial
  57. 57. Run `npm install` $ cd isomorphic-tutorial $ npm install github.com/spikebrehm/isomorphic-tutorial
  58. 58. Run the serer! $ grunt server View `localhost:3030` in browser github.com/spikebrehm/isomorphic-tutorial
  59. 59. Let’s add a feature.
  60. 60. Date formatting Before: After: Moment moment('2013-11-04T17:23:01.329Z').format('LLLL'); // "Monday, November 4 2013 9:23 AM"
  61. 61. Add Moment using NPM $ npm install moment --save
  62. 62. Create `formatDate` Handlebars helper Posted at {{created_at}} Posted at {{formatDate created_at}} function formatDate(dateStr) { return moment(dateStr).format('LLLL'); }
  63. 63. That wasn’t so hard. Let’s do another.
  64. 64. Create a new post New page at /posts/new Form for post data On submit, POST to the API. Use JavaScript to intercept the submit event and POST via XHR.
  65. 65. Moar features!
  66. 66. Markdown formatting Using Showdown.js. Swap out templating Jade, EJS, Underscore, React.js. Add UI librar Backbone.js, Angular.js. Make it pretty Bootstrap that shit. Responsive?
  67. 67. Towards an isomorphic future.
  68. 68. JavaScript is the lingua franca of the Web. The Web is the platform; JavaScript provides the runtime.
  69. 69. More reusable solutions; more small modules. It will be rare to see a web app using no server-side JavaScript.
  70. 70. The revolution will come in the build systems. Static analysis, conditional builds, source transforms.
  71. 71. Questions?
  72. 72. Thanks! @AirbnbNerds @spikebrehm
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×