🇪🇸 React Alicante 2024

Slide 1

Slide 1 text

Hola, Alicante! 👋 🇪🇸 SPEED AT SCALE: OPTIMIZING THE LARGEST CX PLATFORM OUT THERE • SEPTEMBER 21, 2024.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Staff SWE @ Medallia ↝ ⚛ PC @ React Su m m it NYC ↝ ⚡ Google Developer Expert ↝ 🥘 React Alicante #1 champ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 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 stuff.” […] — The silent majority, by Vadim Kravcenko

Slide 9

Slide 9 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, by Vadim Kravcenko

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

— MEDALLIA SURVEYS • MARIZ MELO

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

BEFORE…

Slide 16

Slide 16 text

REACT 15 ↝ 16

Slide 17

Slide 17 text

REACT 15 ↝ 16

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

#definition 🧐 Jscodeshift is a tool that runs a transformation script over one or more JavaScript or TypeScript files.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

REACT 15 ↝ 16

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 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 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 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 28

Slide 28 text

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

Slide 29

Slide 29 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 30

Slide 30 text

CODEGEN: AFTER

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

CODEGEN: AST

Slide 34

Slide 34 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: BASIC TRANSFORMER

Slide 35

Slide 35 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 36

Slide 36 text

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

Slide 37

Slide 37 text

CODE SPLITTING: REACT

Slide 38

Slide 38 text

CODE SPLITTING: RESULTS

Slide 39

Slide 39 text

CODE SPLITTING: RESULTS

Slide 40

Slide 40 text

#protip 💡 Dynamic imports are a great tool but, like all optimizations, they don’t come for free.

Slide 41

Slide 41 text

CODE SPLITTING: GOTCHAS

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

PREACT: GOTCHAS

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

POLYFILLING: CONCERNS

Slide 51

Slide 51 text

SUMMING UP… POLYFILL.IO useBuiltIns module/nomodule POLYFILLING RAW module/nomodule USER AGENT DETECTION RUNTIME DETECTION SERVING

Slide 52

Slide 52 text

SUMMING UP… POLYFILL.IO useBuiltIns module/nomodule POLYFILLING RAW module/nomodule USER AGENT DETECTION RUNTIME DETECTION SERVING

Slide 53

Slide 53 text

SUMMING UP… POLYFILL.IO useBuiltIns module/nomodule POLYFILLING RAW module/nomodule USER AGENT DETECTION RUNTIME DETECTION SERVING

Slide 54

Slide 54 text

SUMMING UP… var script = document.createElement('script'); var prefix = (!('noModule' in check)) ? "/ie11" : "/esm"; script.src = prefix + "/index.js"; document.head.appendChild(script);

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

PULL REQUESTS

Slide 57

Slide 57 text

UNIT TESTS

Slide 58

Slide 58 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 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

↝ FCP: 6S FASTER ↝ SPEED INDEX: 3.5S FASTER ↝ LCP: 2.4S FASTER ↝ TTI: 2S FASTER CORE WEB VITALS ⬇

Slide 62

Slide 62 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 63

Slide 63 text

VISUAL PROGRESS FEATURE FLAG ON FEATURE FLAG OFF — WEBPAGETEST

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

COMPILERS & UI ENGINEERING

Slide 67

Slide 67 text

COMPILERS & UI ENGINEERING

Slide 68

Slide 68 text

#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

Slide 69

Slide 69 text

#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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

THAT’S ALL, FOLKS! GRACIAS! 👋 🇪🇸 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS!