🇨🇿 FrontKon 2026

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. Ahoj, Praho! 👋 🇨🇿 COMPILERS, USER INTERFACES & THE REST OF US • OCTOBER 6, 2026.
2. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
3. Matheus Albuquerque ↝ 👨💻 STAFF SWE @ MEDALLIA ↝ ⚡ 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!
17. COMPILERS &… ME: JAVASCRIPT!
18. COMPILERS &… ME: JAVASCRIPT! ↝ LOOKING BACK, NOT EVERY JAVASCRIPT FEATURE BECAME A MACRO… ↝ OUR ECOSYSTEM LARGELY MOVED TOWARD PARSERS, BABEL PLUGINS, TRANSFORMS, CODEMODS, AND SPECIALIZED COMPILERS. ↝ BUT THE IDEA SURVIVED: COMPILE-TIME EXTENSIBILITY BECAME A PART OF JAVASCRIPT ENGINEERING.
19. COMPILERS, USER INTERFACES & THE REST OF US
20. “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
22. “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
23. “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
24. COMPILERS…
25. 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)…
26. COMPILERS & STATIC ANALYSIS… ↝ TRANSPILERS: Babel (2014), SWC (2020)… ↝ TYPE CHECKERS: TypeScript (2012), Flow (2014)… ↝ MINIFIERS: UglifyJS (2010), Terser (2018)… ↝ CSS PREPROCESSORS: PostCSS (2013), CSSO (2015), cssnano (2015), LightningCSS (2022)…
27. MY GOALS FOR TODAY… Bridge the gap between Open your mind to—or even foundational CS concepts empower you with—tools to and practical front-end tackle a variety of complex development. challenges.
28. MY GOALS FOR TODAY… Compilers Compilers and Our Tools for the Rest of Us
29. COMPILERS, USER INTERFACES & THE REST OF US Compilers and Our Tools
30. THIS SECTION PRESENTS…
31. THIS SECTION PRESENTS…
32. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE React Compiler 2021
33. REACT: COMPILER
34. COMPILERS, USER INTERFACES & THE REST OF US #1 Alias Analysis
35. COMPILERS, USER INTERFACES & THE REST OF US
36. ALIAS ANALYSIS: OVERVIEW ↝ A CLASS OF TECHNIQUES THAT ATTEMPT TO DETERMINE IF VARIABLES REFER TO THE SAME UNDERLYING DATA. ↝ IT HELPS COMPILERS GENERATE EFFICIENT AND OPTIMIZED CODE.
37. ALIAS ANALYSIS: OVERVIEW function example(arr) { arr[0] 10; const value return value; = = } arr[0];
38. ALIAS ANALYSIS: OVERVIEW function example(arr) { arr[0] 10; const value = arr[0]; return value; = }
39. ALIAS ANALYSIS: REACT
40. COMPILERS, USER INTERFACES & THE REST OF US #2 Static SingleAssignment Form
41. COMPILERS, USER INTERFACES & THE REST OF US
42. SSA FORM: OVERVIEW BEFORE AFTER x = y - z x = y - z s = x + s s2 = x + s x = s + p x2 = s2 + p s = z * q s3 = z * q s = x * s s4 = x2 * s3
43. SSA FORM: OVERVIEW BEFORE AFTER x = y - z x = y - z s = x + s s2 = x + s x = s + p x2 = s2 + p s = z * q s3 = z * q s = x * s s4 = x2 * s3
44. SSA FORM: OVERVIEW ↝ MAINTAINING USE-DEFINED CHAINS IS EASIER, SINCE FOR EVERY USE YOU HAVE TO KEEP TRACK OF ONLY ONE DEFINITION. ↝ THIS SIMPLIFIED STRUCTURE ENABLES MORE POWERFUL AND EFFICIENT OPTIMIZATION TECHNIQUES.
45. SSA FORM: REACT
46. COMPILERS, USER INTERFACES & THE REST OF US #3 Type Inference & Algorithm W
47. COMPILERS, USER INTERFACES & THE REST OF US
48. HINDLEY MILNER: REACT
49. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE ⚙ CODE EXTRACTION Svelte 2016
50. SVELTE
51. SVELTE 3 & 4
52. SVELTE 5
54. COMPILERS, USER INTERFACES & THE REST OF US ✨ CODE EXTRACTION Opa Language 2011
55. COMPILERS, USER INTERFACES & THE REST OF US
56. OPA LANGUAGE: CODE EXTRACTION CLIENT SERVER
57. CODE EXTRACTION…
58. CODE EXTRACTION IN 2000s
59. CODE EXTRACTION IN 2020s
60. COMPILERS, USER INTERFACES & THE REST OF US Compilers and Our Browsers
61. V8 & COMPILERS
62. V8 & COMPILERS
63. JAVASCRIPTCORE & COMPILERS
66. COMPILERS, USER INTERFACES & THE REST OF US Compilers for the Rest of Us
67. COMPILERS, USER INTERFACES & THE REST OF US Compilers For… Me!
68. THIS SECTION PRESENTS… modernizing generating understanding observing querying
69. THIS SECTION PRESENTS… modernizing generating understanding observing querying hundreds thousands millions LOC
70. COMPILERS, USER INTERFACES & THE REST OF US Modernizing thousands of LOC 2018 2022 2025
71. COMPILERS, USER INTERFACES & THE REST OF US Modernizing thousands of LOC 2018 2022 2025
72. REACT 16: DEPRECATED APIS
73. REACT 19: DEPRECATED APIS
74. REACT: CODEMODS
75. COMPILERS, USER INTERFACES & THE REST OF US
76. CODEMODS: JSCODESHIFT 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(); = = = }
77. CODEMODS: JSCODESHIFT 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(); = = = }
78. CODEMODS: JSCODESHIFT 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(); = = = }
79. COMPILERS, USER INTERFACES & THE REST OF US
80. COMPILERS, USER INTERFACES & THE REST OF US
81. CODEMODS: OTHER COMPANIES
82. CODEMODS: OSS
83. CODEMODS: OSS
84. CODEMODS: REGISTRY
85. CODEMODS: BACK THEN…
86. CODEMODS: NOW!
87. CODEMODS: NOW!
88. COMPILERS, USER INTERFACES & THE REST OF US
89. 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.
90. COMPILERS, USER INTERFACES & THE REST OF US Understanding millions of LOC 2024 2025
91. HYRUM'S LAW
92. HYRUM'S LAW — HTTPS://XKCD.COM/1172
93. HYRUM'S LAW — HTTPS://XKCD.COM/1172
94. HYRUM'S LAW — HTTPS://XKCD.COM/1172
95. HYRUM'S LAW — HTTPS://XKCD.COM/1172
96. HYRUM'S LAW — HTTPS://XKCD.COM/1172
97. HYRUM'S LAW & REACT
98. HYRUM'S LAW & REACT
99. HYRUM'S LAW & REACT
100. HYRUM'S LAW & REACT
101. HYRUM'S LAW & ME — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
102. CASE STUDY: JQUERY
103. CASE STUDY: JQUERY
104. CASE STUDY: JQUERY
105. CASE STUDY: JQUERY
106. CASE STUDY: JQUERY
107. CASE STUDY: JQUERY
108. 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.
109. …AND BECAUSE THEY’RE COMPOSABLE…
110. …AND BECAUSE THEY’RE COMPOSABLE…
111. COMPILERS, USER INTERFACES & THE REST OF US Generating thousands of LOC 2025
112. BUILDING TYPES FROM JSON SAMPLES
113. COMPILERS, USER INTERFACES & THE REST OF US
114. BUILDING TYPES FROM JSON SAMPLES
115. COMPILERS, USER INTERFACES & THE REST OF US
116. 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; }
117. 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'); } }); > = > = | | = = = / / / / / / });
118. 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'); } }); > = > = | | = = = / / / / / / });
119. …AND MUCH MORE!
120. COMPILERS, USER INTERFACES & THE REST OF US Observing thousands of LOC 2026
121. 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…
122. BREAKING CHANGES DETECTION
123. BREAKING CHANGES DETECTION
124. COMPILERS, USER INTERFACES & THE REST OF US Querying thousands of LOC 2026
125. QUERYING AN ELEMENT…
126. 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.
127. TYPESAFE DOM LOCATOR DSL
128. TYPESAFE DOM LOCATOR DSL
129. TYPESAFE DOM LOCATOR DSL
130. COMPILERS, USER INTERFACES & THE REST OF US Compilers And Agents ✨
131. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE React Doctor 2026
132. COMPILERS, USER INTERFACES & THE REST OF US
133. REACT DOCTOR: OVERVIEW ↝ A DIAGNOSTIC TOOL THAT ANALYZES REACT CODEBASES FOR SECURITY, PERFORMANCE, AND CORRECTNESS. ↝ @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.
134. COMPILERS, USER INTERFACES & THE REST OF US ✨ CODE REFACTORING ast-grep Agents Skills 2025
135. COMPILERS, USER INTERFACES & THE REST OF US
136. AST-GREP AGENT SKILLS: SEARCHING
137. AST-GREP AGENT SKILLS: SEARCHING
138. AST-GREP AGENT SKILLS: SEARCHING
139. AST-GREP AGENT SKILLS: SEARCHING
140. 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
141. COMPILERS, USER INTERFACES & THE REST OF US
142. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE Million Lint 2024
143. 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
144. 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
145. 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
146. MILLION LINT: IDE SERVER — MILLION LINT IS IN PUBLIC BETA • 2024
147. COMPILERS, USER INTERFACES & THE REST OF US ✨ CODE REFACTORING Enzyme to RTL codemod 2024
148. COMPILERS, USER INTERFACES & THE REST OF US
149. ENZYME TO RTL CODEMOD
150. COMPILERS, USER INTERFACES & THE REST OF US Closing Thoughts
151. COMPILERS, USER INTERFACES & THE REST OF US Compilers are no #1 longer just for systems programming.
152. EVERYTHING IS A…
153. COMPILERS, USER INTERFACES & THE REST OF US
154. IF EVERYTHING IS A COMPILER…
155. …LET'S BE CREATIVE ABOUT IT!
157. …LET'S BE CREATIVE ABOUT IT!
158. COMPILERS, USER INTERFACES & THE REST OF US Understanding #2 compilers can make you a better JavaScript developer.
159. THE THINGS WE CAN LEARN…
160. THE THINGS WE CAN LEARN…
162. COMPILERS, USER INTERFACES & THE REST OF US #3 🌶 Fundamentals like these matter more in the AI era.
163. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
164. COMPILERS ARE FOR THE REST OF US! MATHEUS ALBUQUERQUE • @ythecombinator
165. COMPILERS, USER INTERFACES & THE REST OF US THAT’S ALL, FOLKS! DÍKY! 👋 🇨🇿 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator