🇬🇧 QCon London 2025

Slide 1

Slide 1 text

Hello, London! 👋 🇬🇧 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE • APRIL 9, 2025.

Slide 2

Slide 2 text

MATHEUS ALBUQUERQUE • @ythecombinator SPEED AT SCALE OPTIMIZING THE LARGEST CX PLATFORM OUT THERE

Slide 3

Slide 3 text

Matheus Albuquerque ↝ 👨💻 Staff SWE @ Medallia ↝ ⚡ Google Developer Expert ↝ ⚛ Chair @ React Su m m it NYC ↝ 𝕏 ythecombinator

Slide 4

Slide 4 text

#question 🤔 Who here works with front-end? And React? SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 5

Slide 5 text

Preamble SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 6

Slide 6 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREAMBLE

Slide 7

Slide 7 text

[…] “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 stu f . Or you might think that PHP is never used nowadays because whenever it’s mentioned, everyone is hating on it in the comments.” […] — The silent majority • Vadim Kravcenko, 2022

Slide 8

Slide 8 text

[…] “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 • Vadim Kravcenko, 2022

Slide 9

Slide 9 text

This talk is not about… ↝ React 19, Svelte 5, Vue 3… ↝ ISG, SSR, Streaming SSR… ↝ Progressive/Selective/Partial Hydration… ↝ Islands Architecture, Resumability…

Slide 10

Slide 10 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREAMBLE

Slide 11

Slide 11 text

— VAN OKTORP (INSP) • GOOGLE I/O 2018

Slide 12

Slide 12 text

— VAN OKTORP (INSP) • GOOGLE I/O 2018

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

— MEDALLIA SURVEYS • MARIZ MELO

Slide 15

Slide 15 text

This talk is about… ↝ Modernizing Dependencies ↝ Code Splitting ↝ Preact ↝ Targeting Different Browsers

Slide 16

Slide 16 text

This talk is also about… ↝ Challenges in Legacy Codebases ↝ Experiences ↝ Our Radar ↝ Lessons Learned

Slide 17

Slide 17 text

Act I: Modernizing Dependencies SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 18

Slide 18 text

BEFORE…

Slide 19

Slide 19 text

WEBPACK 1 ↝ 5 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

WEBPACK 1 ↝ 5

Slide 22

Slide 22 text

WEBPACK 1 ↝ 5

Slide 23

Slide 23 text

#1 of 3 MIGRATION IS ABOUT HAVING ALL THE PLUGINS AND LOADERS ON THEIR LATEST VERSIONS AND ENSURING THAT EVERY LOADER AND PLUGIN IS COMPATIBLE WITH EACH OTHER. #GOTCHA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / WEBPACK

Slide 24

Slide 24 text

#2 of 3 V5 MIGRATION CAN'T BE DONE FROM V2/V3. IF YOU'RE ON A VERSION LOWER THAN V4, THAT’S AN ENTIRELY DIFFERENT MIGRATION THAT NEEDS TO BE FOLLOWED ONE AFTER THE OTHER SEQUENTIALLY. #GOTCHA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / WEBPACK

Slide 25

Slide 25 text

#3 of 3 NODE 10.13.0 IS THE MINIMUM REQUIREMENT FOR V5 BUT THERE ARE SOME PLUGINS AND LOADERS THAT REQUIRE HIGHER NODE VERSIONS — E.G. copy-webpack- plugin REQUIRES NODE ≥ 12.20.0. #GOTCHA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / WEBPACK

Slide 26

Slide 26 text

NODE 10 ↝ 18 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 27

Slide 27 text

NODE 10 ↝ 18

Slide 28

Slide 28 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / NODE

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT

Slide 31

Slide 31 text

REACT 15 ↝ 16

Slide 32

Slide 32 text

REACT 15 ↝ 16

Slide 33

Slide 33 text

REACT 15 ↝ 16

Slide 34

Slide 34 text

REACT 15 ↝ 16

Slide 35

Slide 35 text

❌ REACT 15 ↝ 16

Slide 36

Slide 36 text

REACT 15 ↝ 16

Slide 37

Slide 37 text

❌ REACT 15 ↝ 16

Slide 38

Slide 38 text

REACT 15 ↝ 16

Slide 39

Slide 39 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT

Slide 40

Slide 40 text

#definition 🧐 jscodeshift is a tool that runs a transformation script over one or more JavaScript or TypeScript fi les. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 41

Slide 41 text

