The Frontend Dichotomy

The Frontend Dichotomy

The Frontend Dichotomy: prerender and prefetch everything that user will use, and also defer render and fetches that user won’t use right now

4f821cc50056b266277a2156593eb96c?s=128

Sibelius Seraphini

October 20, 2018
Tweet

Transcript

  1. The Frontend Dichotomy React & GraphQL to rescue Sibelius Seraphini

  2. Sibelius Seraphini @sibelius @sseraphini 2

  3. Frontend Dichotomy 3 - prerender and prefetch everything that user

    will use - defer render and fetches what user won’t use right now
  4. 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
  5. 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
  6. React - Async Rendering 6 - Time slicing + Suspense

    - Adapt to user's device and network - Fast interactions feels instant - Slower interactions feels responsive
  7. Prerender 7 - prerender on server (SSR) - prerender time

    slicing - cache render (SSR Rapscallion)
  8. Prerender Time Slicing 8

  9. Prefetch 9 - prefetch on server (SSR) - prefetch before

    mounting a component - cache resources - service worker - suspense / react-cache - prefetch next page on click hover
  10. Prefetch - Service Worker 10

  11. Prefetch - Service Worker 11

  12. Prefetch - Suspense 12

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

    postpone
  14. 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
  15. Code splitting 15

  16. Code splitting 16 - React.lazy (Suspense) - code split per

    route - code split modals - code split large modules - preload based on heuristics (visibility?)
  17. 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.
  18. Defer Work for Animations 18 - InteractionManager.runAfterInteractio ns (React Native)

    - requestAnimationFrame - requestIdleCallback
  19. Defer Fetch 19 - only ask for data needed now

    - lazy loading following data
  20. Fetch Strategies 20 - cache only - network only -

    cache falling back to network - network falling back to cache - cache then network
  21. Defer on GraphQL 21 - Deferrable Queries - @relay(defer: true)

    - @defer from Apollo
  22. Deferrable Queries - Relay Modern 22

  23. Deferrable Queries - Relay Modern 23 - @relay(defer: true) modifies

    generated queries - Multiples requests/fetches to GraphQL server - Resolves data using Observable
  24. @defer - Apollo 24

  25. @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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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/
  31. How can we solve this dichotomy? Sibelius