Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Isomorphic applications

Isomorphic applications

There is no such thing as separated client and server app in the isomorphic era, there are only environments (browser, server, IoT device etc.). One app is running on both client and server side: this the end of the SEO pain and code duplications.

Peter Marton

June 18, 2015
Tweet

More Decks by Peter Marton

Other Decks in Programming

Transcript

  1. Isomorphic Applications
    Peter Marton
    @slashdotpeter

    View full-size slide

  2. $ whoami
    - work: RisingStack, Inc.
    - twitter: slashdotpeter
    - email: [email protected]
    - blog: http://blog.risingstack.com

    View full-size slide

  3. Isomorphic JavaScript
    “JavaScript code that can be shared between
    environments.” - Spike Brehm

    View full-size slide

  4. function sum (a, b) { return a + b; }

    View full-size slide

  5. Why do we need to go isomorphic?

    View full-size slide

  6. SPA: Single Page Load Applications
    - single page load
    - pure data after first load -> fast UI
    - renders on client side
    - example: Backbone, AngularJS, etc.

    View full-size slide

  7. BUT
    (there is always a but)

    View full-size slide

  8. SPA Problems
    - SEO
    - code duplications: validation, routing...
    - performance
    - first load is heavy -> bandwidth
    - rendering (CPU intensive) -> drains mobile battery
    - legacy browser support

    View full-size slide

  9. Ideal world === ?

    View full-size slide

  10. What do we need
    - performance (rendering, initial load)
    - indexable sites -> SEO
    - progressive enhancements out of the box
    - server and client side rendering
    - eliminate code duplications

    View full-size slide

  11. Isomorphic app

    View full-size slide

  12. What can be common?

    View full-size slide

  13. One application

    View full-size slide

  14. One codebase

    View full-size slide

  15. same sh*t bug, everywhere ;)

    View full-size slide

  16. What can be shared?
    - from templates and small components
    - to the ~entire application
    - today I talk about entire apps

    View full-size slide

  17. Isomorphic JavaScript
    “JavaScript code that can be shared between
    environments.” - Spike Brehm

    View full-size slide

  18. Different environments
    IoT device node.js server mobile app browser

    View full-size slide

  19. Environments are different
    - different platforms: server, browser etc.
    - different features
    - different JavaScript engines
    - different inputs and outputs

    View full-size slide

  20. Example inputs
    - Temperature sensor
    - GPS
    - API response
    - Mouse click

    View full-size slide

  21. Example outputs
    - LED blink
    - Speaker
    - API request
    - DOM render

    View full-size slide

  22. Differences need to be shimmed
    - common interface
    - different implementation
    - example: Instead of file read -> API req, sensor read

    View full-size slide

  23. What is shim/polyfill?
    - application compatibility workaround

    View full-size slide

  24. Browser shim example
    ES5.1 Array.isArray()
    http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.3.2
    if (!Array.isArray) {
    Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg)
    === '[object Array]';
    };
    }

    View full-size slide

  25. Environment differences
    and/or different JS engines

    View full-size slide

  26. Node.js in a nutshell
    - platform with event-driven, non-blocking IO for building
    scalable network applications in JavaScript
    - JavaScript on server side
    - built with:
    - libuv + V8 + core modules

    View full-size slide

  27. Node.js: libuv
    - multi-platform
    - support library
    - asynchronous I/O
    - TCP, UDP, file system etc.

    View full-size slide

  28. V8 JavaScript Engine
    - C++
    - implements ECMAScript
    - used in Chrome and Node.js
    - by Google

    View full-size slide

  29. Core modules
    - useful functionality
    - implemented in JavaScript (most of them)
    - event, stream, util etc.

    View full-size slide

  30. Node.js: V8, libuv, core modules
    + core
    +

    View full-size slide

  31. Chrome: V8, blink (WebKit fork)
    +

    View full-size slide

  32. V8 is common
    others should be shimmed

    View full-size slide

  33. libuv feature shim
    - differences like: TCP socket read
    - doesn’t exist in browser
    - should be shimmed
    - TCP socket read -> data input -> HTTP request

    View full-size slide

  34. Node.js core module shim
    - implemented in JavaScript (stream, event…)
    - bundle and import
    - use in Browser with Browserify / Webpack
    - from NPM as well

    View full-size slide

  35. JavaScriptCore (iOS) in nutshell
    - Objective-C / Swift wrapper
    - around WebKit's JS engine
    - no more WebView
    - used by React Native

    View full-size slide

  36. JavaScriptCore (iOS) shim example
    - JavaScriptCore has limited feature set
    - no DOM and XHR for example
    - can be implemented in Objective-C / Swift
    - React Native polyfills: Network, Timers...

    View full-size slide

  37. DOM shim example
    - when there is no DOM -> (server: Node.js, JavaScriptCore)
    - DOM -> virtual DOM
    - React for example
    - server side rendering

    View full-size slide

  38. Isomorphic webapp

    View full-size slide

  39. Our goals
    - first render at the server (can be forced for others)
    - work as SPA after initial render
    - can render on both client and server side
    - ~one codebase
    - handover between client and server

    View full-size slide

  40. Isomorphic challenges
    - environment shims
    - able to create instances from your app
    - avoid sharing of personal data
    - technology in early phase

    View full-size slide

  41. What do we need?

    View full-size slide

  42. What do we need? 1/2
    - language that runs on both sides: JS ;)
    - bundle with Browserify/Webpack
    - modules that runs on both sides -> npm: superagent etc.
    - view engine that renders on both sides:
    - React,
    - VirtualDOM...

    View full-size slide

  43. What do we need? 2/2
    - share states: Serializable states (stores)
    - https://github.com/yahoo/serialize-javascript
    - continue at the client from where server left

    View full-size slide

  44. App is a function, state is a state
    myApp (state) {
    return {state.name};
    }
    - easy to serialize
    - app response for data
    - no side effects

    View full-size slide

  45. How does it work?

    View full-size slide

  46. Isomorphic codebase, lifecycle

    View full-size slide

  47. Isomorphic server side

    View full-size slide

  48. Isomorphic client side

    View full-size slide

  49. data-reactid

    View full-size slide

  50. Showcase 1/2
    brew-ui

    View full-size slide

  51. Isomorphic charts
    - charts can be isomorphic as well
    - with SVG yet
    - http://viget.com/extend/3474

    View full-size slide

  52. Showcase 2/2
    server rendered charts

    View full-size slide

  53. Q&A
    Thank you!
    http://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/

    View full-size slide