#definition 🧐 It reads all the fi les you provide to it at runtime and analyzes and compiles the source into the AST as part of the transformation. It then looks for matches speci fi ed in the transformation script, deletes them, or replaces these with the required content, and then regenerates the fi le from the modi fi ed AST. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / REACT

Slide 44

Slide 44 text

REACT 15 ↝ 16

Slide 45

Slide 45 text

— FANTASTIC FEATURES AND HOW TO HIDE THEM • SYMPHONY, 2022

Slide 46

Slide 46 text

CODEGEN: OVERVIEW SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

CODEGEN: BEFORE REPO / PACKAGES / A (CORE) B (FUNCTIONAL TESTS) …

Slide 49

Slide 49 text

CODEGEN: AFTER REPO / PACKAGES / (LEGACY) A (LEGACY) B NEXT GENERATION (CONFIG + SCRIPTS)* NEXT GENERATION (CODE GENERATED) …

Slide 50

Slide 50 text

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.

Slide 51

Slide 51 text

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)

Slide 52

Slide 52 text

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)

Slide 53

Slide 53 text

CODEGEN: AFTER

Slide 54

Slide 54 text

CODEGEN: TRANSFORMERS SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 55

Slide 55 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / CODEGEN: TRANSFORMERS

Slide 56

Slide 56 text

CODEGEN: AST

Slide 57

Slide 57 text

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: TRANSFORMER

Slide 58

Slide 58 text

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, }, ];

Slide 59

Slide 59 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES / CODEGEN: TRANSFORMERS

Slide 60

Slide 60 text

CODEGEN: GIT IGNORE SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 61

Slide 61 text

CODEGEN: GIT IGNORE

Slide 62

Slide 62 text

!/src/services/ /src/services/ * * / / . . . !/src/services/telemetry/index.test.js !/src/services/translations/index.test.js !/src/services/validations/index.test.js / / . . . !/src/services/telemetry/ /src/services/telemetry/ * * !/src/services/translations/ /src/services/translations/ * * !/src/services/validations/ /src/services/validations/ * * / / . . . CODEGEN: GIT IGNORE

Slide 63

Slide 63 text

try { const filePaths = await globby(includePattern); const files = normalizePaths("./", filePaths); files.forEach((file) = > { finalContents += `\n\n!/${file}`; }); } catch (err) { logger.error(err as string); } const directoriesPaths = getDirectoriesRecursive(baseDir); const directories = normalizePaths("./", directoriesPaths); directories.forEach((directory) = > { finalContents += `\n\n!/${directory}/`; finalContents += `\n/${directory}/ * * `; }); await outputFile(destGitignoreFile, finalContents); CODEGEN: GIT IGNORE

Slide 64

Slide 64 text

WEBDRIVER 4 ↝ 7 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 65

Slide 65 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 66

Slide 66 text

WEBDRIVER 4 ↝ 7

Slide 67

Slide 67 text

WEBDRIVER 4 ↝ 7

Slide 68

Slide 68 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 69

Slide 69 text

jscodeshift -t ./node_modules/@wdio/codemod/v6 ./wdio.conf.js jscodeshift -t ./node_modules/@wdio/codemod/v6 ./src/e2e/ *

Slide 70

Slide 70 text

jscodeshift -t ./node_modules/@wdio/codemod/v7 ./wdio.conf.js jscodeshift -t ./node_modules/@wdio/codemod/v7 ./src/e2e/ *

Slide 71

Slide 71 text

WEBDRIVER 4 ↝ 7

Slide 72

Slide 72 text

🤔 🤔 🤔 WEBDRIVER 4 ↝ 7

Slide 73

Slide 73 text

WEBDRIVER 4 ↝ 7

Slide 74

Slide 74 text

⬇

Slide 75

Slide 75 text

⬇

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

CODEGEN: ELSEWHERE SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / MODERNIZING DEPENDENCIES /

Slide 78

Slide 78 text

REACT 16 ↝ 19: ENZYME

Slide 79

Slide 79 text

REACT 16 ↝ 19: OTHER POSSIBILITIES — MEDALLIA - ADMIN SUITE - SAAS PLATFORM DEMO EXPLAINER VIDEO • EXPLAINLY, 2022

Slide 80

Slide 80 text

REACT x ↝ 19: DEPRECATIONS

Slide 81

Slide 81 text

REACT x ↝ 19: CODEMODS

Slide 82

Slide 82 text

CODEMODS: OTHER COMPANIES

Slide 83

Slide 83 text

CODEMODS: OTHER ECOSYSTEMS

Slide 84

Slide 84 text

CODEMODS: STUDIO

