General Assembly Workshop: Advanced JavaScript

5,491 views

Published on

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

No Downloads
Views
Total views
5,491
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
43
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

General Assembly Workshop: Advanced JavaScript

  1. 1. Master Class: Isomorphic JavaScript Spike Brehm @spikebrehm
  2. 2. irst, introductions.
  3. 3. Spike Brehm Software Engineer Airbnb 2.5 years JavaScript & Ruby No CS background; self-taught hacker
  4. 4. My team
  5. 5. My team
  6. 6. My team
  7. 7. Introduce yourselves.
  8. 8. Wo you are. Were you work. Wy you’re here.
  9. 9. Agenda
  10. 10. Wat ...TF is Isomorphic JavaScript? Wy ...is it relevant to web developers? How ...can I build isomorphic apps?
  11. 11. WTF is Isomorphic JavaScript?
  12. 12. JavaScript code that can run on both the client and server.
  13. 13. A brief note on “isomorphic”.
  14. 14. You’re using it wrong! “monomorphic” “heteromorphic” “homomorphic” “multi-platform”
  15. 15. Example, plz.
  16. 16. 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']
  17. 17. Ye olde days: fat-serer, thinclient.
  18. 18. DOM manipulation Form validation Client Animations JavaScript Serer Routing View layer Application logic Persistence Ruby Python Java PHP
  19. 19. Circa 2011: thin-serer, fatclient.
  20. 20. DOM manipulation Form validation Client Animations JavaScript Routing View layer Application logic Serer Persistence Ruby Python Java PHP
  21. 21. Teh footure: shared, fat-serer, fat-client.
  22. 22. DOM manipulation Form validation Client Animations JavaScript Shared Routing JavaScript View layer Application logic Serer Persistence Ruby Python Java PHP
  23. 23. Isomorphic JavaScript can be environmentagnostic or shimmed per environment .
  24. 24. Environment-agnostic Does not depend on browserspecific properties (window) or server-specific properties (process.env, req.cookies).
  25. 25. 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>
  26. 26. Shimmed per environment Provides shims for accessing environment-specific properties so module can expose a single API. window.location.pathname vs. req.path
  27. 27. 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); } });
  28. 28. Isomorphic use cases.
  29. 29. Isomorphic use cases. • Templating • Routing • I18n • Date & currency formatting • Model validation • API interaction • ...?
  30. 30. Most of your favorite libraries can be used isomorphically.
  31. 31. • Underscore.js • Backbone.js • Handlebars.js • jQuery • Moment • React.js • Polyglot.js (I18n)
  32. 32. Wy go to the trouble?
  33. 33. Performance Initial pageload speed. SEO Crawlable single-page apps. Maintainability Reduce code duplication.
  34. 34. Isomorphic JavaScript is a spectrum.
  35. 35. Small bits of view layer or logic shared Entire view layer and app logic shared
  36. 36. Few abstractions Many abstractions
  37. 37. Simple Complex
  38. 38. View layer shared Entire app runtime synced between client & server
  39. 39. Isomorphic frameworks.
  40. 40. Mojito One of the first isomorphic frameworks. • • • • Released by Yahoo! a few years ago. Full-stack framework; YUI components. Super-advanced deferred rendering. Never caught on.
  41. 41. Meteor Awesome framework for building real-time apps. • Full web application framework; has own • • • • build system and package manager. Realtime from the ground up. Requires MongoDB (or adapter). No server-side rendering (yet). All-star dev team.
  42. 42. Rendr Library for isomorphic Backbone.js + Handlebars.js. • • • • Render your Backbone apps on the server. Open-sourced by Airbnb. Less opinionated than the big frameworks. Came out of m.airbnb.com.
  43. 43. Building and bundling.
  44. 44. Browserif Package up CommonJS modules for the browser. Use ‘require()’ in the browser, the same way you would on the server. Bundles a module and all its dependencies.
  45. 45. Browserif demo
  46. 46. Grunt Task runner for automating build and development workflow.
  47. 47. Grunt • Compile Handlebars templates • Run Browserify to package up your shared app files • Recompile files and restart Node server on every change
  48. 48. Any questions thus far?
  49. 49. Hack time.
  50. 50. Sample Node.js app Combines a few modules together for MVP of isomorphic app. Express.js blog platform Basic web server with RESTful API.
  51. 51. Handlebars.js Templating. Superagent HTTP requests to API. Director Routing HTTP and HTML5.
  52. 52. Tour of the app.
  53. 53. Setting up locally.
  54. 54. Clone the sample app git clone git@github.com:spikebrehm/ isomorphic-tutorial.git github.com/spikebrehm/isomorphic-tutorial
  55. 55. 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
  56. 56. Install `grunt-cli` $ npm install grunt-cli -g github.com/spikebrehm/isomorphic-tutorial
  57. 57. Run `npm install` $ cd isomorphic-tutorial $ npm install github.com/spikebrehm/isomorphic-tutorial
  58. 58. Run the serer! $ grunt server View `localhost:3030` in browser github.com/spikebrehm/isomorphic-tutorial
  59. 59. Let’s add a feature.
  60. 60. Date formatting Before: After: Moment moment('2013-11-04T17:23:01.329Z').format('LLLL'); // "Monday, November 4 2013 9:23 AM"
  61. 61. Add Moment using NPM $ npm install moment --save
  62. 62. Create `formatDate` Handlebars helper Posted at {{created_at}} Posted at {{formatDate created_at}} function formatDate(dateStr) { return moment(dateStr).format('LLLL'); }
  63. 63. That wasn’t so hard. Let’s do another.
  64. 64. Create a new post New page at /posts/new Form for post data On submit, POST to the API. Use JavaScript to intercept the submit event and POST via XHR.
  65. 65. Moar features!
  66. 66. Markdown formatting Using Showdown.js. Swap out templating Jade, EJS, Underscore, React.js. Add UI librar Backbone.js, Angular.js. Make it pretty Bootstrap that shit. Responsive?
  67. 67. Towards an isomorphic future.
  68. 68. JavaScript is the lingua franca of the Web. The Web is the platform; JavaScript provides the runtime.
  69. 69. More reusable solutions; more small modules. It will be rare to see a web app using no server-side JavaScript.
  70. 70. The revolution will come in the build systems. Static analysis, conditional builds, source transforms.
  71. 71. Questions?
  72. 72. Thanks! @AirbnbNerds @spikebrehm

×