In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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 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 ! spikebrehm/isomorphic-examples
  35. Task runner for automating build and development workflow. Grunt
  36. Grunt demo ! 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
  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!