Slide 85

Slide 85 text

Act II: Code Splitting SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 86

Slide 86 text

DYNAMIC IMPORTS — HTTPS://WWW.PATTERNS.DEV

Slide 87

Slide 87 text

DYNAMIC IMPORTS WITH REACT

Slide 88

Slide 88 text

CODE SPLITTING: RESULTS

Slide 89

Slide 89 text

CODE SPLITTING: RESULTS

Slide 90

Slide 90 text

#protip 💡 Dynamic imports are a great tool but, like all optimizations, they don’t come for free. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 91

Slide 91 text

CODE SPLITTING: GOTCHAS — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION

Slide 92

Slide 92 text

CODE SPLITTING: GOTCHAS

Slide 93

Slide 93 text

Act III: Preact SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 94

Slide 94 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREACT

Slide 95

Slide 95 text

PREACT 42.4KB (MIN+GZIP) 4KB (MIN+GZIP)

Slide 96

Slide 96 text

PREACT: INTEGRATING

Slide 97

Slide 97 text

PREACT 205.9KB MIN + GZIP / NO POLYFILLS 175.26KB MIN + GZIP / NO POLYFILLS

Slide 98

Slide 98 text

↝ WAY SMALLER BUNDLE (APPROXIMATELY 3.5KB). ↝ FASTER VIRTUAL DOM IMPLEMENTATION. ↝ MORE EFFECTIVE MEMORY USAGE. PREACT

Slide 99

Slide 99 text

PREACT: GOTCHAS

Slide 100

Slide 100 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / PREACT

Slide 101

Slide 101 text

Act IV: jQuery SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 102

Slide 102 text

JQUERY: OVERVIEW

Slide 103

Slide 103 text

JQUERY: OVERVIEW — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION

Slide 104

Slide 104 text

JQUERY: ISSUES

Slide 105

Slide 105 text

JQUERY: BUILD-TIME* DETECTION

Slide 106

Slide 106 text

JQUERY: BUILD-TIME* DETECTION

Slide 107

Slide 107 text

JQUERY: BUILD-TIME* DETECTION

Slide 108

Slide 108 text

JQUERY: RUNTIME DETECTION

Slide 109

Slide 109 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / JQUERY

Slide 110

Slide 110 text

JQUERY: RUNTIME DETECTION

Slide 111

Slide 111 text

JQUERY: CONVERSION*

Slide 112

Slide 112 text

Act V: Targeting Different Browsers SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 113

Slide 113 text

WHICH BROWSERS ARE VISITING OUR APP? — RUM REPORT SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS

Slide 114

Slide 114 text

BROWSER MIX BROWSER TOTAL — RUM REPORT

Slide 115

Slide 115 text

POLYFILLING: CONCERNS

Slide 116

Slide 116 text

↝ THERE'S NO NEED TO SEND POLYFILLS FOR FEATURES ALREADY SUPPORTED BY THE BROWSER. ↝ THEY SHOULD BE DELIVERED ONLY WHEN NECESSARY, NOT PREEMPTIVELY. ↝ ESSENTIAL FUNCTIONALITY MUST BE AVAILABLE TO PREVENT RUNTIME ERRORS. POLYFILLING: RECAP

Slide 117

Slide 117 text

STRATEGIES SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS /

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

polyfill.io ↝ INSPECTS THE BROWSER’S USER-AGENT AND SERVES A SCRIPT WITH POLYFILLS TARGETED SPECIFICALLY AT THAT BROWSER. ↝ A SINGLE SCRIPT IN FRONT OF YOUR BUNDLE. ↝ SUPPORTS PICKING A SUBSET OF POLYFILLS (E.G. Map AND Promise).

Slide 120

Slide 120 text

polyfill.io

Slide 121

Slide 121 text

polyfill.io

Slide 122

Slide 122 text

polyfill.io THE SCRIPT IS HOSTED ON A DIFFERENT SERVER. ↝ THE BROWSER WILL HAVE TO SPEND EXTRA 50-300 MS TO SETUP A CONNECTION = EXTRA TIME TO INTERACTIVE. ↝ POLYFILL.IO OUTAGE = YOUR SITE WILL EITHER GET VERY SLOW, OR WILL BREAK IN OLDER BROWSERS.

Slide 123

Slide 123 text

polyfill.io

Slide 124

Slide 124 text

polyfill.io

Slide 125

Slide 125 text

#2 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES @BABEL/PRESET-ENV

Slide 126

Slide 126 text

