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

Like this? Share it with your network

Share

In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps

on

  • 9,051 views

 

Statistics

Views

Total Views
9,051
Views on SlideShare
8,386
Embed Views
665

Actions

Likes
20
Downloads
56
Comments
0

8 Embeds 665

http://www.scoop.it 562
https://twitter.com 74
http://librosweb.es 13
http://www.slideee.com 5
https://gitter.im 5
http://www.google.com 4
https://home.jolicloud.com 1
http://www.conferize.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps Presentation 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!