General Assembly Workshop: Advanced JavaScript
10 likes•6,210 views
The document discusses isomorphic JavaScript, which allows JavaScript code to run on both the client and server. It provides examples using libraries like Underscore.js and Handlebars.js isomorphically. Frameworks like Meteor, Mojito, and Rendr are introduced that support building isomorphic apps. The benefits are around performance, SEO, and code maintainability. The presentation concludes with a demo of building features into an sample isomorphic blog application.
![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']](https://image.slidesharecdn.com/2013-11-21-isomorphic-ga-131122123837-phpapp01/85/General-Assembly-Workshop-Advanced-JavaScript-16-320.jpg)
General Assembly Workshop: Advanced JavaScript
- 1. Master Class: Isomorphic JavaScript Spike Brehm @spikebrehm
- 3. Spike Brehm Software Engineer Airbnb 2.5 years JavaScript & Ruby No CS background; self-taught hacker
- 4. My team
- 5. My team
- 6. My team
- 8. Wo you are. Were you work. Wy you’re here.
- 9. Agenda
- 10. Wat ...TF is Isomorphic JavaScript? Wy ...is it relevant to web developers? How ...can I build isomorphic apps?
- 12. JavaScript code that can run on both the client and server.
- 13. A brief note on “isomorphic”.
- 14. You’re using it wrong! “monomorphic” “heteromorphic” “homomorphic” “multi-platform”
- 15. Example, plz.
- 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. Ye olde days: fat-serer, thinclient.
- 23. Isomorphic JavaScript can be environmentagnostic or shimmed per environment .
- 24. Environment-agnostic Does not depend on browserspecific properties (window) or server-specific properties (process.env, req.cookies).
- 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. Shimmed per environment Provides shims for accessing environment-specific properties so module can expose a single API. window.location.pathname vs. req.path
- 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); } });
- 29. Isomorphic use cases. • Templating • Routing • I18n • Date & currency formatting • Model validation • API interaction • ...?
- 30. Most of your favorite libraries can be used isomorphically.
- 31. • Underscore.js • Backbone.js • Handlebars.js • jQuery • Moment • React.js • Polyglot.js (I18n)
- 32. Wy go to the trouble?
- 33. Performance Initial pageload speed. SEO Crawlable single-page apps. Maintainability Reduce code duplication.
- 35. Small bits of view layer or logic shared Entire view layer and app logic shared
- 37. Simple Complex
- 38. View layer shared Entire app runtime synced between client & server
- 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. 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. 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.
- 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. Browserif demo
- 46. Grunt Task runner for automating build and development workflow.
- 47. Grunt • Compile Handlebars templates • Run Browserify to package up your shared app files • Recompile files and restart Node server on every change
- 49. Hack time.
- 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. Handlebars.js Templating. Superagent HTTP requests to API. Director Routing HTTP and HTML5.
- 52. Tour of the app.
- 54. Clone the sample app git clone [email protected]:spikebrehm/ isomorphic-tutorial.git github.com/spikebrehm/isomorphic-tutorial
- 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. Install `grunt-cli` $ npm install grunt-cli -g github.com/spikebrehm/isomorphic-tutorial
- 57. Run `npm install` $ cd isomorphic-tutorial $ npm install github.com/spikebrehm/isomorphic-tutorial
- 58. Run the serer! $ grunt server View `localhost:3030` in browser github.com/spikebrehm/isomorphic-tutorial
- 59. Let’s add a feature.
- 60. Date formatting Before: After: Moment moment('2013-11-04T17:23:01.329Z').format('LLLL'); // "Monday, November 4 2013 9:23 AM"
- 61. Add Moment using NPM $ npm install moment --save
- 62. Create `formatDate` Handlebars helper Posted at {{created_at}} Posted at {{formatDate created_at}} function formatDate(dateStr) { return moment(dateStr).format('LLLL'); }
- 63. That wasn’t so hard. Let’s do another.
- 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. Moar features!
- 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?
- 68. JavaScript is the lingua franca of the Web. The Web is the platform; JavaScript provides the runtime.
- 69. More reusable solutions; more small modules. It will be rare to see a web app using no server-side JavaScript.
- 70. The revolution will come in the build systems. Static analysis, conditional builds, source transforms.
- 71. Questions?