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

NodeSummit - Isomorphic and Reactive Applications

NodeSummit - Isomorphic and Reactive 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

February 10, 2015

More Decks by Peter Marton

Other Decks in Technology


  1. SPA: Single Page Load Applications - single page load -

    pure data after first load -> fast UI - renders on client side - example: Backbone, AngularJS, Ember, etc.
  2. SPA Problems - SEO - code duplications: validation, routing... -

    performance - first load is heavy -> bandwidth - rendering -> drains mobile battery - legacy browser support
  3. What can be shared? - from templates and small components

    - to the ~entire application - today I talk about entire apps
  4. 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...
  5. 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
  6. Isomorphic challenges - data fetching: talk about this later -

    init app on both sides - singleton app on client -> request scoped on server
  7. Data fetching problem - environment specific problems - should be

    shimmed - same functionality and interface - different implementation: AJAX / WS / DB call / micro-service / .. - “Full Stack Flux” - Pete Hunt: React.js Conf 2015 - Full Stack Flux
  8. Isomorphic Flux - share Store(s): serialize / deserialize - per

    request isolated Dispatcher and Store(s) - server rendering should wait initial data load
  9. Reactive programming and Isomorphic - think in data and event

    streams - optimize rendering calls with immutability Omniscient, nuclear-js
  10. Isomorphic packages - power of npm - envs. (browser) should

    be shimmed - check your published packages BE ISOMORPHIC!