🇺🇸 JSNation US 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, as well as 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 likely be optimistic about a future where compilers understand our entire code and offload a significant portion of our mental burden related to manual tasks.

Transcript

1. COMPILERS, USER INTERFACES & THE REST OF US • NOVEMBER 18, 2025. Hello, New York! 👋 🇺🇸
2. COMPILERS, USER INTERFACES & THE REST OF US • NOVEMBER 18, 2025. Hello, New Jersey! 👋 🇺🇸
3. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
4. Matheus Albuquerque ↝ 👨💻 STAFF SWE @ MEDALLIA ↝ ⚡ GOOGLE DEVELOPER EXPERT ↝ 𝕏 YTHECOMBINATOR
5. Preamble COMPILERS, USER INTERFACES & THE REST OF US
6. ON FRIENDS & PRINTERS… COMPILERS, USER INTERFACES & THE REST OF US 2015
7. COMPILERS &… PRINTERS?
8. COMPILERS &… PRINTERS? AFTER BEFORE
9. COMPILERS &… PRINTERS? AFTER BEFORE
11. COMPILERS &… ME!
13. BACK TO THE FRONT-END REALM… COMPILERS, USER INTERFACES & THE REST OF US 2017
14. COMPILERS, USER INTERFACES & THE REST OF US
15. “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
17. “The thing that has made reactive programming interesting again are compilers.” Marko: Compiling Fine-Grained Reactivity • Ryan Carniato, 2022
18. COMPILERS…
19. ↝ 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…
20. ↝ 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…
21. Compilers and Our Tools COMPILERS, USER INTERFACES & THE REST OF US
22. COMPILERS AND OUR TOOLS…
23. COMPILERS AND OUR TOOLS…
24. REACT COMPILERS, USER INTERFACES & THE REST OF US 2021 ⚡ PERFORMANCE
25. REACT: COMPILER
26. COMPILERS, USER INTERFACES & THE REST OF US #1 Alias Analysis
27. COMPILERS, USER INTERFACES & THE REST OF US
28. ↝ 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. ALIAS ANALYSIS: OVERVIEW
29. ALIAS ANALYSIS: REACT
30. COMPILERS, USER INTERFACES & THE REST OF US #2 Static Single- Assignment Form
31. COMPILERS, USER INTERFACES & THE REST OF US
32. ↝ 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. SSA FORM: OVERVIEW
33. SSA FORM: REACT
34. COMPILERS, USER INTERFACES & THE REST OF US #3 Type Inference & Algorithm w
35. COMPILERS, USER INTERFACES & THE REST OF US
36. HINDLEY MILNER: REACT
37. SVELTE COMPILERS, USER INTERFACES & THE REST OF US 2016 ⚡ PERFORMANCE ⚙ CODE EXTRACTION
38. SVELTE
39. SVELTE
40. SVELTE 3 + 4
41. SVELTE 5
43. OPA LANGUAGE COMPILERS, USER INTERFACES & THE REST OF US 2011 ⚙ CODE EXTRACTION
44. COMPILERS, USER INTERFACES & THE REST OF US
45. OPA LANGUAGE: CODE EXTRACTION SERVER CLIENT
46. CODE EXTRACTION…
47. CODE EXTRACTION IN 2000s
48. CODE EXTRACTION IN 2020s
49. Compilers and Our Browsers COMPILERS, USER INTERFACES & THE REST OF US
50. V8 & COMPILERS…
51. V8 & COMPILERS…
52. JAVASCRIPTCORE & COMPILERS…
55. Compilers for the Rest of Us COMPILERS, USER INTERFACES & THE REST OF US
56. modernizing generating understanding THIS SECTION PRESENTS…
57. modernizing generating understanding hundreds thousands millions THIS SECTION PRESENTS…
58. hundreds thousands millions lines of code! modernizing generating understanding THIS SECTION PRESENTS…
59. MODERNIZING THOUSANDS OF LOC REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ COMPILERS, USER INTERFACES & THE REST OF US 2025 2022 2018
60. MODERNIZING THOUSANDS OF LOC REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ COMPILERS, USER INTERFACES & THE REST OF US 2025 2022 2018
61. REACT 16: DEPRECATED APIS
62. REACT 19: DEPRECATED APIS
63. REACT: CODEMODS
64. COMPILERS, USER INTERFACES & THE REST OF US
65. 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(); }
66. 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(); }
67. 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(); }
68. CODEMODS: OTHER COMPANIES
69. CODEMODS: OSS
70. CODEMODS: OSS
71. CODEMODS: REGISTRY
72. CODEMODS BACK THEN…
73. CODEMODS NOW…
74. COMPILERS, USER INTERFACES & THE REST OF US
75. 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.
76. GENERATING THOUSANDS OF LOC COMPILERS, USER INTERFACES & THE REST OF US 2025
77. BUILDING TYPES FROM JSON SAMPLES
78. COMPILERS, USER INTERFACES & THE REST OF US
79. BUILDING TYPES FROM JSON SAMPLES
80. COMPILERS, USER INTERFACES & THE REST OF US
81. EX.: 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"; }
82. EX.: 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(); } } });
83. EX.: 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(); } } });
84. …AND MUCH MORE!
85. …AND MUCH MORE!
86. UNDERSTANDING MILLIONS OF LOC REACT: INTERNALS AND ADVANCED PERFORMANCE PATTERNS/ COMPILERS, USER INTERFACES & THE REST OF US 2025 2024
87. HYRUM'S LAW
88. HYRUM'S LAW — HTTPS://XKCD.COM/1172
89. HYRUM'S LAW — HTTPS://XKCD.COM/1172
90. HYRUM'S LAW — HTTPS://XKCD.COM/1172
91. HYRUM'S LAW — HTTPS://XKCD.COM/1172
92. HYRUM'S LAW — HTTPS://XKCD.COM/1172
93. HYRUM'S LAW & REACT
94. HYRUM'S LAW & REACT
95. HYRUM'S LAW & ME — BASICS OF THE G2 + MEDALLIA INTEGRATION • G2 DOCUMENTATION
96. CASE STUDY: JAVASCRIPT BLOCKS $('script').each((_, element) = > { const scriptContent = $(element).html(); if (scriptContent) { analyzeJavaScript(scriptContent); } });
97. CASE STUDY: JQUERY
98. CASE STUDY: JQUERY
99. CASE STUDY: JQUERY
100. CASE STUDY: JQUERY
101. CASE STUDY: JQUERY
102. CASE STUDY: JQUERY
103. 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.
104. …AND BECAUSE THEY’RE COMPOSABLE…
105. …AND BECAUSE THEY’RE COMPOSABLE…
106. Closing Thoughts COMPILERS, USER INTERFACES & THE REST OF US
107. #1 of 2 Compilers are no longer just for systems programming. COMPILERS, USER INTERFACES & THE REST OF US
108. EVERYTHING IS A…
109. …LET'S BE CREATIVE ABOUT IT! — MILLION LINT IS IN PUBLIC BETA • 2024
110. …LET'S BE CREATIVE ABOUT IT!
111. …LET'S BE CREATIVE ABOUT IT!
113. …LET'S BE CREATIVE ABOUT IT!
114. #2 of 2 Understanding compilers can make you a better JavaScript developer. COMPILERS, USER INTERFACES & THE REST OF US
115. THE THINGS WE CAN LEARN…
116. THE THINGS WE CAN LEARN…
118. COMPILERS, USER INTERFACES, & THE REST OF US MATHEUS ALBUQUERQUE • @ythecombinator
119. COMPILERS ARE FOR THE REST OF US! MATHEUS ALBUQUERQUE • @ythecombinator
120. MATHEUS ALBUQUERQUE • @ythecombinator ⬆ ALL THE LINKS! THAT’S ALL, FOLKS! THANKS! 👋 🇺🇸 QUESTIONS?