🇺🇸 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
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. “The thing that has made reactive programming interesting again are compilers.” Marko: Compiling Fine-Grained Reactivity • Ryan Carniato, 2022
17. COMPILERS…
18. ↝ 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…
19. ↝ 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…
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 LARGE CODEBASES REACT • JSCODESHIFT + CODEMODS #2 UNDERSTANDING MILLIONS OF LOC USER-GENERATED CONTENT (UGC) • BABEL • CHEERIO #3 GENERATING THOUSANDS OF LOC CODE-GENERATED TYPESAFE APIS
23. MODERNIZING LARGE CODEBASES REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2018 📅 2023 📅 2025 📅 2022 COMPILERS, USER INTERFACES & THE REST OF US
24. MODERNIZING LARGE CODEBASES REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2018 📅 2023 📅 2025 📅 2022 COMPILERS, USER INTERFACES & THE REST OF US
25. REACT 16: DEPRECATED APIS
26. REACT 19: DEPRECATED APIS
27. REACT: CODEMODS
28. COMPILERS, USER INTERFACES & THE REST OF US
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. 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(); }
32. COMPILERS, USER INTERFACES & THE REST OF US
33. COMPILERS, USER INTERFACES & THE REST OF US
34. CODEMODS: OTHER COMPANIES
35. CODEMODS: OSS
36. CODEMODS: STUDIO
37. COMPILERS, USER INTERFACES & THE REST OF US
38. 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.
39. UNDERSTANDING MILLIONS OF LOC REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ 📅 2024 📅 2025 COMPILERS, USER INTERFACES & THE REST OF US
40. HYRUM'S LAW
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 — HTTPS://XKCD.COM/1172
46. HYRUM'S LAW & REACT
47. HYRUM'S LAW & REACT
48. HYRUM'S LAW & REACT
49. HYRUM'S LAW & ME — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
50. #1 Understanding HTML Code COMPILERS, USER INTERFACES & THE REST OF US
51. CASE STUDY: FINDING PATTERNS <span class="validation">Required</span>
52. CASE STUDY: FINDING PATTERNS
53. 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'); } });
54. 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'); } });
55. CASE STUDY: EXTRACTING JS BLOCKS $('script').each((_, element) = > { const scriptContent = $(element).html(); if (scriptContent) { analyzeJavaScript(scriptContent); } });
56. CASE STUDY: EXTRACTING JS BLOCKS $('script').each((_, element) = > { const scriptContent = $(element).html(); if (scriptContent) { analyzeJavaScript(scriptContent); } });
57. #2 Understanding JavaScript Code COMPILERS, USER INTERFACES & THE REST OF US
58. CASE STUDY: JQUERY
59. CASE STUDY: JQUERY
60. CASE STUDY: JQUERY
61. CASE STUDY: JQUERY
62. CASE STUDY: JQUERY
63. CASE STUDY: JQUERY
64. GENERATING THOUSANDS OF LOC 📅 2025 COMPILERS, USER INTERFACES & THE REST OF US
65. BUILDING TYPES FROM JSON SAMPLES
66. COMPILERS, USER INTERFACES & THE REST OF US
67. BUILDING TYPES FROM JSON SAMPLES
68. COMPILERS, USER INTERFACES & THE REST OF US
69. E.G. STRING UNIONS TO ENUMS AFTER BEFORE enum UserStatus { Active = Inactive = Pending = } enum UserRole { Admin = User = Moderator = } type Status = "active" | "inactive" | "pending"; interface User { status: "ACTIVE" | "INACTIVE" | "PENDING"; role: "admin" | "user" | "moderator"; }
70. 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 = interface User { status: "ACTIVE" | "INACTIVE" | "PENDING"; role: "admin" | "user" | "moderator"; }
71. 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(); } } });
72. 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 ENDPOINTS AND THE REACT APP. ↝ RAPID ITERATION WITH INSTANT TYPED APIS AND ENHANCED DX WHEN IMPLEMENTING NEW METRICS.
73. …AND BECAUSE THEY’RE COMPOSABLE…
76. #question 🤔 What if we were Facebook Meta?
77. Compilers and Our Tools COMPILERS, USER INTERFACES & THE REST OF US
78. THIS SECTION PRESENTS…
79. THIS SECTION PRESENTS…
80. COMPILERS, USER INTERFACES & THE REST OF US MILLION LINT ⚡ PERFORMANCE 2024 🤖 AI
81. COMPILERS, USER INTERFACES & THE REST OF US
82. MILLION LINT: IDE — MILLION LINT IS IN PUBLIC BETA • 2024
83. 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
84. 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
85. 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
86. REACT COMPILER COMPILERS, USER INTERFACES & THE REST OF US 2021 ⚡ PERFORMANCE
87. REACT COMPILER
88. REACT COMPILER: CAPABILITIES
89. REACT COMPILER: TOOLING
90. COMPILERS, USER INTERFACES & THE REST OF US #1 Alias Analysis
91. COMPILERS, USER INTERFACES & THE REST OF US
92. ↝ 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
93. ALIAS ANALYSIS function example(arr) { arr[0] = 10; const value = arr[0]; return value; }
94. function example(arr) { arr[0] = 10; const value = arr[0]; return value; } ALIAS ANALYSIS DOES VALUE ALWAYS EQUAL 10?
95. ALIAS ANALYSIS: REACT COMPONENTS 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
96. ALIAS ANALYSIS: REACT COMPONENTS 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
97. #question 🤔 Is this okay?
98. 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
99. 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
100. 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
101. COMPILERS, USER INTERFACES & THE REST OF US #2 Static Single- Assignment Form
102. COMPILERS, USER INTERFACES & THE REST OF US
103. ↝ 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
104. COMPILERS, USER INTERFACES & THE REST OF US
105. REACT COMPILER: CAPABILITIES
106. REACT COMPILER: CAPABILITIES
107. PREPACK COMPILERS, USER INTERFACES & THE REST OF US 2017 ⚡ PERFORMANCE
108. COMPILERS, USER INTERFACES & THE REST OF US
109. PREPACK: CONCEPTS…
110. PREPACK: COMPILING REACT…
111. SVELTE COMPILERS, USER INTERFACES & THE REST OF US 2016 ⚡ PERFORMANCE ⚙ CODE EXTRACTION
112. SVELTE
113. SVELTE
114. 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!
115. SVELTE: $$invalidate*
116. 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.
117. SVELTE 5
118. SVELTE 5
120. OPA LANGUAGE COMPILERS, USER INTERFACES & THE REST OF US 2011 ⚙ CODE EXTRACTION
121. COMPILERS, USER INTERFACES & THE REST OF US
122. OPA LANGUAGE
123. OPA LANGUAGE: CODE EXTRACTION SERVER CLIENT
124. CODE EXTRACTION…
125. JAXER COMPILERS, USER INTERFACES & THE REST OF US 2008 ⚙ CODE EXTRACTION
126. COMPILERS, USER INTERFACES & THE REST OF US
127. 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>
128. 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>
129. CODE EXTRACTION… NEXT.JS (2023) JAXER (2008)
130. CODE EXTRACTION… SOLIDSTART (2023) JAXER (2008)
131. CODE EXTRACTION… LYNX (2025) JAXER (2008)
133. Closing Thoughts COMPILERS, USER INTERFACES & THE REST OF US
134. #1 of 2 Compilers are no longer just for systems programming. COMPILERS, USER INTERFACES & THE REST OF US
135. IF EVERYTHING IS A COMPILER…
136. COMPILERS, USER INTERFACES & THE REST OF US
137. IF EVERYTHING IS A COMPILER…
138. …LET'S BE CREATIVE!
139. #2 of 2 Understanding compilers can make you a better JavaScript developer. COMPILERS, USER INTERFACES & THE REST OF US
140. THE THINGS WE CAN LEARN…
141. THE THINGS WE CAN LEARN…
143. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
144. COMPILERS ARE FOR THE REST OF US! MATHEUS ALBUQUERQUE • @ythecombinator
145. MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS! THAT’S ALL, FOLKS! THANKS! 👋 🇺🇸 QUESTIONS?