Universal React + Flux at Scale!

Slide 1

Slide 1 text

Universal React + Flux at SCALE! Rajiv Tirumalareddy

Slide 2

Slide 2 text

Frameworks Team Michael Ridgway Seth Bertalotto Rajiv Tirumalareddy Kaeson Ho Lingyan Zhu me Eric Ferraiuolo

Slide 3

Slide 3 text

h>p://ﬂuxible.io Fluxible

Slide 4

Slide 4 text

Client YUI MVC Server CommonJS Node Express MVC

Slide 5

Slide 5 text

Client YUI MVC Server CommonJS Node Express MVC

Slide 6

Slide 6 text

Flux Ac#on Dispatcher Store View Ac#on

Slide 7

Slide 7 text

View Flux on the Server A B ? ? Ac#on Dispatcher Store Ac#on

Slide 8

Slide 8 text

Flux on the Server https://github.com/yahoo/fluxible/blob/master/docs/guides/bringing-flux-to-the-server.md Ac#on Dispatcher Store View Dispatcher Store View A B A B

Slide 9

Slide 9 text

Ac#on Dispatcher Store View SERVER HTML JS/CSS Dehydrated Flux State (JSON) Store View BROWSER Universal Flux A

Slide 10

Slide 10 text

Ac#on Dispatcher Store View SERVER HTML JS/CSS Dehydrated Flux State (JSON) Ac#on Dispatcher Store View Ac#on BROWSER Universal Flux A

Slide 11

Slide 11 text

Client YUI MVC Server CommonJS Node Express MVC

Slide 12

Slide 12 text

Client Polyfills Webpack Server Node Express Atomic CSS

Slide 13

Slide 13 text

Express Middleware Fluxible Plugins

Slide 14

Slide 14 text

What is Scale?

Slide 15

Slide 15 text

Development

Slide 16

Slide 16 text

Developer ProducRvity ESLint

Slide 17

Slide 17 text

Product

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Context

Slide 22

Slide 22 text

Devices

Slide 23

Slide 23 text

AuthenRcaRon

Slide 24

Slide 24 text

Browsers

Slide 25

Slide 25 text

Money Problems Context

Slide 26

Slide 26 text

if (device === 'smartphone') { return ; } else if (...){ //... }

Slide 27

Slide 27 text

How can we serve the minimal resources for the best user experience?

Slide 28

Slide 28 text

Dynamic Page ComposiRon Layouts Components Data Assets

Slide 29

Slide 29 text

Flexible Layouts f(x) A B C D A B C D A B C D

Slide 30

Slide 30 text

Reusable Components A A A A A A A A A A A A A A

Slide 31

Slide 31 text

Data Fetching Ac#on Dispatcher Store View Ac#on Fetchr REST APIs Ac#on

Slide 32

Slide 32 text

IniRal Data Problem Ac#on Dispatcher Store ? View

Slide 33

Slide 33 text

Ini#al Ac#on IniRal Data SoluRon Ac#on Dispatcher Store View Statically Declared

Slide 34

Slide 34 text

Ar#cle Ac#on IniRal Data Example Navigate Ac#on Dispatcher Store /ar#cle/8 Ar#cle View Fetchr Ar#cle API

Slide 35

Slide 35 text

CreaRng Reusable Bundles > npm publish Components Stores AcRon Creators Data Services CSS

Slide 36

Slide 36 text

Using Bundles > npm install

Slide 37

Slide 37 text

Asset Loading user A B C D E A B C D E BROWSER SERVER

Slide 38

Slide 38 text

Smart Asset Loading user A B C D E A B C D E scroll click BROWSER SERVER

Slide 39

Slide 39 text

How can we serve the minimal resources for the best user experience?

Slide 40

Slide 40 text

Minimal Resources •  Flexible layouts •  Reusable components •  StaRcally declared data •  Smart bundle loading BeIer User Experience •  Faster page loads •  Smaller k-‐weight •  Fewer cacheable requests

Slide 41

Slide 41 text

What next?

Slide 42

Slide 42 text

Web Server TTFB applicaRon data render rouRng assets GET /myapp end flush

Slide 43

Slide 43 text

TTFB applicaRon data render Web Server rouRng assets GET /myapp end flush flush flush

Slide 44

Slide 44 text

Progressive Rendering 100% Server 100% Client Preload Fetch Data Render Example Use Case 100% Server server server CriRcal modules above the fold Preload server client Immediately below the fold 100% Client client client Far-‐bo>om or invoked by user acRon

Slide 45

Slide 45 text

The Bad Parts •  Checksum – One small error, throws away all markup – MulRple render trees •  iframes – Reloaded on re-‐render – Move outside container and move back

Slide 46

Slide 46 text

Thank You! @rajivontherocks vijar