useBuiltIns { "presets": [ ["env", { / / Specify browsers you’re targeting . . . "targets": "> 0.25%, not dead", / / . . . and either . . . "useBuiltIns": "entry", / / . . . or "useBuiltIns": "usage" }] ] }

Slide 127

Slide 127 text

↝ 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

Slide 128

Slide 128 text

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.

Slide 129

Slide 129 text

useBuiltIns ↝ “ENTRY” MODE TO SAFELY REDUCE THE NUMBER OF POLYFILLS SENT. ↝ “USAGE” MODE TO UNSAFELY REDUCE FURTHER THE NUMBER OF POLYFILLS SENT.

Slide 130

Slide 130 text

#3 of 3 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES DIFFERENTIAL SERVING

Slide 131

Slide 131 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES

Slide 132

Slide 132 text

↝ YOU DON'T HAVE TO SHIP POLYFILLS. ↝ YOU DON'T HAVE TO TRANSPILE EVERYTHING TO ES5: • CLASSES: STILL CLASSES, NOT HUGE TEMPLATES. • ASYNC/AWAIT/GENERATORS: KEEP THEIR FORM, NOT HUGE ES5-COMPATIBLE SWITCH-CASE-BASED STATE MACHINES. CREATING TWO BUNDLES…

Slide 133

Slide 133 text

CREATING TWO BUNDLES…

Slide 134

Slide 134 text

< ! - - Full polyfill bundle for old browsers - - > < ! - - Smaller polyfill bundle for browsers with ES2015+ support - - > < ! - - Bundle script. `defer` is required to execute this script after the `type="module"` one - - > SERVING TWO BUNDLES…

Slide 135

Slide 135 text

↝ OLD BROWSERS—ONES THAT DON’T SUPPORT ES2015—WILL NOT LOAD type="module" SCRIPTS AND WILL LOAD nomodule ONES. ↝ YOU CAN USE nomodule TO SERVE ES2015 POLYFILLS TO BROWSERS THAT NEED THEM. SERVING TWO BUNDLES…

Slide 136

Slide 136 text

#1 of 3 RAW MODULE/NOMODULE — WHAT IS DIFFERENTIAL SERVING • BY JOHN STEWART SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES

Slide 137

Slide 137 text

#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

Slide 138

Slide 138 text

#2 of 3 USER AGENT DETECTION — SMART BUNDLING • SHUBHAM KANODIA SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES

Slide 139

Slide 139 text

#2 of 3 router.get('/', async (ctx, next) = > { const useragent = ctx.get('User-Agent') const isModernUser = matchesUA(useragent) const index = isModernUser ? 'modern/…', ‘legacy/…' await send(ctx, index); }); USER AGENT DETECTION SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES

Slide 140

Slide 140 text

#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

Slide 141

Slide 141 text

#3 of 3 RUNTIME DETECTION var script = document.createElement('script'); var prefix = (!('noModule' in check)) ? "/ie11" : "/esm"; script.src = prefix + "/index.js"; document.head.appendChild(script); SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / TARGETING DIFFERENT BROWSERS / STRATEGIES

Slide 142

Slide 142 text

SUMMING UP… ↝ 1⃣ POLYFILL.IO: EASY AND DOESN’T SHIP ANYTHING TO MODERN BROWSERS. COSTLY FOR TTI AND FCP. ↝ 2⃣ @BABEL/PRESET-ENV: 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 ES2015−POLYFILLS.

Slide 143

Slide 143 text

SUMMING UP… POLYFILL.IO @BABEL/PRESET-ENV module/nomodule POLYFILLING RAW module/nomodule USER AGENT DETECTION RUNTIME DETECTION SERVING

Slide 144

Slide 144 text

Results SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 145

Slide 145 text

PULL REQUESTS

Slide 146

Slide 146 text

UNIT TESTS

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

BROWSER LINE = SUPPORT FOR THE NEW SMALLER BUNDLE = WILL DOWNLOAD THE LEGACY BUNDLE WITH POLYFILLS — CANIUSE.COM

Slide 150

Slide 150 text

BROWSER LINE ↝ 0.2% INTERNET EXPLORER USAGE ↝ NO OTHER BROWSERS WILL DOWNLOAD THE LARGE BUNDLE

Slide 151

Slide 151 text

CORE WEB VITALS: BEFORE

Slide 152

Slide 152 text

CORE WEB VITALS: AFTER

Slide 153

Slide 153 text

