Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (8)
Similar to General Assembly Workshop: Advanced JavaScript
Similar to General Assembly Workshop: Advanced JavaScript (20)
Recently uploaded
Recently uploaded (20)
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 git@github.com: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?