• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
General Assembly Workshop: Advanced JavaScript

General Assembly Workshop: Advanced JavaScript






Total Views
Views on SlideShare
Embed Views



1 Embed 12

https://twitter.com 12



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    General Assembly Workshop: Advanced JavaScript General Assembly Workshop: Advanced JavaScript Presentation Transcript

    • Master Class: Isomorphic JavaScript Spike Brehm @spikebrehm
    • irst, introductions.
    • Spike Brehm Software Engineer Airbnb 2.5 years JavaScript & Ruby No CS background; self-taught hacker
    • My team
    • My team
    • My team
    • Introduce yourselves.
    • Wo you are. Were you work. Wy you’re here.
    • Agenda
    • Wat ...TF is Isomorphic JavaScript? Wy ...is it relevant to web developers? How ...can I build isomorphic apps?
    • WTF is Isomorphic JavaScript?
    • JavaScript code that can run on both the client and server.
    • A brief note on “isomorphic”.
    • You’re using it wrong! “monomorphic” “heteromorphic” “homomorphic” “multi-platform”
    • Example, plz.
    • 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']
    • Ye olde days: fat-serer, thinclient.
    • DOM manipulation Form validation Client Animations JavaScript Serer Routing View layer Application logic Persistence Ruby Python Java PHP
    • Circa 2011: thin-serer, fatclient.
    • DOM manipulation Form validation Client Animations JavaScript Routing View layer Application logic Serer Persistence Ruby Python Java PHP
    • Teh footure: shared, fat-serer, fat-client.
    • DOM manipulation Form validation Client Animations JavaScript Shared Routing JavaScript View layer Application logic Serer Persistence Ruby Python Java PHP
    • Isomorphic JavaScript can be environmentagnostic or shimmed per environment .
    • Environment-agnostic Does not depend on browserspecific properties (window) or server-specific properties (process.env, req.cookies).
    • 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>
    • Shimmed per environment Provides shims for accessing environment-specific properties so module can expose a single API. window.location.pathname vs. req.path
    • 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); } });
    • Isomorphic use cases.
    • Isomorphic use cases. • Templating • Routing • I18n • Date & currency formatting • Model validation • API interaction • ...?
    • Most of your favorite libraries can be used isomorphically.
    • • Underscore.js • Backbone.js • Handlebars.js • jQuery • Moment • React.js • Polyglot.js (I18n)
    • Wy go to the trouble?
    • Performance Initial pageload speed. SEO Crawlable single-page apps. Maintainability Reduce code duplication.
    • Isomorphic JavaScript is a spectrum.
    • Small bits of view layer or logic shared Entire view layer and app logic shared
    • Few abstractions Many abstractions
    • Simple Complex
    • View layer shared Entire app runtime synced between client & server
    • Isomorphic frameworks.
    • 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.
    • 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.
    • 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.
    • Building and bundling.
    • 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.
    • Browserif demo
    • Grunt Task runner for automating build and development workflow.
    • Grunt • Compile Handlebars templates • Run Browserify to package up your shared app files • Recompile files and restart Node server on every change
    • Any questions thus far?
    • Hack time.
    • Sample Node.js app Combines a few modules together for MVP of isomorphic app. Express.js blog platform Basic web server with RESTful API.
    • Handlebars.js Templating. Superagent HTTP requests to API. Director Routing HTTP and HTML5.
    • Tour of the app.
    • Setting up locally.
    • Clone the sample app git clone git@github.com:spikebrehm/ isomorphic-tutorial.git github.com/spikebrehm/isomorphic-tutorial
    • 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
    • Install `grunt-cli` $ npm install grunt-cli -g github.com/spikebrehm/isomorphic-tutorial
    • Run `npm install` $ cd isomorphic-tutorial $ npm install github.com/spikebrehm/isomorphic-tutorial
    • Run the serer! $ grunt server View `localhost:3030` in browser github.com/spikebrehm/isomorphic-tutorial
    • Let’s add a feature.
    • Date formatting Before: After: Moment moment('2013-11-04T17:23:01.329Z').format('LLLL'); // "Monday, November 4 2013 9:23 AM"
    • Add Moment using NPM $ npm install moment --save
    • Create `formatDate` Handlebars helper Posted at {{created_at}} Posted at {{formatDate created_at}} function formatDate(dateStr) { return moment(dateStr).format('LLLL'); }
    • That wasn’t so hard. Let’s do another.
    • 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.
    • Moar features!
    • 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?
    • Towards an isomorphic future.
    • JavaScript is the lingua franca of the Web. The Web is the platform; JavaScript provides the runtime.
    • More reusable solutions; more small modules. It will be rare to see a web app using no server-side JavaScript.
    • The revolution will come in the build systems. Static analysis, conditional builds, source transforms.
    • Questions?
    • Thanks! @AirbnbNerds @spikebrehm