AS WE CAN SEE, MOST OF THEM SIGNIFICANTLY IMPROVED AFTER ENABLING THE FEATURE FLAG: ↝ FCP: 8.3S → 2.3S = 6S FASTER ↝ SPEED INDEX: 8.3S → 4.8S = 3.5S FASTER ↝ LCP: 8.8S → 6.4S = 2.4S FASTER ↝ TTI: 8.7S → 6.7S = 2S FASTER CORE WEB VITALS: AFTER

Slide 154

Slide 154 text

TIMINGS VISUALLY COMPLETE LAST VISUAL CHANGE LOAD TIME (ONLOAD) LOAD TIME (FULLY LOADED) DOM CONTENT LOADED FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST

Slide 155

Slide 155 text

VISUAL PROGRESS FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST

Slide 156

Slide 156 text

Our Radar SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 157

Slide 157 text

OUR RADAR: TOOLING

Slide 158

Slide 158 text

OUR RADAR: TOOLING

Slide 159

Slide 159 text

OUR RADAR: TOOLING

Slide 160

Slide 160 text

OUR RADAR: WINDOWING

Slide 161

Slide 161 text

OUR RADAR: OFFLOADING

Slide 162

Slide 162 text

OUR RADAR: COMPRESSION

Slide 163

Slide 163 text

OUR RADAR: QUIC — A QUIC UPDATE ON GOOGLE’S EXPERIMENTAL TRANSPORT • CHROMIUM BLOG

Slide 164

Slide 164 text

No content

Slide 165

Slide 165 text

Closing Thoughts SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE /

Slide 166

Slide 166 text

#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.

Slide 167

Slide 167 text

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

Slide 168

Slide 168 text

“So here’s my advice for anyone who wants to make a dent in the future of web development: time to learn how compilers work.” Compilers are the New Frameworks • Tom Dale, 2017

Slide 169

Slide 169 text

COMPILERS…

Slide 170

Slide 170 text

COMPILERS & STATIC ANALYSIS… ↝ LINTERS: ESLint (2013), TSLint (2015), Biome (2023), Oxlint (2023)… ↝ FORMATTERS: Prettier (2017), dprint (2020), Biome (2023)… ↝ BUNDLERS: Webpack (2012), Rollup (2015), Vite (2020), esbuild (2020), Rspack (2022), Rolldown (2023)…

Slide 171

Slide 171 text

COMPILERS & STATIC ANALYSIS… ↝ TRANSPILERS: Babel (2014), SWC (2020)… ↝ TYPE CHECKERS: TypeScript (2012), Flow (2014)… ↝ MINIFIERS: UglifyJS (2010), Terser (2018)… ↝ CSS PROCESSING & OPTIMIZATION: PostCSS (2013), CSSO (2015), cssnano (2015), LightningCSS (2022)…

Slide 172

Slide 172 text

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

Slide 173

Slide 173 text

“Reactive systems have existed even in this space for years. In fact, reactivity was seen as a bad thing for a while with the rise of the popularity of React. Th e thing that has made reactive programming interesting again are compilers.” Marko: Compiling Fine-Grained Reactivity • Ryan Carniato, 2022

Slide 174

Slide 174 text

Marko: Compiling Fine-Grained Reactivity • Ryan Carniato, 2022 “Static analysis and compilation let us take what we know of your code's structure and optimize the creation paths as we already know what you are trying to create. We can see what parts of the template are static. We can infer from where dynamic sections are used how to run the most optimal code.”

Slide 175

Slide 175 text

COMPILERS & STATIC ANALYSIS…

Slide 176

Slide 176 text

COMPILERS & STATIC ANALYSIS…

Slide 177

Slide 177 text

COMPILERS & STATIC ANALYSIS…

Slide 178

Slide 178 text

COMPILERS & STATIC ANALYSIS…

Slide 179

Slide 179 text

#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

Slide 180

Slide 180 text

#3 of 5 ALWAYS CORRELATE BUSINESS METRICS WITH PERFORMANCE 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

Slide 181

Slide 181 text

#4 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

Slide 182

Slide 182 text

BANDWIDTH MIX — GSM ASSOCIATION, 2022

Slide 183

Slide 183 text

THE GLOBAL LTE PICTURE 6.07 (MBPS) 44.31 (MBPS) — THE STATE OF LTE BY OPEN SIGNAL, 2018

Slide 184

Slide 184 text

SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / WHY IT MATTERS

Slide 185

Slide 185 text

#5 of 5 THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS. SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE / CLOSING THOUGHTS

Slide 186

Slide 186 text

THAT’S ALL, FOLKS! THANKS! 👋 🇬🇧 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS!