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

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