In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps

50 %
50 %
Information about In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
Technology

Published on March 12, 2014

Author: spikebrehm

Source: slideshare.net

In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps Spike Brehm @spikebrehm

Spike Brehm Software Engineer @AirbnbNerds

Agenda

...TF is Isomorphic JavaScript? Wat ...is it relevant to web developers? Wy ...can I build isomorphic apps? How

WTF is Isomorphic JavaScript?

JavaScript code that can run on both the client and server.

A brief note on “isomorphic”.

“monomorphic” “heteromorphic” “homomorphic” “multi-platform” You’re using it wrong!

Isomorphic JavaScript can be or shimmed per environment . environment- agnostic

Does not depend on browser- specific properties (window) or server-specific properties (process.env, req.cookies). Environment-agnostic

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>

Provides shims for accessing environment-specific properties so module can expose a single API. window.location.pathname vs. req.path Shimmed per environment

Example: Superagent superagent! .post('/api/posts.json')! .send({ title: 'Moar JavaScript', body: '...' })! .end(function(response) {! if (response.status === 200) {! console.log("Success!");! } else {! console.error("Error", response.body.error);! }! });

Isomorphic use cases.

• Templating • Routing • I18n • Date & currency formatting • Model validation • API interaction • ...? Isomorphic use cases.

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?

Initial pageload speed. Performance Crawlable single-page apps. SEO Reduce code duplication. Maintainability Run code where you want. Flexibility

Ye olde days: fat-server, thin- client.

Client JavaScript Server Ruby Python Java PHP Persistence View layer Application logic Routing DOM manipulation Animations

Circa 2011: thin-server, fat- client.

Routing View layer Server Ruby Python Java PHP Persistence Client JavaScript Application logic DOM manipulation Animations

Teh footure: shared, fat-server, fat-client.

Server Ruby Python Java PHP Persistence Client JavaScript Routing View layer Application logic Shared JavaScript DOM manipulation Animations

Isomorphic JavaScript is a spectrum.

Entire view layer and app logic shared Small bits of view layer or logic shared

Many abstractions Few abstractions

ComplexSimple

View layer shared Entire app runtime synced between client & server

How to Isomorphic.

The magic happens in the build process. Browserify & Grunt

Browserify Use require() in the browser, the same way you would on the server. Package up CommonJS modules for the browser.

Browserify demo ! github.com/ spikebrehm/isomorphic-examples

Task runner for automating build and development workflow. Grunt

Grunt demo ! github.com/ spikebrehm/isomorphic-examples

Wat about shimmed per environment?

How does Superagent do it? Use package.json’s “browser” field "browser": { "./lib/node/index.js": “./lib/client.js", "emitter": "emitter-component", "reduce": "reduce-component" }, “browser”: STRING || OBJECT, “browser": "./lib/client.js",

Isomorphic frameworks.

Mojito Yahoo!; Full-stack; Never caught on. Meteor Realtime; Full-stack; Awesome. No server-side rendering (yet). Rendr Airbnb; Library; Backbone & Handlebars. Came from m.airbnb.com.

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?

@AirbnbNerds @spikebrehm Thanks!

Add a comment

Related presentations

Related pages

In Pursuit of the Holy Grail: Building Isomorphic ...

In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps. ... Description: Watch the webcast in ... In our experience building isomorphic ...
Read more

In Pursuit of the Holy Grail: Building Isomorphic ...

In Pursuit of the Holy Grail: Building Isomorphic JavaScript ... Isomorphic JavaScript: The Holy Grail. ... building isomorphic JavaScript apps at ...
Read more

Pursuing the Holy Grail: Building Isomorphic JavaScript ...

Pursuing the Holy Grail: Building Isomorphic JavaScript Apps ... - Isomorphic JavaScript: The Holy Grail ... Building Isomorphic Apps ...
Read more

In Pursuit of the Holy Grail: Building Isomorphic ...

In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps Spike Brehm @spikebrehm ; Spike Brehm Software Engineer @AirbnbNerds
Read more

In Pursuit of the Holy Grail: Building Isomorphic ...

In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps - Spike Brehm by O'Reilly Media, Inc. While the client-side JavaScript app approach can ...
Read more

46 In Pursuit Of The Holy Grail Building Isomorphic Java ...

46 in pursuit of the holy grail building isomorphic java script apps spike brehm direct shared ... Ancient Voices 05of11 In Pursuit Of The Holy Grail DivX ...
Read more

Building Isomorphic JavaScript Apps - O'Reilly Media

Isomorphic JavaScript, often described as the holy grail of web ... Building Isomorphic JavaScript Apps: ... to building some Isomorphic Javascript ...
Read more

Everything Else at Fluent Conf - Theoretical Ideations

Subscribe Everything Else at Fluent Conf 18 March 2014 In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps Spike Brehm, @spikebrehm
Read more