JSConf US 2014: Building Isomorphic Apps
•
7 likes•5,360 views
Slides from Spike Brehm's talk at JSConf US 2014. Topics include the etymology of "Isomorphic JavaScript", examples is isomorphic apps in the wild, reasons behind the growing trend towards isomorphic apps, and how to build an isomorphic module using Browserify & NPM.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to JSConf US 2014: Building Isomorphic Apps
Similar to JSConf US 2014: Building Isomorphic Apps (20)
Recently uploaded
Recently uploaded (20)
JSConf US 2014: Building Isomorphic Apps
- 1. Building Isomorphic Apps Spike Brehm @spikebrehm
- 5. JavaScript code that can be shared between environments.
- 6. JavaScript code that can be shared between environments.
- 7. JavaScript code that can be shared between environments.
- 8. JavaScript code that can be shared between environments.
- 9. Backend Ruby Python Java PHP Node.js Persistence Client JavaScript Shared JavaScript DOM manipulation UX View layer Application logic Routing
- 11. adjective corresponding or similar in form and relations. i·so·mor·phic
- 17. Flickr
- 18. Flickr
- 19. ! Yahoo’s Modown libraries (successor to Mojito). Flickr
- 20. Instagram*
- 21. Instagram*
- 22. ! Facebook’s React library in a Django app. Instagram*
- 23. Airbnb Mobile
- 24. Airbnb Mobile
- 25. ! Airbnb’s Rendr library, built on Backbone and Express. Airbnb Mobile
- 26. Asana
- 27. ! Entire App runtime synced between client & server. Asana
- 28. Meteor
- 29. ! Realtime app framework. Meteor
- 30. Wy go to the trouble?
- 31. Initial pageload speed. Performance Crawlable single-page apps. SEO* Reduce code duplication. Maintainability Run code anywhere. Flexibility
- 33. • Templating • I18n • Date & currency formatting • Application logic • Routing • Model validation • API interaction • ...? Isomorphic use cases.
- 35. Entire view layer and app logic shared Small bits of view layer or logic shared
- 37. View layer shared Entire app runtime synced between client & server
- 38. Isomorphic JavaScript can be or shimmed per environment . environment- agnostic
- 39. Does not depend on browser-specific properties (window) or server-specific properties (process.env, req.cookies). Environment-agnostic
- 40. Example: Handlebars.js var template = ! '<ul>' ! '{{#each posts}}' ! ' <li>{{title}}</li>' ! '{{/each}}' ! '</ul>'! ;! ! var templateFn = Handlebars.compile(template)! , html = templateFn({posts: posts});
- 41. Provide shims for accessing environment-specific properties so module can expose a single API. window.location.pathname vs. req.path Shimmed per environment
- 42. Example: Superagent superagent! .get('/api/posts.json')! .end(function(res) {! if (res.status === 200) {! console.log("Posts:", res.body);! } else {! console.error("Error");! }! });
- 43. Abstractions.
- 44. Abstraction: User Agent Client navigator.userAgent Server req.get('user-agent')
- 45. Abstraction: Cookies Client document.cookie =! 'myCookie=1; Domain=.example.org'; Server res.setHeader(! 'Set-Cookie: myCookie=1; ' +! 'Domain=.example.org'! );
- 46. Abstraction: Redirects Client document.location.href = '/login';! ! window.pushState({}, '', '/login'); Server res.redirect('/login');
- 47. How to isomorph.
- 48. Let’s write a module that abstracts the setting of cookies, providing the same API for client & server.
- 50. setCookie('myCookie', 'the value'); document.cookie = 'myCookie=the%20value'; or res.setHeader('Set-Cookie: myCookie=the%20value;');
- 51. 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';
- 52. Eww, that looks hard.
- 54. NPM & Browserify to the rescue.
- 55. Browserify Use CommonJS to require() modules in the browser.
- 56. Browserify Package dependencies from node_modules into our bundle.
- 57. How do we make a shimmed-per- environment module? Utilize package.json “browser” field.
- 59. {! "name": "set-cookie",! "dependencies": {...},! "browser": "./lib/client.js"! }! ! ! Swap out the entire implementation.
- 60. {! "name": "set-cookie",! "dependencies": {...},! "browser": {! "./lib/node.js": "./lib/client.js"! }! }! Swap out specific files.
- 61. {! "name": "set-cookie",! "dependencies": {...},! "browser": {! "./lib/node.js": "./lib/client.js",! "cookie": "cookie-browser"! }! } Swap out dependencies.
- 63. Module structure .! "## index.js! "## lib! $ %## setter! $ "## index.js! $ %## client.js! "## node_modules! $ %## cookie
- 64. // ./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);! };
- 65. // ./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);! };
- 66. // ./lib/setter/client.js! ! module.exports = function setter(cookieStr) {! document.cookie = cookieStr;! };
- 67. // ./package.json! ! {! "name": "set-cookie",! "dependencies": {! "cookie": "^0.1.2"! },! "browser": {! "./lib/setter/index.js": "./lib/setter/client.js"! }! }
- 68. // ./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);! };
- 69. How to isomorph in a nutshell.
- 70. @spikebrehm @AirbnbNerds Thanks! More resources available at http://spike.technology
- 71. @spikebrehm @AirbnbNerds Thanks! More resources available at http://spike.technology We’re hiring!!!We’re hiring!!!We’re hiring!!!We’re hiring!!!We’re hiring!!!We’re hiring!!!