Your SlideShare is downloading. ×
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps

11,563

Published on

Published in: Technology
0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,563
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
75
Comments
0
Likes
22
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!

×