Upgrade to Pro — share decks privately, control downloads, hide ads and more …

๐Ÿ‡ฒ๐Ÿ‡ฆ React Africa 2024

๐Ÿ‡ฒ๐Ÿ‡ฆ React Africaย 2024

Speed at Scale: Optimizing The Largest CX Platform Out There

In a world with a wide variety of network connections, any user can have a slow experience, and apps that delight users on fast connections can barely be usable on slow ones.

In this session, I'll share my journey of gradually adapting how we deliver pages to better cater to our user's constraints on a platform with 15mi+ sessions per monthโ€”where simply rewriting everything from scratch is not an option.

With an eye on maintenance and scalability, we'll discuss legacy codebases, automation/code generation, polyfilling strategies, main thread offloading, and many other tips and tricks for large platforms targeting emerging markets.

Matheus Albuquerque

November 29, 2024
Tweet

More Decks by Matheus Albuquerque

Other Decks in Programming

Transcript

  1. Matheus Albuquerque โ† ๐Ÿ‘จ๐Ÿ’ป Staff SWE @ Medallia โ† โšก

    Google Developer Expert โ† ๐• ythecombinator
  2. [โ€ฆ] โ€œWhile browsing HackerNews, I sometimes get the feeling that

    every developer out there is working for FAANG, as there are always posts from those people doing some hyped stuff.โ€ [โ€ฆ] โ€”โ€‰The silent majority, by Vadim Kravcenko
  3. [โ€ฆ] โ€œBut letโ€™s be straight, thatโ€™s like 1% of all

    of the developers out there โ€” the rest of them are just lurking and coding with their language of choice and being content with it. Be it Fortran, COBOL, Perl, or PHP.โ€ [โ€ฆ] โ€”โ€‰The silent majority, by Vadim Kravcenko
  4. This talk is not aboutโ€ฆ โ† React 19, Svelte 5,

    Vue 3โ€ฆ โ† ISG, SSR, Streaming SSRโ€ฆ โ† Progressive/Selective/Partial Hydrationโ€ฆ โ† Islands Architecture, Resumabilityโ€ฆ
  5. This talk is also aboutโ€ฆ โ† Challenges in Legacy Codebases

    โ† Experiences โ† Our Radar โ† Lessons Learned
  6. WEBPACK 1 โ† 5 SPEED AT SCALE: OPTIMIZING THE LARGEST

    CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
  7. โ† MIGRATION IS ABOUT HAVING ALL THE PLUGINS AND LOADERS

    ON THEIR LATEST VERSIONS AND ENSURING THEY'RE COMPATIBLE WITH EACH OTHER. โ† V5 MIGRATION CAN'T BE DONE FROM V2/V3. THATโ€™S AN ENTIRELY DIFFERENT PROCESS. โ† NODE 10.13.0 IS THE MINIMUM REQUIREMENT FOR V5 BUT SOME PLUGINS/LOADERS REQUIRE HIGHER VERSIONS. WEBPACK 1 โ† 5: GOTCHAS
  8. NODE 10 โ† 16 SPEED AT SCALE: OPTIMIZING THE LARGEST

    CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
  9. REACT 15 โ† 16 SPEED AT SCALE: OPTIMIZING THE LARGEST

    CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
  10. #definition ๐Ÿง Jscodeshift is a tool that runs a transformation

    script over one or more JavaScript or TypeScript files.
  11. WE HAD TO SUPPORT, IN PARALLEL: โ† DIFFERENT VERSIONS OF

    DEVELOPER DEPENDENCIES (E.G. node.js, Webpack, Babel, ETC.) โ† DIFFERENT VERSIONS OF APPLICATION DEPENDENCIES (E.G. React ITSELF) โ† DIFFERENT STRATEGIES USED FOR BUNDLING AND SERVING CODEGEN: OVERVIEW
  12. CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B

    NEXT GENERATION (CONFIG + SCRIPTS)* NEXT GENERATION (CODE GENERATED) โ€ฆ
  13. CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B

    NEXT (CONFIG + SCRIPTS)* NEXT (CODE GENERATED) โ€ฆ โ† DEFAULT BUNDLE THATโ€™S SERVED. โ† ACTIVE DEVELOPMENT (IE. NEW FEATURES/FIXES) HAPPENS HERE. โ† THIS IS THE CODE THATโ€™S PUSHED TO THE REPO. โ† LEGACY DEPENDENCIES: REACT 15, WEBPACK 1, NODE 10, ETC.
  14. CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B

    NEXT (CONFIG + SCRIPTS)* NEXT (CODE GENERATED) โ€ฆ โ† HIDDEN BEHIND A FEATURE FLAG. โ† MODERN DEPENDENCIES: REACT 16, WEBPACK 5, NODE 18, ETC. โ† MOSTLY COMPOSED OF CODE TRANSFORMERS, AUTOMATION SCRIPTS, AND WEBPACK/BABEL CONFIG. โ† ALSO, PARTS OF THE CODE THAT CAN'T BE CODE GENERATED (IE. UNIT AND FUNCTIONAL TESTS).
  15. CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B

    NEXT (CONFIG + SCRIPTS)* NEXT (CODE GENERATED) โ€ฆ โ† GENERATED AT BUILD TIME (IE. CI/LOCALLY). โ† REACT COMPONENTS, UTILS, AND OTHER BUSINESS LOGIC. โ† THIS CODE IS NEVER PUSHED (1K+ LINES IN GITIGNORE FILE).
  16. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE

    / MODERNIZING DEPENDENCIES / CODEGEN: TRANSFORMERS
  17. export default function transformer(file: FileInfo, api: API) { const j

    = api.jscodeshift; const root = j(file.source); const variableDeclarators = root.findVariableDeclarators('foo'); variableDeclarators.renameTo('bar'); return root.toSource(); } CODEGEN: BASIC TRANSFORMER
  18. CODEGEN: TRANSFORMER GROUPS const transformGroups = [ { label: "PropTypes

    โ†’ prop-types", pattern: "./src/ * /.{js,jsx}", transformerPath: proptypes, }, { label: "legacy-testing/src/testUtils โ†’ ./utils/test", pattern: "./src/ * /.jsx", transformerPath: testUtils, }, { label: " * .scss โ†’ * .global.scss", pattern: "./src/ * /.jsx", transformerPath: cssGlobals, }, ];
  19. for (const item of transformGroups) { logger.info(`\n๐Ÿ›  Appying the '${item.label}'

    transform`); await applyTransformer(item.transformerPath, item.pattern); } CODEGEN: RUNNING
  20. WEBDRIVER 4 โ† 7 SPEED AT SCALE: OPTIMIZING THE LARGEST

    CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
  21. #protip ๐Ÿ’ก Dynamic imports are a great tool but, like

    all optimizations, they donโ€™t come for free.
  22. WHICH BROWSERS ARE VISITING OUR APP? SPEED AT SCALE: OPTIMIZING

    THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS
  23. #1 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX

    PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES polyfill.io
  24. polyfill.io โ† INSPECTS THE BROWSERโ€™S USER-AGENT AND SERVES A SCRIPT

    WITH POLYFILLS TARGETED AT THAT BROWSER. โ† SUPPORTS PICKING A SUBSET OF POLYFILLS (E.G. Map). โ† THE BROWSER WILL HAVE TO SPEND EXTRA 50-300 MS TO SETUP A CONNECTION. โ† SUBJECT TO polyfill.io OUTAGE.
  25. #2 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX

    PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES BABEL PRESET
  26. โ† NOT VERY USEFUL IF YOUโ€™RE TARGETING OLD BROWSERS (E.G.

    IE 11). โ† IT MIGHT REMOVE SOME POLYFILLS, BUT MOST OF THEM WILL STAY IN THE BUNDLE AND WOULD STILL BE DOWNLOADED BY EVERYONE. useBuiltIns: entry
  27. useBuiltIns: usage โ† IT DOESN'T ADD POLYFILLS FOR DEPENDENCIES* โ†

    YOU MIGHT GET RUNTIME ERRORS IN LEGACY BROWSERS โ† IT MIGHT ALSO ADD EXCESSIVE POLYFILLS, E.G. โ€ข Array.includes AND String.includes โ€ข Symbol.toStringTag, Math.toStringTag, ETC.
  28. #3 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX

    PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES DIFFERENTIAL SERVING
  29. โ† NO ES6 SUPPORT = WON'T LOAD type="module" SCRIPTS AND

    WILL LOAD nomodule ONES. โ† YOU CAN USE nomodule TO SERVE ES6 POLYFILLS TO BROWSERS THAT NEED THEM. DIFFERENTIAL SERVING
  30. SUMMING UPโ€ฆ โ† 1โƒฃ POLYFILL.IO: EASY AND DOESNโ€™T SHIP ANYTHING

    TO MODERN BROWSERS. MIGHT INCREMENT TTI AND FCP. โ† 2โƒฃ useBuiltIns: EASY TO SETUP BUT EITHER NOT VERY USEFUL FOR OLDER BROWSERS, OR REQUIRES YOU TO COMPILE node_modules AS WELL. โ† 3โƒฃ module/nomodule: EASY AND WIDE SUPPORT BUT ONLY STRIPS ES6โˆ’POLYFILLS.
  31. #1 of 3 RAW MODULE/NOMODULE โ€” WHAT IS DIFFERENTIAL SERVING?

    โ€ข JOHN STEWART SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
  32. #1 of 3 โ† DOWNLOADS BOTH BUNDLES AND EXECUTES BOTH

    BUNDLES. โ† DOWNLOADS BOTH BUNDLES. โ† DOWNLOADS LEGACY BUNDLE AND DOWNLOADS ESM BUNDLE TWICE. RAW MODULE/NOMODULE โ€” WHAT IS DIFFERENTIAL SERVING? โ€ข JOHN STEWART SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
  33. #2 of 3 USER AGENT DETECTION โ€” SMART BUNDLING โ€ข

    SHUBHAM KANODIA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
  34. #2 of 3 โ† YOU MIGHT NOT BE IN CONTROL

    OF THE SERVER. โ† IF YOU LOAD A MODERN SCRIPT WITHOUT THE MODULE ATTRIBUTE, YOU LOSE STREAM PARSING AND OFF MAIN THREAD COMPILATION. USER AGENT DETECTION SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
  35. #3 of 3 RUNTIME DETECTION <script> var script = document.createElement('script');

    var prefix = (!('noModule' in check)) ? "/ie11" : "/esm"; script.src = prefix + "/index.js"; document.head.appendChild(script); </script> SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
  36. BUNDLE FOOTPRINT หœ37% SMALLER BUNDLE FOOTPRINT ON MODERN BROWSERS: 279.15

    KB โ†’ 176.78 KB MODERN หœ25% SMALLER BUNDLE FOOTPRINT ON LEGACY BROWSERS 279.15 KB โ†’ 223.1 KB LEGACY
  37. BUNDLE FOOTPRINT BROWSERS THAT SUPPORT ES MODULES AND HAPPEN NOT

    TO NEED EXTRA POLYFILLS. AS OF SEPTEMBER 21, 2024, THESE REPRESENT 95.93% OF THE GLOBAL USAGE. MODERN BROWSERS THAT DONโ€™T FIT THE PREVIOUS CRITERIA. MOSTLY THOSE ARE PRE-2018 BROWSERS WITH INTERNET EXPLORER BEING THE HIGHLIGHT. LEGACY
  38. โ† FCP: 6S FASTER โ† SPEED INDEX: 3.5S FASTER โ†

    LCP: 2.4S FASTER โ† TTI: 2S FASTER CORE WEB VITALS โฌ‡
  39. TIMINGS VISUALLY COMPLETE LAST VISUAL CHANGE LOAD TIME (ONLOAD) LOAD

    TIME (FULLY LOADED) DOM CONTENT LOADED FEATURE FLAG ON FEATURE FLAG OFF โ€” WEBPAGETEST
  40. #1 of 5 SPEED AT SCALE: OPTIMIZING THE LARGEST CX

    PLATFORM OUT THERE / CLOSING THOUGHTS UNDERSTANDING INTERNALS HELPS US IMPLEMENT OUR OWN ABSTRACTIONS. E.G. THE JSCODESHIFT-BASED ARCHITECTURE UPGRADE & THE BABEL-BASED MIGRATION TOOLS.
  41. #2 of 5 YOU HAVE TO SHIP POLYFILLS TO ALL

    BROWSERS YOUR USERS MIGHT USEโ€ฆ . . . BUT IT'S A BAD IDEA TO SHIP ALL THEORETICALLY REQUIRED POLYFILLS TO ALL OF THEM! SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
  42. #3 of 5 DON'T TAKE FAST NETWORKS, CPUS AND RAM

    FOR GRANTED. TEST ON REAL PHONES AND NETWORKS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
  43. #4 of 5 THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE

    METRICS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
  44. #5 of 5 ALWAYS TRY TO CORRELATE BUSINESS METRICS WITH

    PERFORMANCE METRICS. THERE IS NO WAY TO GAME THESE BECAUSE THEY DEPEND ON THE BEHAVIOR OF REAL USERS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS