NodeSummit - Isomorphic and Reactive Applications

Slide 1

Slide 1 text

Isomorphic and Reactive Applications Peter Marton @slashdotpeter

Slide 2

Slide 2 text

Isomorphic and Reactive Applications Peter Marton @slashdotpeter

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

BUT (there is always a but)

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Ideal world

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Different environments - browser’s window: localStorage.getItem() - node specific: fs.readFile() - IoT device (~Tessel): myPin.read() - environment shims

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Isomorphic codebase, lifecycle

Slide 12

Slide 12 text

What do we need?

Slide 13

Slide 13 text

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...

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

How does it work?

Slide 16

Slide 16 text

Isomorphic server side

Slide 17

Slide 17 text

Isomorphic client side

Slide 18

Slide 18 text

data-reactid

Slide 19

Slide 19 text

Showcase brew-ui

Slide 20

Slide 20 text

Isomorphic challenges - data fetching: talk about this later - init app on both sides - singleton app on client -> request scoped on server

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Isomorphic architecture - should work on both sides - should be data oriented - flux can be good

Slide 23

Slide 23 text

Flux - unidirectional data-flow - reducing complexity / cross dependencies - helps avoiding side effects

Slide 24

Slide 24 text

Isomorphic Flux - share Store(s): serialize / deserialize - per request isolated Dispatcher and Store(s) - server rendering should wait initial data load

Slide 25

Slide 25 text

Reactive programming and Isomorphic - think in data and event streams - optimize rendering calls with immutability Omniscient, nuclear-js

Slide 26

Slide 26 text

Isomorphic packages - power of npm - envs. (browser) should be shimmed - check your published packages BE ISOMORPHIC!

Slide 27

Slide 27 text

I’m isomorphic: badge http://bit.ly/isomorphic-ready

Slide 28

Slide 28 text

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