The Frontend Dichotomy React & GraphQL to rescue Sibelius Seraphini

Sibelius Seraphini @sibelius @sseraphini 2

Frontend Dichotomy 3 - prerender and prefetch everything that user will use - defer render and fetches what user won’t use right now

React Time Slicing 4 - React doesn't block the thread while rendering - Feel synchronous if device is fast - Feel responsive if device is slow - Only the final rendered state is displayed - Same declarative component model

React Suspense 5 - Pause any state update until the data is ready - Add async data to any component without "plumbing" - On a fast network, render after the whole tree is ready - On a slow network, precisely control the loading states

React - Async Rendering 6 - Time slicing + Suspense - Adapt to user's device and network - Fast interactions feels instant - Slower interactions feels responsive

Prerender 7 - prerender on server (SSR) - prerender time slicing - cache render (SSR Rapscallion)

Prerender Time Slicing 8

Prefetch 9 - prefetch on server (SSR) - prefetch before mounting a component - cache resources - service worker - suspense / react-cache - prefetch next page on click hover

Prefetch - Service Worker 10

Prefetch - Service Worker 11

Prefetch - Suspense 12

Defer 13 to delay something until a later time; to postpone

Defer Render 14 - defer render on server (SSR) - defer code loading (code split) - defer media queries to client side (suspend) - defer work to improve animations

Code splitting 15

Code splitting 16 - React.lazy (Suspense) - code split per route - code split modals - code split large modules - preload based on heuristics (visibility?)

Defer Media Queries 17 - Server renders loading where media queries(width/height) is needed - Client render using media queries - React Suspense makes this work well.

Defer Work for Animations 18 - InteractionManager.runAfterInteractio ns (React Native) - requestAnimationFrame - requestIdleCallback

Defer Fetch 19 - only ask for data needed now - lazy loading following data

Fetch Strategies 20 - cache only - network only - cache falling back to network - network falling back to cache - cache then network

Defer on GraphQL 21 - Deferrable Queries - @relay(defer: true) - @defer from Apollo

Deferrable Queries - Relay Modern 22

Deferrable Queries - Relay Modern 23 - @relay(defer: true) modifies generated queries - Multiples requests/fetches to GraphQL server - Resolves data using Observable

@defer - Apollo 24

@defer - Apollo 25 - @defer - Single request to GraphQL server - Stream patches using multipart over HTTP - Uses a modified version of GraphQL Execution on server to resolve the patches

Defer on GraphQL - WIP 26 - Still too bleeding edge - Deferrable Queries was removed this week from Relay master - @defer is still on a pull request

Resources 27 - https://twitter.com/sseraphini/status/1028083096179146754 - https://medium.com/@taion/react-routing-and-data-fetching-ec 519428135c - https://twitter.com/jimmy_jia/status/795793590328950785 - https://twitter.com/dan_abramov/status/103628003272395571 3 - https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-1 6.html

Resources 28 - https://medium.com/@reactcomponentcaching/speedier-server -side-rendering-in-react-16-with-component-caching-e8aa6779 29b1 - https://github.com/FormidableLabs/rapscallion - https://developers.google.com/web/ilt/pwa/caching-files-with-s ervice-worker - https://twitter.com/calebmer/status/1051873128048078848 - https://mobile.twitter.com/olivtassinari/status/10515318042876 02690

Resources 29 - https://medium.com/entria/relay-modern-network-deep-dive-ec 187629dfd3 - https://github.com/jamiebuilds/react-loadable - https://github.com/stratiformltd/react-loadable-visibility - https://github.com/facebook/react/pull/13398 - https://github.com/facebook/relay/issues/2194 - https://blog.apollographql.com/introducing-defer-in-apollo-serv er-f6797c4e9d6e - https://github.com/kriskowal/gtor

Resources 30 - https://github.com/relay-tools/fetch-multipart-graphql - https://developers.google.com/web/updates/2015/08/using-req uestidlecallback - https://facebook.github.io/react-native/docs/interactionmanager - https://medium.com/@jonatan_salas/a-walk-through-react-exp erimental-features-562baeb8a63a - https://github.com/acdlite/react-fiber-architecture - https://www.facebook.com/pg/react/videos/

How can we solve this dichotomy? Sibelius