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

🇵🇹 JNation 2024

🇵🇹 JNation 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

June 04, 2024
Tweet

More Decks by Matheus Albuquerque

Other Decks in Programming

Transcript

  1. Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Sr. SWE @

    Medallia ↝ ⚛ PC @ React Su m m it NYC ↝ ⚡ Google Developer Expert
  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 about… ↝ Modernizing Dependencies ↝ Code Splitting

    ↝ Preact ↝ Targeting Different Browsers
  6. This talk is also about… ↝ Challenges in Legacy Codebases

    ↝ Experiences ↝ Our Radar ↝ Lessons Learned
  7. WEBPACK 1 ↝ 5 SPEED AT SCALE: OPTIMIZING THE LARGEST

    CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
  8. ↝ 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
  9. NODE 10 ↝ 16 SPEED AT SCALE: OPTIMIZING THE LARGEST

    CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
  10. REACT 15 ↝ 16 SPEED AT SCALE: OPTIMIZING THE LARGEST

    CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
  11. #definition 🧐 Jscodeshift is a tool that runs a transformation

    script over one or more JavaScript or TypeScript files.
  12. 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
  13. CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B

    NEXT GENERATION (CONFIG + SCRIPTS)* NEXT GENERATION (CODE GENERATED) …
  14. 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.
  15. CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B

    NEXT (CONFIG + SCRIPTS)* NEXT (CODE GENERATED) … ↝ HIDDEN BEHIND A FEATURE FLAG. ↝ MODERNIZING 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).
  16. 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).
  17. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE

    / MODERNIZING DEPENDENCIES / CODEGEN: TRANSFORMERS
  18. 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
  19. 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, }, ];
  20. for (const item of transformGroups) { logger.info(`\n🛠 Appying the '${item.label}'

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

    CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
  22. #protip 💡 Dynamic imports are a great tool but, like

    all optimizations, they don’t come for free.
  23. WHICH BROWSERS ARE VISITING OUR APP? SPEED AT SCALE: OPTIMIZING

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

    PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES polyfill.io
  25. 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.
  26. #2 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX

    PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES BABEL PRESET
  27. ↝ 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
  28. 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.
  29. #3 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX

    PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES DIFFERENTIAL SERVING
  30. ↝ 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
  31. 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.
  32. #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
  33. #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
  34. #2 of 3 USER AGENT DETECTION — SMART BUNDLING •

    SHUBHAM KANODIA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
  35. #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
  36. #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
  37. 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
  38. BUNDLE FOOTPRINT BROWSERS THAT SUPPORT ES MODULES AND HAPPEN NOT

    TO NEED EXTRA POLYFILLS. AS OF JUNE 2, 2024, THESE REPRESENT 96.88% 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
  39. ↝ FCP: 6S FASTER ↝ SPEED INDEX: 3.5S FASTER ↝

    LCP: 2.4S FASTER ↝ TTI: 2S FASTER CORE WEB VITALS ⬇
  40. TIMINGS VISUALLY COMPLETE LAST VISUAL CHANGE LOAD TIME (ONLOAD) LOAD

    TIME (FULLY LOADED) DOM CONTENT LOADED FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST
  41. #1 of 4 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 TOOL.
  42. #2 of 4 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
  43. #3 of 4 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
  44. #4 of 4 THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE

    METRICS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS