Isomorphic JavaScript: #DevBeat Master Class

  • 9,785 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,785
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
54
Comments
0
Likes
11

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