🇺🇸 RenderATL 2026

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 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 some compilers are designed, 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 probably be optimistic about a future where compilers understand our entire code and offload a significant part of our mental burden from manual tasks!

Transcript

1. Hello, Atlanta! 👋 🇺🇸 COMPILERS, USER INTERFACES & THE REST OF US • AUGUST 12, 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? BEFORE AFTER
8. COMPILERS &… PRINTERS? BEFORE AFTER
10. COMPILERS &… ME!
12. COMPILERS, USER INTERFACES & THE REST OF US Back to the Front-End Realm… 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. 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)…
19. COMPILERS & STATIC ANALYSIS… ↝ 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)…
20. 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.
21. MY GOALS FOR TODAY… Compilers Compilers for the Rest of Us and Our Tools
22. COMPILERS, USER INTERFACES & THE REST OF US Compilers and Our Tools
23. COMPILERS AND OUR TOOLS…
24. COMPILERS AND OUR TOOLS…
25. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE React Compiler 2021
26. REACT: COMPILER
27. COMPILERS, USER INTERFACES & THE REST OF US #1 Alias Analysis
28. COMPILERS, USER INTERFACES & THE REST OF US
29. 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.
30. ALIAS ANALYSIS: OVERVIEW function example(arr) { arr[0] 10; const value return value; = = } arr[0];
31. ALIAS ANALYSIS: OVERVIEW function example(arr) { arr[0] 10; const value return value; = = } arr[0]; DOES VALUE ALWAYS EQUAL 10?
32. ALIAS ANALYSIS: REACT
33. COMPILERS, USER INTERFACES & THE REST OF US #2 Static SingleAssignment Form
34. COMPILERS, USER INTERFACES & THE REST OF US
35. 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. ↝ THE SIMPLIFIED STRUCTURE ENABLES MORE POWERFUL AND EFFICIENT OPTIMIZATION TECHNIQUES.
36. SSA FORM: REACT
37. COMPILERS, USER INTERFACES & THE REST OF US #3 Type Inference & Algorithm w
38. COMPILERS, USER INTERFACES & THE REST OF US
39. HINDLEY MILNER: REACT
40. COMPILERS, USER INTERFACES & THE REST OF US ⚡ PERFORMANCE ⚙ CODE EXTRACTION Svelte 2016
41. SVELTE
42. SVELTE
43. SVELTE 3 + 4
44. SVELTE 5
46. COMPILERS, USER INTERFACES & THE REST OF US ⚙ CODE EXTRACTION Opa Language 2011
47. COMPILERS, USER INTERFACES & THE REST OF US
48. OPA LANGUAGE: CODE EXTRACTION CLIENT SERVER
49. CODE EXTRACTION…
50. CODE EXTRACTION IN 2000s
51. CODE EXTRACTION IN 2020s
52. COMPILERS, USER INTERFACES & THE REST OF US Compilers and Our Browsers
53. V8 & COMPILERS…
54. V8 & COMPILERS…
55. JAVASCRIPTCORE & COMPILERS…
58. COMPILERS, USER INTERFACES & THE REST OF US Compilers for the Rest of Us
59. COMPILERS, USER INTERFACES & THE REST OF US Compilers For… Me!
60. THIS SECTION PRESENTS… modernizing generating understanding observing querying
61. THIS SECTION PRESENTS… modernizing generating understanding observing querying hundreds thousands millions LOC
62. COMPILERS, USER INTERFACES & THE REST OF US Modernizing thousands of LOC 2018 2022 2025
63. COMPILERS, USER INTERFACES & THE REST OF US Modernizing thousands of LOC 2018 2022 2025
64. REACT 16: DEPRECATED APIS
65. REACT 19: DEPRECATED APIS
66. REACT: CODEMODS
67. COMPILERS, USER INTERFACES & THE REST OF US
68. 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(); = = = }
69. 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(); = = = }
70. CODEMODS: OTHER COMPANIES
71. CODEMODS: OSS
72. CODEMODS: OSS
73. CODEMODS: REGISTRY
74. CODEMODS: BACK THEN…
75. CODEMODS: NOW!
76. COMPILERS, USER INTERFACES & THE REST OF US
77. STATIC ANALYSIS ENABLED… GRADUAL ROLLOUT OF TWO ENTIRELY DIFFERENT, FEATURE -FLAG-PROTECTED, BUILDS OF THE SAME CODEBASE, WITH: ↝ DIFFERENT VERSIONS OF DEPENDENCIES. ↝ DIFFERENT STRATEGIES USED FOR BUNDLING.
78. COMPILERS, USER INTERFACES & THE REST OF US Understanding millions of LOC 2024 2025
79. HYRUM'S LAW
80. HYRUM'S LAW — HTTPS://XKCD.COM/1172
81. HYRUM'S LAW — HTTPS://XKCD.COM/1172
82. HYRUM'S LAW — HTTPS://XKCD.COM/1172
83. HYRUM'S LAW — HTTPS://XKCD.COM/1172
84. HYRUM'S LAW — HTTPS://XKCD.COM/1172
85. HYRUM'S LAW & REACT
86. HYRUM'S LAW & REACT
87. HYRUM'S LAW & REACT
88. HYRUM'S LAW & ME — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
89. COMPILERS, USER INTERFACES & THE REST OF US #1 Understanding HTML Code
90. CASE STUDY: FINDING PATTERNS <span class="validation">Required</span>
91. CASE STUDY: FINDING PATTERNS
92. 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'); } > = = = });
93. 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'); } > = = = });
94. COMPILERS, USER INTERFACES & THE REST OF US #2 Understanding JavaScript Code
95. CASE STUDY: JQUERY
96. CASE STUDY: JQUERY
97. CASE STUDY: JQUERY
98. CASE STUDY: JQUERY
99. CASE STUDY: JQUERY
100. CASE STUDY: JQUERY
101. 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.
102. …AND BECAUSE THEY’RE COMPOSABLE…
103. COMPILERS, USER INTERFACES & THE REST OF US Generating thousands of LOC 2025
104. BUILDING TYPES FROM JSON SAMPLES
105. COMPILERS, USER INTERFACES & THE REST OF US
106. BUILDING TYPES FROM JSON SAMPLES
107. COMPILERS, USER INTERFACES & THE REST OF US
108. 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; }
109. 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'); } }); > = > = | | = = = / / / / / / });
110. 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'); > = > = | | = = = / / / / / / }
111. …AND MUCH MORE!
112. …AND MUCH MORE!
113. COMPILERS, USER INTERFACES & THE REST OF US Observing thousands of LOC 2026
114. 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…
115. BREAKING CHANGES DETECTION
116. BREAKING CHANGES DETECTION
117. COMPILERS, USER INTERFACES & THE REST OF US Querying thousands of LOC 2026
118. QUERYING AN ELEMENT…
119. 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.
120. TYPESAFE DOM LOCATOR DSL
121. TYPESAFE DOM LOCATOR DSL
122. TYPESAFE DOM LOCATOR DSL
123. TYPESAFE DOM LOCATOR DSL
124. COMPILERS, USER INTERFACES & THE REST OF US Closing Thoughts
125. COMPILERS, USER INTERFACES & THE REST OF US Compilers are no #1 longer just for of 2 systems programming.
126. IF LOTS OF THINGS ARE COMPILERS…
127. COMPILERS, USER INTERFACES & THE REST OF US
128. IF LOTS OF THINGS ARE COMPILERS…
129. …LET'S BE CREATIVE ABOUT THEM! — MILLION LINT IS IN PUBLIC BETA • 2024
130. …LET'S BE CREATIVE ABOUT THEM!
131. …LET'S BE CREATIVE ABOUT THEM!
133. …LET'S BE CREATIVE ABOUT THEM!
134. COMPILERS, USER INTERFACES & THE REST OF US Understanding #2 compilers can of 2 make you a better JavaScript developer.
135. THE THINGS WE CAN LEARN…
136. THE THINGS WE CAN LEARN…
138. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
139. COMPILERS ARE FOR THE REST OF US! MATHEUS ALBUQUERQUE • @ythecombinator
140. THAT’S ALL, FOLKS! THANKS! 👋 🇺🇸 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator