🇲🇦 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.

Transcript

1. مالس, React Africa! 👋 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE • NOVEMBER 29, 2024.
2. MATHEUS ALBUQUERQUE • @ythecombinator SPEED AT SCALE OPTIMIZING THE LARGEST CX PLATFORM OUT THERE
3. Matheus Albuquerque ↝ 👨💻 Staff SWE @ Medallia ↝ ⚡ Google Developer Expert ↝ 𝕏 ythecombinator
4. Preamble SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
5. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREAMBLE
6. […] “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
7. […] “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
8. This talk is not about… ↝ React 19, Svelte 5, Vue 3… ↝ ISG, SSR, Streaming SSR… ↝ Progressive/Selective/Partial Hydration… ↝ Islands Architecture, Resumability…
9. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREAMBLE
13. — MEDALLIA SURVEYS • MARIZ MELO
14. This talk is about… ↝ Modernizing Dependencies ↝ Code Splitting ↝ Preact ↝ Targeting Different Browsers
15. This talk is also about… ↝ Challenges in Legacy Codebases ↝ Experiences ↝ Our Radar ↝ Lessons Learned
16. Act I: Modernizing Dependencies SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
17. BEFORE…
18. WEBPACK 1 ↝ 5 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
19. WEBPACK 1 ↝ 5
20. WEBPACK 1 ↝ 5
21. ↝ 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
22. NODE 10 ↝ 16 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
23. NODE 10 ↝ 16
24. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / NODE
25. REACT 15 ↝ 16 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
26. REACT 15 ↝ 16
27. REACT 15 ↝ 16
28. REACT 15 㱺 16
29. ❌ REACT 15 㱺 16
30. REACT 15 㱺 16
31. ❌ REACT 15 㱺 16
32. REACT 15 ↝ 16
33. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT
34. #definition 🧐 Jscodeshift is a tool that runs a transformation script over one or more JavaScript or TypeScript files.
35. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT
36. REACT 15 ↝ 16
38. CODEGEN: OVERVIEW SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
39. 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
40. CODEGEN: BEFORE REPO / PACKAGES / A (CORE) B (FUNCTIONAL TESTS) …
41. CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B NEXT GENERATION (CONFIG + SCRIPTS)* NEXT GENERATION (CODE GENERATED) …
42. 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.
43. 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).
44. 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).
45. CODEGEN: AFTER
46. CODEGEN: TRANSFORMERS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
47. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / CODEGEN: TRANSFORMERS
48. CODEGEN: AST
49. 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
50. 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, }, ];
51. for (const item of transformGroups) { logger.info(`\n🛠 Appying the '${item.label}' transform`); await applyTransformer(item.transformerPath, item.pattern); } CODEGEN: RUNNING
52. WEBDRIVER 4 ↝ 7 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
53. WEBDRIVER 4 ↝ 7
54. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /
55. jscodeshift -t ./node_modules/@wdio/codemod/v6 ./wdio.conf.js jscodeshift -t ./node_modules/@wdio/codemod/v6 ./src/e2e/ *
56. WEBDRIVER 4 ↝ 7: GOTCHAS
57. WEBDRIVER 4 ↝ 7: GOTCHAS 🤔 🤔 🤔
58. WEBDRIVER 4 ↝ 7: GOTCHAS
60. Act II: Code Splitting SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
61. CODE SPLITTING — HTTPS://WWW.PATTERNS.DEV
62. CODE SPLITTING: REACT
63. CODE SPLITTING: RESULTS
64. CODE SPLITTING: RESULTS
65. #protip 💡 Dynamic imports are a great tool but, like all optimizations, they don’t come for free.
66. CODE SPLITTING: GOTCHAS
67. Act III: Preact SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
68. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREACT
69. PREACT 42.4KB (MIN+GZIP) 4KB (MIN+GZIP)
70. PREACT 205.9KB MIN + GZIP / NO POLYFILLS 175.26KB MIN + GZIP / NO POLYFILLS
71. PREACT: GOTCHAS
72. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREACT
73. Act IV: jQuery SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
74. JQUERY: OVERVIEW
75. JQUERY: OVERVIEW — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
76. JQUERY: ISSUES
77. JQUERY: DETECTING / BUILD-TIME
78. JQUERY: DETECTING / BUILD-TIME
79. JQUERY: DETECTING / BUILD-TIME
80. JQUERY: DETECTING / RUNTIME
81. JQUERY: DETECTING / RUNTIME
82. JQUERY: CONVERTING
83. Act V: Targeting Different Browsers SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
84. WHICH BROWSERS ARE VISITING OUR APP? SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS
85. POLYFILLING: CONCERNS
86. STRATEGIES SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS /
87. #1 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES polyfill.io
88. 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.
89. polyfill.io
90. #2 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES BABEL PRESET
91. ↝ 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
92. 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.
93. #3 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES DIFFERENTIAL SERVING
94. ↝ 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
95. <script nomodule src="/polyfills/full.min.js"></script> <script type="module" src="/polyfills/modern.min.js"></script> <script src="/bundle.min.js" defer></script> DIFFERENTIAL SERVING
96. 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.
97. #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
98. #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
99. #2 of 3 USER AGENT DETECTION — SMART BUNDLING • SHUBHAM KANODIA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES
100. #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
101. #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
102. SUMMING UP… POLYFILL.IO useBuiltIns module/nomodule POLYFILLING RAW module/nomodule USER AGENT DETECTION RUNTIME DETECTION SERVING
103. Results SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
104. PULL REQUESTS
105. UNIT TESTS
106. 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
107. 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
108. BROWSER LINE ↝ 0.2% INTERNET EXPLORER USAGE ↝ NO OTHER BROWSERS WILL DOWNLOAD THE LARGE BUNDLE
109. ↝ FCP: 6S FASTER ↝ SPEED INDEX: 3.5S FASTER ↝ LCP: 2.4S FASTER ↝ TTI: 2S FASTER CORE WEB VITALS ⬇
110. TIMINGS VISUALLY COMPLETE LAST VISUAL CHANGE LOAD TIME (ONLOAD) LOAD TIME (FULLY LOADED) DOM CONTENT LOADED FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST
111. VISUAL PROGRESS FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST
112. Our Radar SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
113. CULTURE + TOOLING
114. CULTURE + TOOLING
115. CULTURE + TOOLING
116. COMPRESSION
117. QUIC — A QUIC UPDATE ON GOOGLE’S EXPERIMENTAL TRANSPORT • CHROMIUM BLOG
118. Closing Thoughts SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /
119. #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.
120. COMPILERS & UI ENGINEERING
121. COMPILERS & UI ENGINEERING
122. COMPILERS & UI ENGINEERING
123. COMPILERS & UI ENGINEERING
124. #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
125. #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
126. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
127. #4 of 5 THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS
128. #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
129. THAT’S ALL, FOLKS! THANKS! 👋 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS!