🇺🇸 JSConf North America 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 14, 2025. Hello, Chesapeake Bay! 👋 🇺🇸
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
15. COMPILERS…
16. ↝ 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…
17. ↝ TRANSPILERS: Babel (2014), SWC (2020)… ↝ TYPE CHECKERS: TypeScript (2012), Flow (2014)… ↝ MINIFIERS: UglifyJS (2010), Terser (2018)… ↝ CSS TOOLING: PostCSS (2013), CSSO (2015), cssnano (2015), LightningCSS (2022)… COMPILERS & STATIC ANALYSIS…
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. “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
20. 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.
21. Compilers for the Rest of Us COMPILERS, USER INTERFACES & THE REST OF US
22. THIS SECTION PRESENTS… #1 MODERNIZING TECH STACKS 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. 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(); }
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. 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(); }
31. COMPILERS, USER INTERFACES & THE REST OF US
32. COMPILERS, USER INTERFACES & THE REST OF US
33. CODEMODS: OTHER COMPANIES
34. CODEMODS: OSS
35. CODEMODS: STUDIO
36. COMPILERS, USER INTERFACES & THE REST OF US
37. 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.
38. UNDERSTANDING MILLIONS OF LOC REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2024 📅 2025 COMPILERS, USER INTERFACES & THE REST OF US
39. HYRUM'S LAW
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 — HTTPS://XKCD.COM/1172
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 <span class="validation_caption">Required</span>
51. CASE STUDY: FINDING PATTERNS
52. CASE STUDY: FINDING PATTERNS const selector = 'span.validation_caption'; $(selector).each((_, element) = > { const $element = $(element); if ($element.text().trim() === 'Required') { console.log('Pattern found: Required field'); } });
53. CASE STUDY: EXTRACTING JS BLOCKS $('script').each((_, element) = > { const scriptContent = $(element).html(); if (scriptContent) { analyzeJavaScript(scriptContent); } });
54. #2 Understanding JavaScript Code COMPILERS, USER INTERFACES & THE REST OF US
55. CASE STUDY: JQUERY
56. CASE STUDY: JQUERY
57. CASE STUDY: JQUERY
58. CASE STUDY: JQUERY
59. CASE STUDY: JQUERY
60. CASE STUDY: JQUERY
61. GENERATING THOUSANDS OF LOC 📅 2025 COMPILERS, USER INTERFACES & THE REST OF US
62. BUILDING TYPES FROM JSON SAMPLES
63. COMPILERS, USER INTERFACES & THE REST OF US
64. BUILDING TYPES FROM JSON SAMPLES
65. COMPILERS, USER INTERFACES & THE REST OF US
66. E.G. 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"; }
67. E.G. 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(); } } });
68. STATIC ANALYSIS ENABLED… ↝ METRICS AROUND USER-GENERATED CONTENT BASED ON 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.
71. #question 🤔 What if we were Facebook Meta?
72. Compilers and Our Tools COMPILERS, USER INTERFACES & THE REST OF US
73. THIS SECTION PRESENTS…
74. THIS SECTION PRESENTS…
75. REACT COMPILER COMPILERS, USER INTERFACES & THE REST OF US 2021 ⚡ PERFORMANCE
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. ↝ 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. ↝ IT AIMS TO ADDRESS THE OVERHEAD OF ALLOCATING THE CLOSURES AND DEPENDENCY ARRAYS. ↝ 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 = s2 = x2 = s3 = s4 = AFTER BEFORE
97. 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
98. SSA FORM: useMemoCache import { useState } from "react"; export function useMemoCache(size) { return useState(() = > new Array(size))[0]; }
99. COMPILERS, USER INTERFACES & THE REST OF US
100. 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
101. 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
102. THE COMPILER DOESN’T HANDLE…
103. THE COMPILER DOESN’T HANDLE…
104. THE COMPILER DOESN’T HANDLE…
105. THE COMPILER DOESN’T HANDLE…
106. COMPILERS, USER INTERFACES & THE REST OF US MILLION LINT ⚡ PERFORMANCE 2024 🤖 AI
107. COMPILERS, USER INTERFACES & THE REST OF US
108. MILLION LINT: IDE — MILLION LINT IS IN PUBLIC BETA • 2024
109. 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
110. 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
111. 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
112. PREPACK COMPILERS, USER INTERFACES & THE REST OF US 2017 ⚡ PERFORMANCE
113. COMPILERS, USER INTERFACES & THE REST OF US
114. PREPACK: CONCEPTS…
115. PREPACK: COMPILING REACT…
116. SVELTE COMPILERS, USER INTERFACES & THE REST OF US 2016 ⚡ PERFORMANCE ⚙ CODE EXTRACTION
117. SVELTE
118. SVELTE
119. SVELTE ↝ TRACKS VARIABLES AND DETERMINES THEIR SCOPES. ↝ IDENTIFIES DEPENDENCIES AND DETECTS REACTIVE STATEMENTS AND EVENT HANDLERS. ↝ SCOPES STYLES TO COMPONENTS OPTIMIZES CSS FOR PERFORMANCE. ↝ …AND MUCH MORE!
120. SVELTE: CSS
121. SVELTE: BREAKING UP TEXT NODES
122. SVELTE: $$invalidate*
123. 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.
124. …AND MUCH MORE!
125. …AND MUCH MORE!
127. OPA LANGUAGE COMPILERS, USER INTERFACES & THE REST OF US 2011 ⚙ CODE EXTRACTION
128. COMPILERS, USER INTERFACES & THE REST OF US
129. OPA LANGUAGE
130. OPA LANGUAGE: CODE EXTRACTION SERVER CLIENT
131. CODE EXTRACTION…
132. JAXER COMPILERS, USER INTERFACES & THE REST OF US 2008 ⚙ CODE EXTRACTION
133. COMPILERS, USER INTERFACES & THE REST OF US
134. 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>
135. 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>
136. CODE EXTRACTION… NEXT.JS (2023) JAXER (2008)
137. CODE EXTRACTION… SOLIDSTART (2023) JAXER (2008)
138. CODE EXTRACTION… LYNX (2025) JAXER (2008)
140. Closing Thoughts COMPILERS, USER INTERFACES & THE REST OF US
141. #1 of 2 Compilers are no longer just for systems programming. COMPILERS, USER INTERFACES & THE REST OF US
142. EVERYTHING IS A…
143. COMPILERS, USER INTERFACES & THE REST OF US
144. EVERYTHING IS A…
145. …SO GET CREATIVE!
146. #2 of 2 Understanding compilers can make you a better JavaScript developer. COMPILERS, USER INTERFACES & THE REST OF US
148. THE THINGS WE CAN LEARN…
150. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
151. COMPILERS ARE FOR THE REST OF US! MATHEUS ALBUQUERQUE • @ythecombinator
152. MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS! THAT’S ALL, FOLKS! THANKS! 👋 🇺🇸 QUESTIONS?