🇨🇭 Voxxed Days CERN 2026

Compilers, User Interfaces & the Rest of Us

Compilers have long been considered among the most complex topics in computer science. Today, web frameworks are evolving from runtime libraries into optimizing compilers, 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, as well as different open-source solutions—including the React Compiler, Million.js, Svelte, and Marko—enterprise apps, and the growing role of compilers in automating tasks.

By the end of the session, you'll likely be optimistic about a future where compilers understand our entire code and offload a significant portion of our mental burden related to manual tasks.

Transcript

1. COMPILERS, USER INTERFACES & THE REST OF US • FEBRUARY 10, 2026. Bonjour, Genève! 👋 🇨🇭
2. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
3. Matheus Albuquerque ↝ 👨💻 STAFF SWE @ MEDALLIA ↝ ⚛ CHAIR @ REACT SUMMIT NYC ↝ ⚡ 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
10. COMPILERS &… ME!
12. BACK TO THE FRONT-END REALM… COMPILERS, USER INTERFACES & THE REST OF US 2017
13. COMPILERS, USER INTERFACES & THE REST OF US
14. “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
16. “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
17. “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
18. COMPILERS…
19. ↝ 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…
20. ↝ 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…
21. 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.
22. MY GOALS FOR TODAY… Compilers and Our Tools Compilers for the Rest of Us
23. Compilers for the Rest of Us COMPILERS, USER INTERFACES & THE REST OF US
24. modernizing generating understanding THIS SECTION PRESENTS…
25. modernizing generating understanding hundreds thousands millions THIS SECTION PRESENTS… LOC!
26. What do you work with? e.g. React, Vue.js, Angular, Preact, Svelte, Alpine.js, Lit, Solid, Qwik, Stencil, HTMX… COMPILERS, USER INTERFACES & THE REST OF US
27. MODERNIZING LARGE CODEBASES REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ COMPILERS, USER INTERFACES & THE REST OF US 2025 2022 2018
28. MODERNIZING LARGE CODEBASES REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ COMPILERS, USER INTERFACES & THE REST OF US 2025 2022 2018
29. REACT 16: DEPRECATED APIS
30. REACT 19: DEPRECATED APIS
31. REACT: CODEMODS
32. COMPILERS, USER INTERFACES & THE REST OF US
33. #definition 🧐 jscodeshift is a tool that runs a transformation script over one or more JavaScript or TypeScript fi les.
34. 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(); }
35. 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(); }
36. 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(); }
37. COMPILERS, USER INTERFACES & THE REST OF US
38. COMPILERS, USER INTERFACES & THE REST OF US
39. CODEMODS: OTHER COMPANIES
40. CODEMODS: OSS
41. CODEMODS: OSS
42. CODEMODS: REGISTRY
43. CODEMODS: BACK THEN…
44. CODEMODS: NOW!
45. COMPILERS, USER INTERFACES & THE REST OF US
46. STATIC ANALYSIS ENABLED… GRADUAL ROLLOUT OF TWO ENTIRELY DIFFERENT, FEATURE -FLAG-PROTECTED, BUILDS OF THE SAME CODEBASE, WITH: ↝ DIFFERENT VERSIONS OF DEPENDENCIES. ↝ DIFFERENT STRATEGIES USED FOR BUNDLING.
47. UNDERSTANDING MILLIONS OF LOC REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ COMPILERS, USER INTERFACES & THE REST OF US 2025 2024
48. HYRUM'S LAW
49. HYRUM'S LAW — HTTPS://XKCD.COM/1172
50. HYRUM'S LAW — HTTPS://XKCD.COM/1172
51. HYRUM'S LAW — HTTPS://XKCD.COM/1172
52. HYRUM'S LAW — HTTPS://XKCD.COM/1172
53. HYRUM'S LAW — HTTPS://XKCD.COM/1172
54. HYRUM'S LAW & REACT
55. HYRUM'S LAW & REACT
56. HYRUM'S LAW & ME — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
57. CASE STUDY: JQUERY
58. CASE STUDY: JQUERY
59. CASE STUDY: JQUERY
60. CASE STUDY: JQUERY
61. CASE STUDY: JQUERY
62. CASE STUDY: JQUERY
63. STATIC ANALYSIS ENABLED… ↝ METRICS AROUND USER-GENERATED CONTENT BASED ON PLUGIN COMPOSITION. ↝ ACTUAL DATA IS THE SINGLE SOURCE OF TRUTH AND CONSISTENCY IS GUARANTEED ACROSS ALL API ENDPOINTS AND THE REACT APP. ↝ RAPID ITERATION WITH INSTANT TYPED APIS AND ENHANCED DX WHEN IMPLEMENTING NEW METRICS.
64. …AND BECAUSE THEY’RE COMPOSABLE…
65. …AND BECAUSE THEY’RE COMPOSABLE…
66. COMPILERS, USER INTERFACES & THE REST OF US
67. GENERATING THOUSANDS OF LOC COMPILERS, USER INTERFACES & THE REST OF US 2025
68. BUILDING TYPES FROM JSON SAMPLES
69. COMPILERS, USER INTERFACES & THE REST OF US
70. BUILDING TYPES FROM JSON SAMPLES
71. COMPILERS, USER INTERFACES & THE REST OF US
72. TS-MORPH: HELLO WORLD AFTER BEFORE interface ApiResponse { userData?: UserData; apiVersion?: string; isActive?: boolean; userPreferences?: UserPreferences; } interface Welcome { the_user_data?: UserData; "api-version"?: string; isActive?: boolean; user_preferences?: any; }
73. TS-MORPH: HELLO WORLD sourceFile.getInterfaces().forEach(iface = > { / / Convert snake_case to camelCase const newName = toCamelCase(iface.getName()); iface.rename(newName); / / Transform properties iface.getProperties().forEach(prop = > { const propName = prop.getName(); if (propName.includes('_') | | propName.includes('-')) { const camelName = toCamelCase(propName.replace(/["-]/g, '_')); prop.rename(camelName); } / / Replace 'any' types with proper interfaces if (prop.getTypeNode()?.getText() === 'any') { prop.setType('UserPreferences'); } }); });
74. sourceFile.getInterfaces().forEach(iface = > { / / Convert snake_case to camelCase const newName = toCamelCase(iface.getName()); iface.rename(newName); / / Transform properties iface.getProperties().forEach(prop = > { const propName = prop.getName(); if (propName.includes('_') | | propName.includes('-')) { const camelName = toCamelCase(propName.replace(/["-]/g, '_')); prop.rename(camelName); } / / Replace 'any' types with proper interfaces if (prop.getTypeNode()?.getText() === 'any') { prop.setType('UserPreferences'); } TS-MORPH: HELLO WORLD
75. …AND MUCH MORE!
76. …AND MUCH MORE!
79. #question 🤔 What if we were Facebook { Google, Apple, Meta, Vercel, VoidZero, … } ?
80. Compilers and Our Tools COMPILERS, USER INTERFACES & THE REST OF US
81. WHAT DO YOU WORK WITH?
82. THIS SECTION PRESENTS…
83. THIS SECTION PRESENTS…
84. COMPILERS, USER INTERFACES & THE REST OF US MILLION LINT ⚡ PERFORMANCE 2024 🤖 AI
85. COMPILERS, USER INTERFACES & THE REST OF US
86. MILLION LINT: IDE SERVER — MILLION LINT IS IN PUBLIC BETA • 2024
87. MILLION LINT: IDE SERVER — MILLION LINT IS IN PUBLIC BETA • 2024
88. 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
89. 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
90. 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
91. REACT COMPILER COMPILERS, USER INTERFACES & THE REST OF US 2021 ⚡ PERFORMANCE
92. OVERVIEW COMPILERS, USER INTERFACES & THE REST OF US
93. REACT COMPILER: OVERVIEW
94. ↝ IMPROVE THE RENDERING PERFORMANCE BY AUTOMATICALLY GENERATING THE EQUIVALENT OF useMemo, useCallback, AND memo CALLS. ↝ MINIMIZE THE COST OF RE-RENDERING WHILE RETAINING REACT’S PROGRAMMING MODEL. ↝ AUTOMATIC OPTIMIZATION COMPILER. REACT COMPILER: OVERVIEW
95. REACT COMPILER: OVERVIEW
96. REACT COMPILER: TOOLING
97. COMPILERS, USER INTERFACES & THE REST OF US #1 Alias Analysis
98. COMPILERS, USER INTERFACES & THE REST OF US
99. ↝ IT'S A CLASS OF TECHNIQUES THAT ATTEMPT TO DETERMINE IF VARIABLES REFER TO THE SAME UNDERLYING DATA. ↝ IT HELPS COMPILERS GENERATE EFFICIENT AND OPTIMIZED CODE. ALIAS ANALYSIS: OVERVIEW
100. ALIAS ANALYSIS function example(arr) { arr[0] = 10; const value = arr[0]; return value; }
101. function example(arr) { arr[0] = 10; const value = arr[0]; return value; } ALIAS ANALYSIS DOES `VALUE` ALWAYS EQUAL 10?
102. ALIAS ANALYSIS: REACT
103. 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
104. 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
105. #question 🤔 Is this okay?
106. ALIAS ANALYSIS: EX. #1 function Component({ a, b }) { } function Component({ a, b }) { > } ✅ — ALIAS ANALYSIS IN THE REACT COMPILER • SATHYA GUNASEKARAN, 2024
107. 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
108. 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
109. #question 🤔 Is this okay?
110. 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
111. 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
112. 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
113. COMPILERS, USER INTERFACES & THE REST OF US #2 Static Single- Assignment Form
114. COMPILERS, USER INTERFACES & THE REST OF US
115. ↝ A TECHNIQUE WHERE EVERY VARIABLE HAS A SINGLE DEFINITION. MAINTAINING USE-DEFINED CHAINS IS EASIER, SINCE FOR EVERY USE, YOU HAVE TO KEEP TRACK OF ONLY ONE DEFINITION. ↝ THE SIMPLIFIED STRUCTURE ENABLES MORE POWERFUL AND EFFICIENT OPTIMIZATION TECHNIQUES. SSA FORM: OVERVIEW
116. 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
117. 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
118. SSA FORM: REACT
119. 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
120. COMPILERS, USER INTERFACES & THE REST OF US #3 Type Inference & Algorithm w
121. COMPILERS, USER INTERFACES & THE REST OF US
122. HINDLEY MILNER: REACT
123. PREPACK COMPILERS, USER INTERFACES & THE REST OF US 2017 ⚡ PERFORMANCE
124. COMPILERS, USER INTERFACES & THE REST OF US
125. CONCEPTS…
126. REACT COMPILER…
127. SVELTE COMPILERS, USER INTERFACES & THE REST OF US 2016 ⚡ PERFORMANCE ⚙ CODE EXTRACTION
128. SVELTE
129. SVELTE
130. SVELTE ↝ TRACKS VARIABLES AND DETERMINES THEIR SCOPES. ↝ IDENTIFIES DEPENDENCIES AND DETECTS REACTIVE STATEMENTS AND EVENT HANDLERS. ↝ SCOPES STYLES TO COMPONENTS AND OPTIMIZES CSS FOR PERFORMANCE. …AND MUCH MORE!
131. SVELTE: CSS
132. SVELTE: BREAKING UP TEXT NODES
133. SVELTE: $$invalidate
134. SVELTE: $$invalidate ↝ EVERY VARIABLE THAT HAS BEEN REASSIGNED OR MUTATED AND REFERENCED IN THE TEMPLATE WILL HAVE THE $$invalidate FUNCTION INSERTED RIGHT AFTER THE ASSIGNMENT OR MUTATION. ↝ IT MARKS THE VARIABLE DIRTY AND SCHEDULES AN UPDATE FOR THE COMPONENT.
135. SVELTE 5
136. SVELTE 5
138. OPA LANGUAGE COMPILERS, USER INTERFACES & THE REST OF US 2011 ⚙ CODE EXTRACTION
139. COMPILERS, USER INTERFACES & THE REST OF US
140. OPA LANGUAGE
141. OPA LANGUAGE: CODE EXTRACTION SERVER CLIENT
142. CODE EXTRACTION…
143. JAXER COMPILERS, USER INTERFACES & THE REST OF US 2008 ⚙ CODE EXTRACTION
144. COMPILERS, USER INTERFACES & THE REST OF US
145. 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>
146. 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>
147. CODE EXTRACTION… NEXT.JS JAXER (2008)
148. CODE EXTRACTION… SOLID START JAXER (2008)
149. CODE EXTRACTION… LYNX JAXER (2008)
150. CODE EXTRACTION… WECHAT JAXER (2008)
151. Compilers and Our Browsers COMPILERS, USER INTERFACES & THE REST OF US
152. COMPILERS, USER INTERFACES & THE REST OF US V8
153. V8 & COMPILERS…
154. V8 & COMPILERS…
155. V8 & COMPILERS… TWO EXAMPLES: ↝ MAGLEV: GETS TYPE FEEDBACK FROM THE INTERPRETER AND RUNS QUICK OPTIMIZATIONS. ↝ TURBOFAN: TRANSLATES BYTE-CODE INTO HIGHLY OPTIMIZED MACHINE CODE, USING SEA OF NODES (SON) AND CONTROL-FLOW GRAPH (CFG) IR.
156. COMPILERS, USER INTERFACES & THE REST OF US JAVASCRIPTCORE
157. JAVASCRIPTCORE & COMPILERS…
158. JAVASCRIPTCORE & COMPILERS… TWO EXAMPLES: ↝ DFG JIT: BUILDS A DATA-FLOW GRAPH IR, USES PROFILING TO SPECIALIZE TYPES, REMOVE CHECKS, AND MORE, BUT WITH MODERATE COMPILE COST. ↝ FTL JIT: USES MULTIPLE IR (INCLUDING B3 AND LLVM) FOR AGGRESSIVE OPTIMIZATIONS AND HIGHER THROUGHPUT FOR HOT CODE.
160. Closing Thoughts COMPILERS, USER INTERFACES & THE REST OF US
161. #1 of 2 Compilers are no longer just for systems programming. COMPILERS, USER INTERFACES & THE REST OF US
162. EVERYTHING IS A…
163. COMPILERS, USER INTERFACES & THE REST OF US
164. IF EVERYTHING IS A COMPILER…
165. …LET'S BE CREATIVE ABOUT IT!
166. …LET'S BE CREATIVE ABOUT IT!
168. …LET'S BE CREATIVE ABOUT IT!
169. #2 of 2 Understanding compilers can make you a better JavaScript developer. COMPILERS, USER INTERFACES & THE REST OF US
170. THE THINGS WE CAN LEARN…
171. THE THINGS WE CAN LEARN…
173. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
174. COMPILERS ARE FOR THE REST OF US! MATHEUS ALBUQUERQUE • @ythecombinator
175. COMPILERS, USER INTERFACES & THE REST OF US THAT’S ALL, FOLKS! MERCI! 👋 🇨🇭 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator