🇩🇪 iJS Munich 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, 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 • OCTOBER 30, 2025. Hallo, Munich! 👋 🇩🇪
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. #heads-up 🚨 60 minutes is a lot of time, I know…
25. Compilers for the Rest of Us COMPILERS, USER INTERFACES & THE REST OF US
26. THIS SECTION PRESENTS… #1 MODERNIZING LARGE CODEBASES 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
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: STUDIO
44. COMPILERS, USER INTERFACES & THE REST OF US
45. STATIC ANALYSIS ENABLED… GRADUAL ROLLOUT OF TWO ENTIRELY DIFFERENT BUILDS OF THE SAME CODEBASE, WITH: ↝ DIFFERENT VERSIONS OF DEV DEPENDENCIES. ↝ DIFFERENT VERSIONS OF APP DEPENDENCIES. ↝ DIFFERENT STRATEGIES USED FOR BUNDLING AND SERVING.
46. UNDERSTANDING MILLIONS OF LOC REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ COMPILERS, USER INTERFACES & THE REST OF US 2025 2024
47. HYRUM'S LAW
48. HYRUM'S LAW — HTTPS://XKCD.COM/1172
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 & REACT
54. HYRUM'S LAW & REACT
55. HYRUM'S LAW & REACT
56. HYRUM'S LAW & REACT
57. HYRUM'S LAW & ME — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
58. QUANTIFYING HYRUM'S LAW EFFECTS ↝ ↝ ↝ ↝
59. QUANTIFYING HYRUM'S LAW EFFECTS ↝ ↝ ↝ ↝
60. #1 Understanding HTML Code COMPILERS, USER INTERFACES & THE REST OF US
61. CASE STUDY: FINDING PATTERNS <span class="validation">Required</span>
62. CASE STUDY: FINDING PATTERNS
63. 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'); } });
64. 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'); } });
65. CASE STUDY: EXTRACTING JS BLOCKS $('script').each((_, element) = > { const scriptContent = $(element).html(); if (scriptContent) { analyzeJavaScript(scriptContent); } });
66. CASE STUDY: EXTRACTING JS BLOCKS $('script').each((_, element) = > { const scriptContent = $(element).html(); if (scriptContent) { analyzeJavaScript(scriptContent); } });
67. #2 Understanding JavaScript Code COMPILERS, USER INTERFACES & THE REST OF US
68. CASE STUDY: JQUERY
69. CASE STUDY: JQUERY
70. CASE STUDY: JQUERY
71. CASE STUDY: JQUERY
72. CASE STUDY: JQUERY
73. CASE STUDY: JQUERY
74. COMPILERS, USER INTERFACES & THE REST OF US
75. GENERATING THOUSANDS OF LOC 📅 2025 COMPILERS, USER INTERFACES & THE REST OF US 2025
76. QUANTIFYING HYRUM'S LAW EFFECTS ↝ ↝ ↝ ↝
77. #1 Generating TypeScript De fi nitions COMPILERS, USER INTERFACES & THE REST OF US
78. BUILDING TYPES FROM JSON SAMPLES
79. COMPILERS, USER INTERFACES & THE REST OF US
80. BUILDING TYPES FROM JSON SAMPLES
81. COMPILERS, USER INTERFACES & THE REST OF US
82. EX. #1: IMPROVING INTERFACES 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; }
83. EX. #1: IMPROVING INTERFACES 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'); } }); });
84. EX. #1: IMPROVING INTERFACES 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'); } }); });
85. EX. #2: 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"; }
86. EX. #2: 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(); } } });
87. EX. #2: 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(); } } });
88. …AND MUCH MORE!
89. #2 Generating Runtime API Infrastructure COMPILERS, USER INTERFACES & THE REST OF US
90. GENERATING TYPED API ROUTES function buildRoute( category: DataSource, mainTypeName: string, typedParams: string, destructuredParams: string ) { return ` router.get( '/:id', async (req: Request<{ ${typedParams} }>, res: Response<${mainTypeName} | { error: string }>) = > { const ${destructuredParams} = req.params; try { const data = await loadRouteData<${mainTypeName}>('${category}', id); if (!isNil(data)) { res.json(data as ${mainTypeName}); } else { res.status(404).json({ error: \`Item \${id} not found for ${category}.\` }); } } catch (error) { console.error('Error:', error); res.status(500).json({ error: 'Internal server error' }); } } ); `; }
91. LOADING TYPED API ROUTES function loadRoutes(app: Express) { if (fs.existsSync(routesDir)) { routeConfigurations.forEach((config) = > { const routerPath = path.join(routesDir, `${config.name}.ts`); if (fs.existsSync(routerPath)) { try { const routerModule = require(path.join(routesDir, `${config.name}`)); app.use(`/api/${config.name}`, routerModule.default); } catch (error) { console.log(error); } } else { console.warn(`Router file for ${config.name} not found at ${routerPath}. Run generation scripts.`); } }); } else { console.warn(`Routes directory ${routesDir} not found. Run generation scripts.`); } }
92. function loadRoutes(app: Express) { if (fs.existsSync(routesDir)) { routeConfigurations.forEach((config) = > { const routerPath = path.join(routesDir, `${config.name}.ts`); if (fs.existsSync(routerPath)) { try { const routerModule = require(path.join(routesDir, `${config.name}`)); app.use(`/api/${config.name}`, routerModule.default); } catch (error) { console.log(error); } } else { console.warn(`Router file for ${config.name} not found at ${routerPath}. Run generation scripts.`); } }); } else { console.warn(`Routes directory ${routesDir} not found. Run generation scripts.`); } } LOADING TYPED API ROUTES
93. 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.
94. …AND BECAUSE THEY’RE COMPOSABLE…
98. #question 🤔 What if we were Facebook Meta?
99. Compilers and Our Tools COMPILERS, USER INTERFACES & THE REST OF US
100. THIS SECTION PRESENTS…
101. THIS SECTION PRESENTS…
102. COMPILERS, USER INTERFACES & THE REST OF US MILLION LINT ⚡ PERFORMANCE 2024
103. COMPILERS, USER INTERFACES & THE REST OF US
104. MILLION LINT: SERVER — MILLION LINT IS IN PUBLIC BETA • 2024
105. MILLION LINT: SERVER — MILLION LINT IS IN PUBLIC BETA • 2024
106. 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
107. 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
108. 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
109. COMPILERS, USER INTERFACES & THE REST OF US MILLION.JS 2021 ⚡ PERFORMANCE
110. MILLION.JS: OVERVIEW TWO KEY COMPONENTS: ↝ VIRTUAL DOM RUNTIME: UPDATES THE UI, SIMILAR TO EXISTING VIRTUAL DOM LIBRARIES. ↝ OPTIMIZING COMPILER: ANALYZES JAVASCRIPT AND COMPUTES UNNECESSARY WORK DURING COMPILE TIME TO REDUCE LOAD TIME AND SPEED UP RENDERING.
111. #1 Hyperscript & Virtual Node Flattening COMPILERS, USER INTERFACES & THE REST OF US
112. EX. #1: 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. COMPILERS, USER INTERFACES & THE REST OF US
114. EX. #1: VIRTUAL NODE FLATTENING ↝ THE COMPILER EMPLOYS AN APPROACH THAT TRANSFORMS HYPERSCRIPT FUNCTION CALLS INTO A FLATTENED STRUCTURE. ↝ THIS OPTIMIZATION REDUCES THE MEMORY ALLOCATION REQUIRED DURING RUNTIME BY ELIMINATING FUNCTION CALL NESTING.
115. COMPILERS, USER INTERFACES & THE REST OF US
116. EX. #1: VIRTUAL NODE FLATTENING ↝ ADDITIONALLY, COMPILER FLAGS ARE ASSIGNED TO THE FLATTENED NODES, ENABLING FINE-GRAINED CONTROL OVER RUNTIME COMPUTATIONS. ↝ THIS IS SIMILAR TO THE OPTIMIZATIONS IMPLEMENTED IN INFERNO, TARGETING REDUCED COMPUTATIONAL OVERHEAD DURING RENDERING.
117. EX. #1: VIRTUAL NODE FLATTENING h('div', null, 'Hello World'); { tag: 'div', children: ['Hello World'], flag: Flags.ONLY_TEXT_CHILDREN } OUTPUT INPUT
118. EX. #1: VIRTUAL NODE FLATTENING h('div', null, 'Hello World'); { tag: 'div', children: ['Hello World'], flag: Flags.ONLY_TEXT_CHILDREN } OUTPUT INPUT
119. #2 Static Tree Hoisting COMPILERS, USER INTERFACES & THE REST OF US
120. EX. #2: 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.
121. REACT COMPILER COMPILERS, USER INTERFACES & THE REST OF US 2021 ⚡ PERFORMANCE
122. OVERVIEW COMPILERS, USER INTERFACES & THE REST OF US
123. ↝ 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
124. REACT COMPILER: AVAILABILITY
125. REACT COMPILER: TOOLING
126. THE COMPILER HANDLES… COMPILERS, USER INTERFACES & THE REST OF US
127. THE COMPILER HANDLES…
128. COMPILERS, USER INTERFACES & THE REST OF US #1 Alias Analysis
129. COMPILERS, USER INTERFACES & THE REST OF US
130. ↝ 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
131. ALIAS ANALYSIS function example(arr) { arr[0] = 10; const value = arr[0]; return value; }
132. function example(arr) { arr[0] = 10; const value = arr[0]; return value; } ALIAS ANALYSIS DOES `VALUE` ALWAYS EQUAL 10?
133. 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
134. 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
135. #question 🤔 Is this okay?
136. ALIAS ANALYSIS: EX. #1 function Component({ a, b }) { = } function Component({ a, b }) { > = } ✅ — ALIAS ANALYSIS IN THE REACT COMPILER • SATHYA GUNASEKARAN, 2024
137. 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
138. 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
139. #question 🤔 Is this okay?
140. 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
141. 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
142. 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
143. COMPILERS, USER INTERFACES & THE REST OF US #2 Static Single- Assignment Form
144. COMPILERS, USER INTERFACES & THE REST OF US
145. ↝ 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
146. SSA FORM: OVERVIEW x = y - z s = x + s x = s + p s = z * q s = x * s x = s2 = x2 = s3 = s4 = AFTER BEFORE
147. SSA FORM: OVERVIEW x = s = x = s = s = x = y - z s2 = x + s x2 = s2 + p s3 = z * q s4 = x2 * s3 AFTER BEFORE
148. SSA FORM: useMemoCache import { useState } from "react"; export function useMemoCache(size) { return useState(() = > new Array(size))[0]; }
149. COMPILERS, USER INTERFACES & THE REST OF US
150. 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
151. 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
152. THE COMPILER DOESN’T HANDLE… COMPILERS, USER INTERFACES & THE REST OF US
153. THE COMPILER DOESN’T HANDLE…
154. COMPILERS, USER INTERFACES & THE REST OF US
155. #1 Broken Rules of React COMPILERS, USER INTERFACES & THE REST OF US
156. CAVEATS #1: BROKEN RULES
157. CAVEATS #1: BROKEN RULES
158. CAVEATS #1: BROKEN RULES export default function usePrevious<T>(state: T): T | undefined { const ref = useRef<T>(); useEffect(() = > { ref.current = state; }); return ref.current; }
159. CAVEATS #1: BROKEN RULES
160. #2 Tagged Template With Interpolations COMPILERS, USER INTERFACES & THE REST OF US
161. CAVEATS #2: INTERPOLATIONS <div className="min-h-screen bg-slate-50" style={{ padding: '1rem', marginLeft: `${navWidth ?? "var( - - nav-width)"}` }} >
162. CAVEATS #2: INTERPOLATIONS <div className="min-h-screen bg-slate-50" style={{ padding: '1rem', marginLeft: `${navWidth ?? "var( - - nav-width)"}` }} >
163. CAVEATS #2: INTERPOLATIONS
164. CAVEATS #2: INTERPOLATIONS
165. CAVEATS #2: INTERPOLATIONS ↝ TAILWIND DOESN'T PARSE OR EXECUTE ANY OF THE CODE. IT USES REGULAR EXPRESSIONS TO EXTRACT EVERY STRING THAT COULD POSSIBLY BE A CLASS NAME. ↝ IT WILL ONLY FIND CLASSES THAT EXIST AS COMPLETE UNBROKEN STRINGS. ↝ YOU CAN'T CONSTRUCT CLASS NAMES DYNAMICALLY.
166. CAVEATS #2: INTERPOLATIONS
167. #3 Computed Keys COMPILERS, USER INTERFACES & THE REST OF US
168. CAVEATS #3: COMPUTED KEYS const [currentLevel, setCurrentLevel] = useState(difficulty) const useRatingSystem = (props: RecipeProps) = > { return { [props.difficulty]: "⭐".repeat(props.difficulty === 'easy' ? 1 : props.difficulty === 'medium' ? 2 : 3) } } const rating = useRatingSystem({ difficulty: currentLevel })
169. CAVEATS #3: COMPUTED KEYS const [currentLevel, setCurrentLevel] = useState(difficulty) const useRatingSystem = (props: RecipeProps) = > { return { [props.difficulty]: "⭐".repeat(props.difficulty === 'easy' ? 1 : props.difficulty === 'medium' ? 2 : 3) } } const rating = useRatingSystem({ difficulty: currentLevel })
170. CAVEATS #3: COMPUTED KEYS
171. THE COMPILER DOESN’T HANDLE…
172. PREPACK COMPILERS, USER INTERFACES & THE REST OF US 2017 ⚡ PERFORMANCE
173. COMPILERS, USER INTERFACES & THE REST OF US
174. CONCEPTS…
175. REACT COMPILER…
176. SOLID.JS COMPILERS, USER INTERFACES & THE REST OF US 2016 ⚡ PERFORMANCE ✍ ERGONOMICS
177. COMPILERS, USER INTERFACES & THE REST OF US
178. SOLID COMPILE-TIME RUNTIME
179. SOLID: cloneNode const view = ({ item }) = > { const itemId = item.id; return <tr class={itemId === selected() ? "danger" : ""}> <td class="col-md-1">{itemId}</td> <td class="col-md-4"> <a onclick={e = > select(item, e)}>{item.label}</a> </td> <td class="col-md-1"> <a onclick={e = > del(item, e)}> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </a> </td> <td class="col-md-6"></td> </tr>; };
180. import { template as _$template } from "solid-js/web"; import { delegateEvents as _$delegateEvents } from "solid-js/web"; import { createComponent as _$createComponent } from "solid-js/web"; import { className as _$className } from "solid-js/web"; import { effect as _$effect } from "solid-js/web"; import { insert as _$insert } from "solid-js/web"; const _tmpl$ = / * # _ _ PURE _ _ * /_$template(`<tr><td class="col-md-1"></td><td class="col-md-4"><a></a></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>< const view = ({ item }) = > { const itemId = item.id; return (() = > { const _el$ = _tmpl$.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild; _$insert(_el$2, itemId); _el$4.$$click = e = > select(item, e); _$insert(_el$4, () = > item.label); _el$6.$$click = e = > del(item, e); _$effect(() = > _$className(_el$, itemId === selected() ? "danger" : "")); return _el$; })(); }; _$delegateEvents(["click"]); SOLID: cloneNode
181. import { template as _$template } from "solid-js/web"; import { delegateEvents as _$delegateEvents } from "solid-js/web"; import { createComponent as _$createComponent } from "solid-js/web"; import { className as _$className } from "solid-js/web"; import { effect as _$effect } from "solid-js/web"; import { insert as _$insert } from "solid-js/web"; const _tmpl$ = / * # _ _ PURE _ _ * /_$template(`<tr><td class="col-md-1"></td><td class="col-md-4"><a></a></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>< const view = ({ item }) = > { const itemId = item.id; return (() = > { const _el$ = _tmpl$.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild; _$insert(_el$2, itemId); _el$4.$$click = e = > select(item, e); _$insert(_el$4, () = > item.label); _el$6.$$click = e = > del(item, e); _$effect(() = > _$className(_el$, itemId === selected() ? "danger" : "")); return _el$; })(); SOLID: cloneNode
182. SOLID: @once
183. SOLID: @once <MyComponent static={/ * @once * / state.wontUpdate} /> <MyComponent>{/ * @once * / state.wontUpdate}</MyComponent> <div style={{ width: / * @once * / props.width, height: / * @once * / props.height, color: props.color, }} />
184. SOLID: classList
185. SOLID: classList
186. SVELTE COMPILERS, USER INTERFACES & THE REST OF US 2016 ⚡ PERFORMANCE ⚙ CODE EXTRACTION
187. SVELTE
188. SVELTE
189. 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!
190. SVELTE: BREAKING UP TEXT NODES
191. SVELTE: CSS
192. SVELTE: $$invalidate
193. 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.
194. SVELTE 5
195. SVELTE 5
197. OPA LANGUAGE COMPILERS, USER INTERFACES & THE REST OF US 2011 ⚙ CODE EXTRACTION
198. COMPILERS, USER INTERFACES & THE REST OF US
199. OPA LANGUAGE
200. OPA LANGUAGE: CODE EXTRACTION SERVER CLIENT
201. CODE EXTRACTION…
202. JAXER COMPILERS, USER INTERFACES & THE REST OF US 2008 ⚙ CODE EXTRACTION
203. COMPILERS, USER INTERFACES & THE REST OF US
204. 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>
205. 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>
206. CODE EXTRACTION… NEXT.JS (2023) JAXER (2008)
207. CODE EXTRACTION… SOLID START (2023) JAXER (2008)
208. CODE EXTRACTION… LYNX (2025) JAXER (2008)
209. Compilers and Our Browsers COMPILERS, USER INTERFACES & THE REST OF US
210. COMPILERS, USER INTERFACES & THE REST OF US V8
211. V8 & COMPILERS…
212. V8 & COMPILERS…
213. 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.
214. COMPILERS, USER INTERFACES & THE REST OF US JAVASCRIPTCORE
215. JAVASCRIPTCORE & COMPILERS…
216. 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.
218. Closing Thoughts COMPILERS, USER INTERFACES & THE REST OF US
219. #1 of 2 Compilers are no longer just for systems programming. COMPILERS, USER INTERFACES & THE REST OF US
220. EVERYTHING IS A…
221. COMPILERS, USER INTERFACES & THE REST OF US
222. IF EVERYTHING IS A COMPILER…
223. …LET'S BE CREATIVE ABOUT IT!
224. …LET'S BE CREATIVE ABOUT IT!
226. …LET'S BE CREATIVE ABOUT IT!
227. #2 of 2 Understanding compilers can make you a better JavaScript developer. COMPILERS, USER INTERFACES & THE REST OF US
228. THE THINGS WE CAN LEARN…
229. THE THINGS WE CAN LEARN…
231. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
232. COMPILERS ARE FOR THE REST OF US! MATHEUS ALBUQUERQUE • @ythecombinator
234. MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS! THAT’S ALL, FOLKS! DANKE! 👋 🇩🇪 QUESTIONS?