Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
In Pursuit of the Holy Grail:
Building Isomorphic
JavaScript Apps
Spike Brehm
@spikebrehm
Spike Brehm
Software Engineer
@AirbnbNerds
Agenda
...TF is Isomorphic JavaScript?
Wat
...is it relevant to web developers?
Wy
...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).
Environme...
Example: Handlebars.js
var template = !
'<ul>' !
'{{#each posts}}' !
' <li>{{title}}</li>' !
'{{/each}}' !
'</ul>'!
;!
 !
...
Provides shims for accessing
environment-specific properties so
module can expose a single API.
window.location.pathname	
v...
Example: Superagent
superagent!
.post('/api/posts.json')!
.send({ title: 'Moar JavaScript', body: '...' })!
.end(function(...
Isomorphic use
cases.
• Templating
• Routing
• I18n
• Date & currency formatting
• Model validation
• API interaction
• ...?
Isomorphic use case...
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?
Initial pageload speed.
Performance
Crawlable single-page apps.
SEO
Reduce code duplication.
Maintainability
Run code wher...
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 manip...
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
Browserify
Use require() in the browser, the
same way you would on the server.
Package up CommonJS modules for
the browser.
Browserify
demo
!
github.com/
spikebrehm/isomorphic-examples
Task runner for automating build and
development workflow.
Grunt
Grunt
demo
!
github.com/
spikebrehm/isomorphic-examples
Wat about
shimmed per
environment?
How does Superagent do it?
Use package.json’s “browser” field
"browser": {
"./lib/node/index.js": “./lib/client.js",
"emitt...
Isomorphic
frameworks.
Mojito
Yahoo!; Full-stack; Never caught on.
Meteor
Realtime; Full-stack; Awesome.
No server-side rendering (yet).
Rendr
Ai...
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!
Upcoming SlideShare
Loading in …5
×

In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps

22,988 views

Published on

Published in: Technology
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps

  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!

×