🇪🇸 React Alicante 2025

Compilers, User Interfaces & the Rest of Us

Compilers have long been seen as one of the most complex topics in computer science. Nowadays, web frameworks are evolving from runtime libraries into optimizing compilers and reshaping how we build user interfaces. Different topics in front-end development—e.g., reactive programming—are now experiencing this era, fueled by static-analysis-driven insights.

This talk will explore how modern UI compilers are redefining performance and developer experience. We’ll discuss how some compilers are designed and different open-source solutions—including the React Compiler, Million.js, Svelte, and Marko—, as well as enterprise apps, and the growing role of compilers in automating things.

By the end of the session, you'll probably be optimistic about a future where compilers understand our entire code and offload a huge part of our mental burden related to manual tasks!

Transcript

1. COMPILERS, USER INTERFACES & THE REST OF US • OCTOBER 3, 2025. Hola, Alicante! 👋 🇪🇸
2. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
3. Matheus Albuquerque ↝ 👨💻 STAFF SWE @ MEDALLIA ↝ ⚡ GOOGLE DEVELOPER EXPERT ↝ 𝕏 YTHECOMBINATOR
4. Preamble COMPILERS, USER INTERFACES & THE REST OF US
5. ON FRIENDS & PRINTERS… COMPILERS, USER INTERFACES & THE REST OF US 📅 2015
6. COMPILERS &… PRINTERS?
7. COMPILERS &… PRINTERS? AFTER BEFORE
8. COMPILERS &… PRINTERS? AFTER BEFORE
9. COMPILERS &… ME!
11. BACK TO THE FRONT-END REALM… COMPILERS, USER INTERFACES & THE REST OF US 📅 2017
12. COMPILERS, USER INTERFACES & THE REST OF US
13. “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
14. COMPILERS…
15. ↝ 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)… COMPILERS & STATIC ANALYSIS…
16. ↝ TRANSPILERS: Babel (2014), SWC (2020)… ↝ TYPE CHECKERS: TypeScript (2012), Flow (2014)… ↝ MINIFIERS: UglifyJS (2010), Terser (2018)… ↝ CSS PROCESSING: PostCSS (2013), CSSO (2015), cssnano (2015), LightningCSS (2022)… COMPILERS & STATIC ANALYSIS…
17. “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. The thing that has made reactive programming interesting again are compilers.” Marko: Compiling Fine-Grained Reactivity • Ryan Carniato, 2022
18. “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.” Marko: Compiling Fine-Grained Reactivity • Ryan Carniato, 2022
19. MY GOALS FOR TODAY… Bridge the gap between foundational computer science concepts and practical front-end development. Open your mind to—or even empower you with —tools to tackle a variety of complex challenges.
20. MY GOALS FOR TODAY… Compilers and Our Tools Compilers for the Rest of Us
21. Compilers for the Rest of Us COMPILERS, USER INTERFACES & THE REST OF US
22. THIS SECTION PRESENTS… #1 MODERNIZING YOUR STACK REACT • JSCODESHIFT + CODEMODS #2 UNDERSTANDING MILLIONS OF LOC USER-GENERATED CONTENT (UGC) • BABEL • CHEERIO #3 GENERATING THOUSANDS OF LOC CODE-GENERATED, END-TO-END TYPESAFE APIS
23. MODERNIZING TECH STACKS REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2018 📅 2023 📅 2025 📅 2022 COMPILERS, USER INTERFACES & THE REST OF US
24. REACT 16: DEPRECATED APIS
25. REACT 19: DEPRECATED APIS
26. REACT: CODEMODS
27. COMPILERS, USER INTERFACES & THE REST OF US
28. #definition 🧐 jscodeshift is a tool that runs a transformation script over one or more JavaScript or TypeScript fi les.
29. JSCODESHIFT: HELLO WORLD 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(); }
30. COMPILERS, USER INTERFACES & THE REST OF US
31. COMPILERS, USER INTERFACES & THE REST OF US
32. CODEMODS: OTHER COMPANIES
33. CODEMODS: OSS
34. CODEMODS: STUDIO
35. COMPILERS, USER INTERFACES & THE REST OF US
36. STATIC ANALYSIS ENABLED… BUILDING, IN PARALLEL, TWO ENTIRE DIFFERENT VERSIONS OF THE VERY SAME CODEBASE, WITH: ↝ DIFFERENT VERSIONS OF DEV DEPENDENCIES. ↝ DIFFERENT VERSIONS OF APP DEPENDENCIES. ↝ DIFFERENT STRATEGIES USED FOR BUNDLING AND SERVING.
37. UNDERSTANDING MILLIONS OF LOC REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2024 📅 2025 COMPILERS, USER INTERFACES & THE REST OF US
38. HYRUM'S LAW
39. HYRUM'S LAW — HTTPS://XKCD.COM/1172
40. HYRUM'S LAW — HTTPS://XKCD.COM/1172
41. HYRUM'S LAW — HTTPS://XKCD.COM/1172
42. HYRUM'S LAW — HTTPS://XKCD.COM/1172
43. HYRUM'S LAW — HTTPS://XKCD.COM/1172
44. HYRUM'S LAW & REACT
45. HYRUM'S LAW & REACT
46. HYRUM'S LAW & REACT
47. HYRUM'S LAW & REACT
48. HYRUM'S LAW & ME — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
49. #1 Understanding HTML Code COMPILERS, USER INTERFACES & THE REST OF US
50. CASE STUDY: FINDING PATTERNS
51. CASE STUDY: FINDING PATTERNS const selector = 'span.validation'; $(selector).each((_, element) = > { const $element = $(element); if ($element.text().trim() === 'Required') { console.log('Pattern found: Required field'); } });
52. CASE STUDY: EXTRACTING JS BLOCKS $('script').each((_, element) = > { const scriptContent = $(element).html(); if (scriptContent) { analyzeJavaScript(scriptContent); } });
53. #2 Understanding JavaScript Code COMPILERS, USER INTERFACES & THE REST OF US
54. CASE STUDY: JQUERY
55. CASE STUDY: JQUERY
56. CASE STUDY: JQUERY
57. CASE STUDY: JQUERY
58. CASE STUDY: JQUERY
59. CASE STUDY: JQUERY
60. GENERATING THOUSANDS OF LOC 📅 2025 COMPILERS, USER INTERFACES & THE REST OF US
61. BUILDING TYPES FROM JSON SAMPLES
62. COMPILERS, USER INTERFACES & THE REST OF US
63. BUILDING TYPES FROM JSON SAMPLES
64. COMPILERS, USER INTERFACES & THE REST OF US
65. EX.: STRING UNIONS TO ENUMS AFTER BEFORE enum UserStatus { Active = "active", Inactive = "inactive", Pending = "pending" } enum UserRole { Admin = "admin", User = "user", Moderator = "moderator" } type Status = "active" | "inactive" | "pending"; interface User { status: "ACTIVE" | "INACTIVE" | "PENDING"; role: "admin" | "user" | "moderator"; }
66. EX.: STRING UNIONS TO ENUMS sourceFile.getTypeAliases().forEach(typeAlias = > { const typeNode = typeAlias.getTypeNode(); if (typeNode & & typeNode.getKind() === SyntaxKind.UnionType) { const unionType = typeNode as UnionTypeNode; const literals = unionType.getTypeNodes().filter(node = > node.getKind() === SyntaxKind.LiteralType); if (literals.length > 2) { / / Creating the enum const enumName = `${typeAlias.getName()}Enum`; const enumDecl = sourceFile.addEnum({ name: enumName, members: literals.map(lit = > ({ name: toPascalCase(lit.getText().replace(/['"]/g, '')), value: lit.getText() })) }); / / Removing old type alias typeAlias.remove(); } } });
67. STATIC ANALYSIS ENABLED… ↝ METRICS AROUND USER-GENERATED CONTENT ENABLED WITH COMPOSING PLUGINS. ↝ ACTUAL DATA IS THE SINGLE SOURCE OF TRUTH AND CONSISTENCY IS GUARANTEED ACROSS ALL ENDPOINTS AND THE FRONT-END APP. ↝ RAPID ITERATION WITH INSTANT TYPED APIS AND ENHANCED DX WHEN IMPLEMENTING NEW METRICS.
70. #question 🤔 What if we were Facebook?
71. Compilers and Our Tools COMPILERS, USER INTERFACES & THE REST OF US
72. THIS SECTION PRESENTS…
73. THIS SECTION PRESENTS…
74. REACT COMPILER COMPILERS, USER INTERFACES & THE REST OF US 2021 ⚡ PERFORMANCE
75. REACT COMPILER: TOOLING
76. REACT COMPILER: TOOLING
77. THE COMPILER HANDLES…
78. COMPILERS, USER INTERFACES & THE REST OF US #1 Alias Analysis
79. COMPILERS, USER INTERFACES & THE REST OF US
80. ↝ TWO COMMON KINDS OF POINTER ANALYSIS ARE ALIAS ANALYSIS AND POINTS-TO ANALYSIS. ↝ IT'S USED TO DETERMINE IF VARIABLES (OR MEMORY LOCATIONS) REFER TO THE SAME UNDERLYING DATA. ↝ IT HELPS COMPILERS OPTIMIZE CODE BY REORDERING INSTRUCTIONS, ELIMINATING REDUNDANT CALCULATIONS AND AVOIDING UNINTENDED SIDE EFFECTS. ALIAS ANALYSIS
81. ALIAS ANALYSIS function example(arr) { arr[0] = 10; const value = arr[0]; return value; }
82. function example(arr) { arr[0] = 10; const value = arr[0]; return value; } ALIAS ANALYSIS DOES `VALUE` ALWAYS EQUAL 10?
83. ALIAS ANALYSIS: EX. #1 function Component({ a, b }) { const x = []; x.push(a); return <Foo x={x} />; } function Component({ a, b }) { > = } — ALIAS ANALYSIS IN THE REACT COMPILER • SATHYA GUNASEKARAN, 2024
84. ALIAS ANALYSIS: EX. #1 function Component({ a, b }) { = } function Component({ a, b }) { const x = useMemo(() = > { const x = []; x.push(a); return x; }, [a]); return <Foo x={x} />; } — ALIAS ANALYSIS IN THE REACT COMPILER • SATHYA GUNASEKARAN, 2024
85. #question 🤔 Is this okay?
86. ALIAS ANALYSIS: EX. #1 function Component({ a, b }) { = } function Component({ a, b }) { > = } ✅ — ALIAS ANALYSIS IN THE REACT COMPILER • SATHYA GUNASEKARAN, 2024
87. ALIAS ANALYSIS: EX. #2 function Component({ a, b }) { const x = []; x.push(a); const y = x; y.push(b); return <Foo x={x} />; } function Component({ a, b }) { > = > = } — ALIAS ANALYSIS IN THE REACT COMPILER • SATHYA GUNASEKARAN, 2024
88. ALIAS ANALYSIS: EX. #2 function Component({ a, b }) { = = } function Component({ a, b }) { const x = useMemo(() = > { const x = []; x.push(a); return x; }, [a]); const y = useMemo(() = > { const y = x; y.push(b); return y; }, [x, b]); return <Foo x={x} />; } — ALIAS ANALYSIS IN THE REACT COMPILER • SATHYA GUNASEKARAN, 2024
89. #question 🤔 Is this okay?
90. ALIAS ANALYSIS: EX. #2 function Component({ a, b }) { const x = []; x.push(a); const y = x; y.push(b); return <Foo x={x} />; } function Component({ a, b }) { > = > = } ❌ — ALIAS ANALYSIS IN THE REACT COMPILER • SATHYA GUNASEKARAN, 2024
91. ALIAS ANALYSIS: EX. #2 function Component({ a, b }) { = = } function Component({ a, b }) { const x = useMemo(() => { const x = []; x.push(a); const y = x; y.push(b); return y; }, [a, b]); return <Foo x={x} />; } — ALIAS ANALYSIS IN THE REACT COMPILER • SATHYA GUNASEKARAN, 2024
92. ALIAS ANALYSIS: EX. #2 function Component({ a, b }) { = = } function Component({ a, b }) { const x = useMemo(() => { const x = []; x.push(a); const y = x; y.push(b); return y; }, [a, b]); return <Foo x={x} />; } ✅ — ALIAS ANALYSIS IN THE REACT COMPILER • SATHYA GUNASEKARAN, 2024
93. COMPILERS, USER INTERFACES & THE REST OF US #2 Static Single- Assignment Form
94. COMPILERS, USER INTERFACES & THE REST OF US
95. ↝ THE OVERHEAD OF ALLOCATING THE CLOSURES AND DEPENDENCY ARRAYS CAN BE CONSIDERABLE. ↝ INSTEAD, THE COMPILER CAN INLINE THE CONDITIONAL CHECKS FOR THE DEPENDENCIES, CACHING THE VALUE AND REUSING THE CACHED VALUE IF THE DEPENDENCIES ARE THE SAME. SSA FORM: OVERVIEW
96. SSA FORM: OVERVIEW x = y - z s = x + s x = s + p s = z * q s = x * s x = y - z s2 = x + s x2 = s2 + p s3 = z * q s4 = x2 * s3 AFTER BEFORE
97. COMPILERS, USER INTERFACES & THE REST OF US
98. SSA FORM: useMemoCache import { useState } from "react"; export function useMemoCache(size) { return useState(() = > new Array(size))[0]; }
99. SSA FORM: EXAMPLE function Component({ colors }) { let styles = { colors }; return <Item styles={styles} />; } function Component(props) { const $ = useMemoCache(2); const { colors } = props; let t0; if ($[0] ! = = colors) { t0 = { colors }; $[0] = colors; $[1] = t0; } else { t0 = $[1]; } const styles = t0; return <Item styles={styles} />; } — COMPILER THEORY AND REACTIVITY • SATHYA GUNASEKARAN, 2024
100. SSA FORM: EXAMPLE function Component({ colors, hover, hoverColors }) { let styles; if (!hover) { styles = { colors }; } else { styles = { colors: hoverColors }; } return <Item styles={styles} />; } function Component(props) { const $ = useMemoCache(4); const { hover, colors, hoverColors } = props; let styles; if ($[0] ! = = hover | | $[1] ! = = colors | | $[2] ! = = hoverColors) { if (!hover) { styles = { colors }; } else { styles = { colors: hoverColors }; } $[0] = hover; $[1] = colors; $[2] = hoverColors; $[3] = styles; } else { styles = $[3]; } return <Item styles={styles} />; } — COMPILER THEORY AND REACTIVITY • SATHYA GUNASEKARAN, 2024
101. THE COMPILER DOESN’T HANDLE…
102. THE COMPILER DOESN’T HANDLE…
103. THE COMPILER DOESN’T HANDLE…
104. THE COMPILER DOESN’T HANDLE…
105. COMPILERS, USER INTERFACES & THE REST OF US MILLION LINT ⚡ PERFORMANCE 2024 🤖 AI
106. COMPILERS, USER INTERFACES & THE REST OF US
107. MILLION LINT: IDE — MILLION LINT IS IN PUBLIC BETA • 2024
108. MILLION LINT: COMPILER function App({ start }) { const [count, setCount] = useState(start); useEffect(() = > { console.log("double: ", count * 2); }, [count]); return <Button onClick={() = > setCount(count + 1)}>{count}</Button>; } — MILLION LINT IS IN PUBLIC BETA • 2024
109. MILLION LINT: COMPILER function App({ start }) { Million.capture({ start }); const [count, setCount] = Million.capture(useState)(start); useEffect( () = > { console.log("double: ", count * 2); }, Million.capture([count]), ); return Million.capture( <Button onClick={() = > setCount(count + 1)}>{count}</Button>, ); } — MILLION LINT IS IN PUBLIC BETA • 2024
110. MILLION LINT: COMPILER [ 'src/App.jsx': { components: { App: { renders: [{ count: 7, time: 0.1 }, . . . ], instances: 3, count: 70, time: 1, location: [13, 0, 23, 1], } } } ]; [ { kind: 'state', count: 7, time: 0.1, changes: [{ prev: 0, next: 8 }, . . . ], } ]; — MILLION LINT IS IN PUBLIC BETA • 2024
111. COMPILERS, USER INTERFACES & THE REST OF US MILLION.JS 2021 ⚡ PERFORMANCE
112. MILLION.JS: HYPERSCRIPT ↝ THE COMPILER OUTPUTS HYPERSCRIPT, A LOW-LEVEL REPRESENTATION OF FUNCTION CALLS THAT CONSTRUCT A VIRTUAL NODE TREE AT RUNTIME. ↝ HYPERSCRIPT SERVES AS AN IDEAL INTERMEDIATE FORMAT DUE TO ITS SIMPLICITY.
113. MILLION.JS: VNODE FLATTENING ↝ THE COMPILER TRANSFORMS HYPERSCRIPT FUNCTION CALLS INTO A FLATTENED STRUCTURE. THIS REDUCES THE MEMORY ALLOCATION REQUIRED DURING RUNTIME BY ELIMINATING FUNCTION CALL NESTING. ↝ ALSO, COMPILER FLAGS ARE ASSIGNED TO THE FLATTENED NODES, ENABLING FINE-GRAINED CONTROL OVER RUNTIME COMPUTATIONS.
114. MILLION.JS: VNODE FLATTENING h('div', null, 'Hello World'); { tag: 'div', children: ['Hello World'], flag: Flags.ONLY_TEXT_CHILDREN } OUTPUT INPUT
115. MILLION.JS: VNODE FLATTENING h('div', null, 'Hello World'); { tag: 'div', children: ['Hello World'], flag: Flags.ONLY_TEXT_CHILDREN } OUTPUT INPUT
116. COMPILERS, USER INTERFACES & THE REST OF US
117. MILLION.JS: STATIC TREE HOISTING ↝ TO MINIMIZE UNNECESSARY RUNTIME MEMORY ALLOCATION, IT EXTRACTS HYPERSCRIPT STRUCTURES THAT ARE INDEPENDENT OF STATE CHANGES AND RELOCATES THEM TO THE GLOBAL JAVASCRIPT SCOPE. ↝ BY SEPARATING STATIC ELEMENTS FROM DYNAMIC ONES, THIS OPTIMIZATION ENSURES THAT NON-DYNAMIC CONTENT IS PRECOMPUTED AND REUSED EFFICIENTLY, REDUCING THE LOAD ON RUNTIME OPERATIONS.
118. PREPACK COMPILERS, USER INTERFACES & THE REST OF US 2017 ⚡ PERFORMANCE
119. COMPILERS, USER INTERFACES & THE REST OF US
120. CONCEPTS…
121. REACT COMPILER…
122. OPA LANGUAGE COMPILERS, USER INTERFACES & THE REST OF US 2011 ⚙ CODE EXTRACTION
123. COMPILERS, USER INTERFACES & THE REST OF US
124. OPA LANGUAGE
125. OPA LANGUAGE: CODE EXTRACTION SERVER CLIENT
126. CODE EXTRACTION…
127. JAXER COMPILERS, USER INTERFACES & THE REST OF US 2008 ⚙ CODE EXTRACTION
128. COMPILERS, USER INTERFACES & THE REST OF US
129. JAXER: CODE EXTRACTION < ! - - Database, file, and socket access from JavaScript - - > <script runat="server"> var resultSet = Jaxer.DB.execute("SELECT * FROM myTable"); var newPrice = resultSet.rows[0].price; </script> < ! - - Directly call server-side functions from the browser - - > <script runat="server-proxy"> function getPriceFromServer() { return 42; } </script> <button onclick="alert(getPriceFromServer())">Price</button> < ! - - Share validation code on the browser and server - - > <script runat="both"> function validateCreditCard(number) {} </script>
130. JAXER: CODE EXTRACTION < ! - - Database, file, and socket access from JavaScript - - > <script runat="server"> var resultSet = Jaxer.DB.execute("SELECT * FROM myTable"); var newPrice = resultSet.rows[0].price; </script> < ! - - Directly call server-side functions from the browser - - > <script runat="server-proxy"> function getPriceFromServer() { return 42; } </script> <button onclick="alert(getPriceFromServer())">Price</button> < ! - - Share validation code on the browser and server - - > <script runat="both"> function validateCreditCard(number) {} </script>
131. CODE EXTRACTION… NEXT.JS (2023) JAXER (2008)
132. CODE EXTRACTION… SOLID START (2023) JAXER (2008)
133. CODE EXTRACTION… LYNX (2025) JAXER (2008)
135. Closing Thoughts COMPILERS, USER INTERFACES & THE REST OF US
136. #1 of 2 Compilers are no longer just for systems programming. COMPILERS, USER INTERFACES & THE REST OF US
137. EVERYTHING IS A…
138. COMPILERS, USER INTERFACES & THE REST OF US
139. #2 of 2 Understanding compilers can make you a better JavaScript developer. COMPILERS, USER INTERFACES & THE REST OF US
141. THE THINGS WE CAN LEARN…
143. MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS! THAT’S ALL, FOLKS! GRACIAS! 👋 🇪🇸 QUESTIONS?