Isomorphic JavaScript: #DevBeat Master Class

20,242 views

Published on

Published in: Technology

Isomorphic JavaScript: #DevBeat Master Class

  1. 1. Master Class: Isomorphic JavaScript Spike Brehm @spikebrehm
  2. 2. New iOS, Android apps launched today </marketing>
  3. 3. Agenda
  4. 4. Wat ...TF is Isomorphic JavaScript? Wy ...is it relevant to web developers? How ...can I build isomorphic apps?
  5. 5. WTF is Isomorphic JavaScript?
  6. 6. JavaScript code that can run on both the client and server.
  7. 7. A brief note on “isomorphic”.
  8. 8. You’re using it wrong! “monomorphic” “heteromorphic” “homomorphic” “multi-platform”
  9. 9. Example, plz.
  10. 10. 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']
  11. 11. Ye olde days: fat-serer, thinclient.
  12. 12. DOM manipulation Form validation Client Animations JavaScript Serer Routing View layer Application logic Persistence Ruby Python Java PHP
  13. 13. Circa 2011: thin-serer, fatclient.
  14. 14. DOM manipulation Form validation Client Animations JavaScript Routing View layer Application logic Serer Persistence Ruby Python Java PHP
  15. 15. Teh footure: shared, fat-serer, fat-client.
  16. 16. DOM manipulation Form validation Client Animations JavaScript Shared Routing JavaScript View layer Application logic Serer Persistence Ruby Python Java PHP
  17. 17. Isomorphic JavaScript can be environmentagnostic or shimmed per environment .
  18. 18. Environment-agnostic Does not depend on browserspecific properties (window) or server-specific properties (process.env, req.cookies).
  19. 19. 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>
  20. 20. Shimmed per environment Provides shims for accessing environment-specific properties so module can expose a single API. window.location.pathname vs. req.path
  21. 21. 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); } });
  22. 22. Isomorphic use cases.
  23. 23. Isomorphic use cases. • Templating • Routing • I18n • Date & currency formatting • Model validation • API interaction • ...?
  24. 24. Most of your favorite libraries can be used isomorphically.
  25. 25. • Underscore.js • Backbone.js • Handlebars.js • jQuery • Moment • React.js • Polyglot.js (I18n)
  26. 26. Isomorphic JavaScript is a spectrum.
  27. 27. Small bits of view layer or logic shared Entire view layer and app logic shared
  28. 28. Few abstractions Many abstractions
  29. 29. Simple Complex
  30. 30. View layer shared Entire app runtime synced between client & server
  31. 31. Wy go to the trouble?
  32. 32. Performance Initial pageload speed. SEO Crawlable single-page apps. Maintainability Reduce code duplication.
  33. 33. Building and bundling.
  34. 34. Browserif Package up CommonJS modules for the browser. Use ‘require()’ in the browser, the same way you would on the server.
  35. 35. Browserif // app/template_renderer.js   var handlebars = require('handlebars');   module.exports = function(templatePath, data) { var templateFn = require('./views/' + templatePath) , html = templateFn(data); return html; }; Bundles a module and all its dependencies.
  36. 36. Grunt Task runner for automating build and development workflow.
  37. 37. Grunt • Compile Handlebars templates • Run Browserify to package up your shared app files • Recompile files and restart Node server on every change
  38. 38. Any questions thus far?
  39. 39. Hack time.
  40. 40. Sample Node.js app Combines a few modules together for MVP of isomorphic app. Express.js blog platform Basic web server with RESTful API.
  41. 41. Handlebars.js Templating. Superagent HTTP requests to API. Director Routing HTTP and HTML5.
  42. 42. Tour of the app.
  43. 43. Setting up locally.
  44. 44. Clone the sample app git clone git@github.com:spikebrehm/ isomorphic-tutorial.git github.com/spikebrehm/isomorphic-tutorial
  45. 45. 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
  46. 46. Install `grunt-cli` $ npm install grunt-cli -g github.com/spikebrehm/isomorphic-tutorial
  47. 47. Run `npm install` $ cd isomorphic-tutorial $ npm install github.com/spikebrehm/isomorphic-tutorial
  48. 48. Run the serer! $ grunt server View `localhost:3030` in browser github.com/spikebrehm/isomorphic-tutorial
  49. 49. Let’s add a feature.
  50. 50. Date formatting Before: After: Moment moment('2013-11-04T17:23:01.329Z').format('LLLL'); // "Monday, November 4 2013 9:23 AM"
  51. 51. Add Moment using NPM $ npm install moment --save
  52. 52. Create `formatDate` Handlebars helper Posted at {{created_at}} Posted at {{formatDate created_at}} function formatDate(dateStr) { return moment(dateStr).format('LLLL'); }
  53. 53. Questions?
  54. 54. Thanks! @AirbnbNerds @spikebrehm

×