Building Isomorphic Apps (JSConf.Asia 2014)
45 likes9,468 views
The document discusses isomorphic JavaScript, which allows code to be shared between client and server environments to enhance performance, SEO, and maintainability. It covers the benefits, use cases, and examples of isomorphic apps, including frameworks and libraries like React and Meteor, as well as practical implementation strategies. A specific focus is placed on environment agnosticism and abstraction for better code management across different platforms.
Building Isomorphic Apps (JSConf.Asia 2014)
- 1. Building Isomorphic Apps @spikebrehm
- 2. Spike Brehm ____________________________ @spikebrehm @AirbnbNerds
- 3. 1. Why Isomorphic JavaScript 2. Isomorphic in the Wild 3. How to Isomorph
- 5. What is Isomorphic JavaScript?
- 6. JavaScript code that can be shared between environments.
- 9. Persistence Client DOM manipulation UX JavaScript View layer Application logic Routing Backend Ruby Python Java PHP Ye Olde Web App
- 10. Backend Ruby Python Java PHP Fat-Client, circa 2011 Persistence Client DOM manipulation UX JavaScript View layer Application logic Routing
- 11. DOM manipulation UX Persistence Client JavaScript Shared JavaScript View layer Application logic Routing Backend Ruby Python Java PHP Isomorphic, circa 2013
- 13. DOM manipulation UX Persistence Client JavaScript Shared JavaScript View layer Application logic Routing Backend Ruby Python Java PHP Isomorphic, circa 2013
- 14. View layer
- 15. Markup Data presentation I18n Date, Currency formatting URL formatting
- 16. Isomorphic Use Cases 1. “Single Page Apps” that can be fully rendered on the server. 2. Ambitious apps that share logic between client & server to accomplish novel things.
- 17. Why go to the trouble?
- 18. Performance Initial pageload speed. SEO* Crawlable single-page apps. Flexibility Run code anywhere. Maintainability Reduce code duplication.
- 19. Performance
- 20. Client-rendered app Download skeleton HTML User sees content Download JavaScript Fetch data from API Evaluate JavaScript Exacerbated on mobile: high latency, low bandwidth
- 21. Server-rendered app Download full HTML Download JavaScript User sees content Evaluate JavaScript
- 22. Isomorphic JavaScript in the Wild
- 23. Flickr ! Yahoo’s Modown libraries (successor to Mojito).
- 24. Instagram* ! Facebook’s React library in a Django app.
- 25. Airbnb Mobile Web ! Airbnb’s Rendr library, built on Backbone and Express.
- 26. Asana ! Entire App runtime synced between client & server.
- 27. Meteor ! Realtime app framework.
- 28. Isomorphic JavaScript is a spectrum
- 29. Entire view layer and app logic shared Small bits of view layer or logic shared
- 30. Many abstractions Few abstractions
- 31. How to Isomorph
- 32. Isomorphic JavaScript can be environment agnostic or shimmed per environment.
- 33. Environment agnostic Does not depend on browser-specific properties (window) or server-specific properties (process.env, req.cookies).
- 34. E X A M P L E Handlebars.js var template = ! '<ul>' ! '{{#each posts}}' ! ' <li>{{title}}</li>' ! '{{/each}}' ! '</ul>';! ! var templateFn = Handlebars.compile(template);! var html = templateFn({posts: posts});
- 35. Shimmed per environment Provide shims for accessing environment-specific properties so module can expose a single API. window.location.pathname vs req.path
- 36. E X A M P L E Superagent superagent! .get('/api/posts.json')! .end(function(res) {! console.log(res.status, res.body, res.headers);! });
- 37. Abstractions
- 38. A B S T R ACT I O N Cookies Client document.cookie =! 'myCookie=1; Domain=.example.org'; Server res.setHeader(! 'Set-Cookie: myCookie=1; ' +! 'Domain=.example.org'! );
- 39. A B S T R ACT I O N Redirects Client document.location.href = '/login';! ! window.pushState({}, '', '/login'); Server res.redirect('/login');
- 40. H AC K T I M E Let’s write a module that abstracts the setting of cookies, providing the same API for client & server.
- 41. H AC K T I M E setCookie('myCookie', 'the value'); document.cookie = 'myCookie=the%20value'; or res.setHeader('Set-Cookie: myCookie=the%20value;');
- 42. H AC K T I M E setCookie('myCookie', 'the value', {! path: '/',! domain: '.example.org',! expires: new Date(2014, 12, 31)! }); document.cookie =! 'myCookie=the%20value; Domain=.example.org; ' +! 'Path=/; Expires=Sat, 31 Jan 2015 05:00:00 GMT';
- 43. That looks kinda hard…
- 45. NPM & Browserify* to the rescue
- 46. Browserify* Use CommonJS to require() modules in the browser.
- 47. Browserify* Package dependencies from node_modules into our bundle.
- 48. *or Webpack. Webpack is like Browserify, but with more bells-and- whistles included by default. Used by Instagram, Facebook, Yahoo!.
- 49. H AC K T I M E Caveat: It’s Different on the Server app.use(function(req, res, next) {! ...! ! next();! }); ! setCookie('myCookie', 'the value', {res: res});! ! ! !
- 50. How do we make a shimmed-per-environment module? Utilize package.json’s “browser” field.
- 51. {! "name": "set-cookie",! "dependencies": {...}! }! ! ! !
- 52. {! "name": "set-cookie",! "dependencies": {...},! "browser": "./lib/client.js"! }! ! ! Swap out the entire implementation.
- 53. {! "name": "set-cookie",! "dependencies": {...},! "browser": {! "./lib/node.js": "./lib/client.js"! }! }! Swap out specific files.
- 54. {! "name": "set-cookie",! "dependencies": {...},! "browser": {! "./lib/node.js": "./lib/client.js",! "cookie": "cookie-browser"! }! } Swap out dependencies.
- 55. Let’s build `set-cookie`. https://github.com/spikebrehm/set-cookie
- 56. Module structure .! "## index.js! "## lib! $ %## setter! $ "## index.js! $ %## client.js! "## node_modules! $ %## cookie
- 57. // ./index.js! ! var cookie = require('cookie');! var setter = require('./lib/setter');! ! module.exports = function(name, value, options) {! var cookieStr = cookie.serialize(name, value, options);! setter(cookieStr, options);! };
- 58. // ./lib/setter/index.js! ! module.exports = function setter(cookieStr, options) {! var res = options && options.res;! ! if (!res)! throw new Error('Must specify `res` ' +! 'when setting cookie.’);! ! res.setHeader('Set-Cookie', cookieStr);! };
- 59. // ./lib/setter/client.js! ! module.exports = function setter(cookieStr) {! document.cookie = cookieStr;! };
- 60. // ./package.json! ! {! "name": "set-cookie",! "dependencies": {! "cookie": "^0.1.2"! },! "browser": {! "./lib/setter/index.js": "./lib/setter/client.js"! }! }
- 61. // ./index.js! ! var cookie = require('cookie');! var setter = require('./lib/setter');! ! module.exports = function(name, value, options) {! var cookieStr = cookie.serialize(name, value, options);! setter(cookieStr, options);! };
- 62. Projects of Note
- 63. React Reactive UI component library from Facebook. Designed from the ground up to support isomorphic rendering. http://facebook.github.io/react/ var UserProfile = React.createClass({ render: function() { return <div> <img src={this.props.user.thumbnailUrl} /> <h3>{this.props.user.name}</h3> </div>; } }); React.render(<UserProfile user={user} />, mountNode);
- 64. React Reactive UI component library from Facebook. Designed from the ground up to support isomorphic rendering. http://facebook.github.io/react/ var UserProfile = React.createClass({ render: function() { return <div> <img src={this.props.user.thumbnailUrl} /> <h3>{this.props.user.name}</h3> </div>; } }); React.render(<UserProfile user={user} />, mountNode);
- 65. React Reactive UI component library from Facebook. Designed from the ground up to support isomorphic rendering. http://facebook.github.io/react/ var UserProfile = React.createClass({ render: function() { return <div> <img src={this.props.user.thumbnailUrl} /> <h3>{this.props.user.name}</h3> </div>; } }); var html = React.renderToString(<UserProfile user={user} />);
- 66. Fluxible Yahoo’s isomorphic Flux implementation: Dispatchr, Fetchr, Routr. Provides a way to “dehydrate” server state and “rehydrate” on client. https://github.com/yahoo/flux-examples
- 67. Isobuild Meteor’s build system for isomorphic apps. Like Browserify & Webpack, uses static analysis to compute dependencies. Can target client, server, Android, or iOS. https://www.meteor.com/isobuild if (Meteor.isClient) { // counter starts at 0 Session.setDefault("counter", 0); Template.hello.events({ 'click button': function () { // increment the counter when button is clicked Session.set("counter", Session.get("counter") + 1); } }); } if (Meteor.isServer) { Meteor.startup(function () { // code to run on server at startup }); }
- 68. Isobuild Meteor’s build system for isomorphic apps. Like Browserify & Webpack, uses static analysis to compute dependencies. Can target client, server, Android, or iOS. https://www.meteor.com/isobuild if (Meteor.isClient) { // counter starts at 0 Session.setDefault("counter", 0); Template.hello.events({ 'click button': function () { // increment the counter when button is clicked Session.set("counter", Session.get("counter") + 1); } }); } if (Meteor.isServer) { Meteor.startup(function () { // code to run on server at startup }); }
- 69. isomorphic-tutorial Small sample isomorphic app, written from scratch using Handlebars/ React, Director (routing), and Superagent (API requests). https://github.com/spikebrehm/isomorphic-tutorial // app/routes.js var apiClient = require('./api_client'); module.exports = function(match) { match('/posts', function(callback) { apiClient.get('/posts.json', function(err, res) { if (err) return callback(err); var posts = res.body; callback(null, 'posts', {posts: posts}); }); }); };
- 70. isomorphic-tutorial Small sample isomorphic app, written from scratch using Handlebars/ React, Director (routing), and Superagent (API requests). https://github.com/spikebrehm/isomorphic-tutorial <h1>Posts</h1> <ul> {{#each posts}} <li><a href="/posts/{{id}}">{{title}}</a></li> {{/each}} </ul>
- 71. Thanks! More resources available at http://spike.technology ! @spikebrehm @AirbnbNerds