🇺🇸 iJS New York 2026 (Sept 30 ⋅ 3:30 pm)

Compilers, User Interfaces & the Rest of Us

Compilers have long been seen as one of 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 entering this era, fueled by insights from static analysis.

This talk will explore how modern UI compilers are redefining performance and developer experience. We’ll discuss how compilers are designed, including various open-source and enterprise solutions, 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 codebase and offload much of our mental burden.

Transcript

1. Hello, New York! 👋 🇺🇸 COMPILERS, USER INTERFACES & THE REST OF US • SEPTEMBER 30, 2026.
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. COMPILERS, USER INTERFACES & THE REST OF US Preamble
5. COMPILERS, USER INTERFACES & THE REST OF US On Friends & Printers… 2015
6. COMPILERS &… PRINTERS?
7. COMPILERS &… PRINTERS?
8. COMPILERS &… PRINTERS? BEFORE AFTER
9. COMPILERS &… PRINTERS? BEFORE AFTER
11. COMPILERS &… ME!
13. COMPILERS, USER INTERFACES & THE REST OF US Back to the Front-End Realm… 2017
14. COMPILERS &… ME: JAVASCRIPT!
15. COMPILERS &… ME: JAVASCRIPT! YOUR MACRO YOUR CODE unless (user.isLoggedIn) { macro unless { rule { ($condition) { $body } } } if (!$condition) { $body } } > = . . . . . } . showLogin(); {
16. COMPILERS &… ME: JAVASCRIPT! YOUR MACRO YOUR CODE unless (user.isLoggedIn) { macro unless { showLogin(); rule { ($condition) { $body } if (!$condition) { $body } } > . }
17. COMPILERS &… ME: JAVASCRIPT! YOUR MACRO unless (user.isLoggedIn) { YOUR RESULT if (!user.isLoggedIn) { showLogin(); showLogin(); } }
19. COMPILERS &… ME: JAVASCRIPT! ↝ LANGUAGE EXPERIMENTS COULD HAPPEN THROUGH COMPOSABLE USER-LAND SYNTAX EXTENSIONS. ↝ INDEPENDENTLY AUTHORED SYNTAX TRANSFORMATIONS COULD PARTICIPATE IN THE SAME COMPILATION PIPELINE. ↝ THIS GAVE US A PLAYGROUND WHERE SYNTAX IDEAS COULD EXIST AS LIBRARIES BEFORE/WITHOUT BECOMING PART OF ECMASCRIPT.
20. COMPILERS &… ME: JAVASCRIPT!
21. COMPILERS &… ME: JAVASCRIPT! ↝ IN RETROSPECT, NOT EVERY JAVASCRIPT FEATURE BECAME A MACRO… ↝ OUR ECOSYSTEM LARGELY MOVED TOWARD PARSERS, BABEL PLUGINS, TRANSFORMS, CODEMODS, AND SPECIALIZED COMPILERS. ↝ BUT THE UNDERLYING IDEA SURVIVED: COMPILE-TIME EXTENSIBILITY BECAME REGULAR JAVASCRIPT ENGINEERING.
22. #insight 💡 JavaScript source doesn't have to be the program that executes. It can be input to another program that understands and rewrites it.
23. COMPILERS, USER INTERFACES & THE REST OF US
24. “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
26. “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
27. “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
28. COMPILERS…
29. COMPILERS & STATIC ANALYSIS… ↝ 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)…
30. COMPILERS & STATIC ANALYSIS… ↝ 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)…
31. MY GOALS FOR TODAY… Open your mind to—or even Bridge the gap between empower you with—tools to foundational CS concepts tackle a variety of complex and practical front-end challenges. development.
32. COMPILERS, USER INTERFACES & THE REST OF US Compilers for the Rest of Us
33. COMPILERS, USER INTERFACES & THE REST OF US Compilers For… Me!
34. THIS SECTION PRESENTS… modernizing generating understanding observing querying
35. THIS SECTION PRESENTS… modernizing generating understanding observing querying hundreds thousands millions LOC
36. COMPILERS, USER INTERFACES & THE REST OF US Modernizing thousands of LOC 2018 2022 2025
37. COMPILERS, USER INTERFACES & THE REST OF US Modernizing thousands of LOC 2018 2022 2025
38. REACT 16: DEPRECATED APIS
39. REACT 19: DEPRECATED APIS
40. REACT: CODEMODS
41. COMPILERS, USER INTERFACES & THE REST OF US
42. #definition 🧐 jscodeshift is a tool that runs a transformation script fi over one or more JavaScript or TypeScript les.
43. 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(); = = = }
44. 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(); = = = }
45. 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(); = = = }
46. COMPILERS, USER INTERFACES & THE REST OF US
47. COMPILERS, USER INTERFACES & THE REST OF US
48. CODEMODS: OTHER COMPANIES
49. CODEMODS: OSS
50. CODEMODS: OSS
51. CODEMODS: REGISTRY
52. CODEMODS: BACK THEN…
53. CODEMODS: NOW!
54. CODEMODS: NOW!
55. COMPILERS, USER INTERFACES & THE REST OF US
56. STATIC ANALYSIS ENABLED… GRADUAL ROLLOUT OF TWO ENTIRELY DIFFERENT, FEATURE -FLAG-PROTECTED, BUILDS OF THE SAME CODEBASE, WITH: ↝ DIFFERENT VERSIONS OF DEV DEPENDENCIES. ↝ DIFFERENT VERSIONS OF APP DEPENDENCIES. ↝ DIFFERENT STRATEGIES FOR BUNDLING AND SERVING.
57. COMPILERS, USER INTERFACES & THE REST OF US Understanding millions of LOC 2024 2025
58. HYRUM'S LAW
59. HYRUM'S LAW — HTTPS://XKCD.COM/1172
60. HYRUM'S LAW — HTTPS://XKCD.COM/1172
61. HYRUM'S LAW — HTTPS://XKCD.COM/1172
62. HYRUM'S LAW — HTTPS://XKCD.COM/1172
63. HYRUM'S LAW — HTTPS://XKCD.COM/1172
64. HYRUM'S LAW & REACT
65. HYRUM'S LAW & REACT
66. HYRUM'S LAW & REACT
67. HYRUM'S LAW & REACT
68. HYRUM'S LAW & ME — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
69. CASE STUDY: JQUERY
70. CASE STUDY: JQUERY
71. CASE STUDY: JQUERY
72. CASE STUDY: JQUERY
73. CASE STUDY: JQUERY
74. CASE STUDY: JQUERY
75. 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.
76. …AND BECAUSE THEY’RE COMPOSABLE…
77. …AND BECAUSE THEY’RE COMPOSABLE…
78. COMPILERS, USER INTERFACES & THE REST OF US
79. COMPILERS, USER INTERFACES & THE REST OF US Generating thousands of LOC 2025
80. BUILDING TYPES FROM JSON SAMPLES
81. COMPILERS, USER INTERFACES & THE REST OF US
82. BUILDING TYPES FROM JSON SAMPLES
83. COMPILERS, USER INTERFACES & THE REST OF US
84. TS-MORPH: HELLO WORLD BEFORE interface Welcome { } AFTER interface ApiResponse { the_user_data?: UserData; userData?: UserData; "api-version"?: string; apiVersion?: string; isActive?: boolean; isActive?: boolean; user_preferences?: any; userPreferences?: UserPreferences; }
85. 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('_') const camelName propName.includes('-')) { toCamelCase(propName.replace(/["-]/g, '_')); prop.rename(camelName); } Replace 'any' types with proper interfaces if (prop.getTypeNode()?.getText() === 'any') { prop.setType('UserPreferences'); } }); > = > = | | = = = / / / / / / });
86. 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('_') const camelName propName.includes('-')) { toCamelCase(propName.replace(/["-]/g, '_')); prop.rename(camelName); } Replace 'any' types with proper interfaces if (prop.getTypeNode()?.getText() === 'any') { prop.setType('UserPreferences'); } }); > = > = | | = = = / / / / / / });
87. …AND MUCH MORE!
88. …AND MUCH MORE!
89. COMPILERS, USER INTERFACES & THE REST OF US Observing thousands of LOC 2026
90. BREAKING CHANGES DETECTION ↝ THE RENDERED DOM (TAGS, CLASSES, ID, ETC.) IS A CUSTOMER CONTRACT. THEY WRITE CSS/JS AGAINST IT. ↝ WE NEED TO CATCH WHEN A PR CHANGES IT WITHOUT A HAND-MAINTAINED SELECTOR LIST. ↝ FOR THAT, WE CAN PARSE EVERY COMPONENT'S TSX/JSX AND WALK THE TREE TO EXTRACT A STRUCTURAL DOM CONTRACT: TAGS, RESOLVED CLASS TOKENS, ID/NAME…
91. BREAKING CHANGES DETECTION
92. BREAKING CHANGES DETECTION
93. COMPILERS, USER INTERFACES & THE REST OF US Querying thousands of LOC 2026
94. QUERYING AN ELEMENT…
95. TYPESAFE DOM LOCATOR DSL ↝ QUALITY ASSURANCE TEAMS NEED STABLE SELECTORS TO AUTOMATE AGAINST, BUT HAND-WRITTEN LOCATORS IN TEST CODE OFTEN DRIFT FROM THE ACTUAL DOM. ↝ TO IMPROVE THIS, WE CAN SCAN THE ACTUAL SOURCE OF TRUTH (E.G. JSX + SCSS) AND GENERATE A LOCATOR DSL QE CONSUMES.
96. TYPESAFE DOM LOCATOR DSL
97. TYPESAFE DOM LOCATOR DSL
98. TYPESAFE DOM LOCATOR DSL
101. #question 🤔 What if we were Facebook { Google, Apple, Meta, Vercel, VoidZero… } ?
102. COMPILERS, USER INTERFACES & THE REST OF US Compilers and Our Tools
103. THIS SECTION PRESENTS…
104. THIS SECTION PRESENTS…
105. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE React Compiler 2021
106. REACT: COMPILER
107. COMPILERS, USER INTERFACES & THE REST OF US #1 Alias Analysis
108. COMPILERS, USER INTERFACES & THE REST OF US
109. ALIAS ANALYSIS: OVERVIEW ↝ 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.
110. ALIAS ANALYSIS: OVERVIEW function example(arr) { arr[0] 10; const value return value; = = } arr[0];
111. ALIAS ANALYSIS: OVERVIEW function example(arr) { arr[0] 10; const value = arr[0]; return value; = }
112. ALIAS ANALYSIS: REACT
113. COMPILERS, USER INTERFACES & THE REST OF US #2 Static SingleAssignment Form
114. COMPILERS, USER INTERFACES & THE REST OF US
115. SSA FORM: OVERVIEW ↝ 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. ↝ THAT SIMPLIFIED STRUCTURE ENABLES MORE POWERFUL AND EFFICIENT OPTIMIZATION TECHNIQUES.
116. SSA FORM: REACT
117. COMPILERS, USER INTERFACES & THE REST OF US #3 Type Inference & Algorithm W
118. COMPILERS, USER INTERFACES & THE REST OF US
119. HINDLEY MILNER: REACT
120. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE ⚙ CODE EXTRACTION Svelte 2016
121. SVELTE
122. SVELTE
123. SVELTE 3 + 4
124. SVELTE 5
126. COMPILERS, USER INTERFACES & THE REST OF US ✨ CODE REFACTORING Opa Language 2011
127. COMPILERS, USER INTERFACES & THE REST OF US
128. OPA LANGUAGE: CODE EXTRACTION CLIENT SERVER
129. CODE EXTRACTION…
130. CODE EXTRACTION IN 2000s
131. CODE EXTRACTION IN 2020s
132. COMPILERS, USER INTERFACES & THE REST OF US Compilers and Our Browsers
133. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE V8
134. V8 & COMPILERS
135. V8 & COMPILERS
136. 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.
137. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE JavaScriptCore
138. JAVASCRIPTCORE & COMPILERS
139. 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.
140. COMPILERS, USER INTERFACES & THE REST OF US Compilers And Agents
141. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE React Doctor 2026
142. COMPILERS, USER INTERFACES & THE REST OF US
143. REACT DOCTOR: OVERVIEW ↝ A DIAGNOSTIC TOOL THAT ANALYZES REACT CODEBASES FOR SECURITY, PERFORMANCE, AND CORRECTNESS. ↝ IT SUPPORTS BOTH MANUAL USE BY DEVELOPERS AND AUTOMATED CONSUMPTION BY AI CODING AGENTS. ↝ @react-doctor/core DOES THE HEAVY LIFTING AND ORCHESTRATES THE ANALYSIS PIPELINE. IT LEVERAGES oxlint-plugin-react-doctor FOR HIGH-PERFORMANCE LINTING AND deslop-js FOR DEAD-CODE ANALYSIS.
144. COMPILERS, USER INTERFACES & THE REST OF US ✨ CODE REFACTORING ast-grep Agents Skills 2025
145. COMPILERS, USER INTERFACES & THE REST OF US
146. AST-GREP AGENT SKILLS: OVERVIEW ↝ A CLAUDE CODE PLUGIN DESIGNED TO EMPOWER AGENTS WITH STRUCTURAL CODE SEARCH CAPABILITIES. ↝ THE SKILL CONVERTS REQUESTS SUCH AS “FIND ASYNC FUNCTIONS THAT CALL THIS API WITHOUT ERROR HANDLING” INTO EXPLICIT STRUCTURAL CONDITIONS. ↝ IT EVALUATES THOSE CONDITIONS AGAINST TREESITTER SYNTAX NODES, MAKING MATCHES INDEPENDENT OF FORMATTING, INDENTATION, AND COMMENTS.
147. AST-GREP AGENT SKILLS: SEARCHING
148. AST-GREP AGENT SKILLS: SEARCHING
149. AST-GREP AGENT SKILLS: SEARCHING
150. AST-GREP AGENT SKILLS: SEARCHING
151. AST-GREP AGENT SKILLS: SEARCHING FEATURE TEXT SEARCH (GREP) STRUCTURAL SEARCH (AST-GREP) MATCHING UNIT LINES/STRINGS AST NODES AWARENESS LITERAL CHARACTERS SYNTAX, SCOPE, AND GRAMMAR FORMATTING SENSITIVE TO SPACES/NEWLINES AGNOSTIC TO FORMATTING COMPLEXITY LIMITED TO REGEX RELATIONAL & COMPOSITE LOGIC
152. AST-GREP AGENT SKILLS: OUTLINING
153. AST-GREP AGENT SKILLS: OUTLINING
154. AST-GREP AGENT SKILLS: OUTLINING
155. AST-GREP AGENT SKILLS: OUTLINING
156. COMPILERS, USER INTERFACES & THE REST OF US
157. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE Million Lint 2024
158. COMPILERS, USER INTERFACES & THE REST OF US
159. MILLION LINT: IDE SERVER — MILLION LINT IS IN PUBLIC BETA • 2024
160. MILLION LINT: IDE SERVER — MILLION LINT IS IN PUBLIC BETA • 2024
161. MILLION LINT: COMPILER function App({ start }) { const [count, setCount] useEffect(() useState(start); { console.log("double: ", count * 2); }, [count]); return <Button onClick={() setCount(count + 1)}>{count}</Button>; } > = = > = — MILLION LINT IS IN PUBLIC BETA • 2024
162. 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
163. MILLION LINT: COMPILER [ [ 'src/App.jsx': { { components: { kind: 'state', App: { count: 7, renders: [{ count: 7, time: 0.1 }, ], time: 0.1, instances: 3, changes: [{ prev: 0, next: 8 }, count: 70, ], } time: 1, ]; location: [13, 0, 23, 1], } } } ]; . . . . . . — MILLION LINT IS IN PUBLIC BETA • 2024
164. COMPILERS, USER INTERFACES & THE REST OF US ✨ CODE REFACTORING Enzyme to RTL codemod 2024
165. COMPILERS, USER INTERFACES & THE REST OF US
166. ENZYME TO RTL CODEMOD
168. COMPILERS, USER INTERFACES & THE REST OF US Closing Thoughts
169. COMPILERS, USER INTERFACES & THE REST OF US Compilers are no #1 longer just for systems programming.
170. EVERYTHING IS A…
171. COMPILERS, USER INTERFACES & THE REST OF US
172. IF EVERYTHING IS A COMPILER…
173. …LET'S BE CREATIVE ABOUT IT!
175. …WE CAN STILL BE CREATIVE ABOUT IT!
176. COMPILERS, USER INTERFACES & THE REST OF US Understanding #2 compilers can make you a better JavaScript developer.
177. THE THINGS WE CAN LEARN…
178. THE THINGS WE CAN LEARN…
180. COMPILERS, USER INTERFACES & THE REST OF US Fundamentals matter more in the #3 AI era. Agents can automate code. But only engineers can understand the ff tradeo s. 🌶
181. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
182. COMPILERS ARE FOR THE REST OF US! MATHEUS ALBUQUERQUE • @ythecombinator
184. COMPILERS, USER INTERFACES & THE REST OF US THAT’S ALL, FOLKS! THANKS! 👋 🇺🇸 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator