Compilers, User Interfaces & the Rest of Us

Bookmark
Rate this content

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!

This talk has been presented at JSNation US 2025, check out the latest edition of this JavaScript Conference.

FAQ

The main theme of the talk is about compilers, user interfaces, and how compilers are deeply embedded in the development and optimization of web applications.

The speaker is a developer at Medaglia, a GDE in Web Technologies, known online as Wide Accommodator. They have a background in working with compilers and frontend technologies.

Zebra Programming Language (ZPL) is a language used to program Zebra labelers, consisting of instructions for printing and positioning, which is considered hard to write.

In 2018, Dominic Ganaway predicted that JavaScript frameworks would start becoming JavaScript compilers, enhancing optimization and efficiency.

Compilers are utilized in frontend development for tasks such as static analysis, optimization, bundling, transpiling, type checking, minification, and handling CSS.

Understanding compilers helps developers better evaluate frameworks, debug edge cases, and influence architectural decisions, making them more proficient in JavaScript and frontend development.

Elias analysis in the React compiler is a technique that helps determine if variables refer to the same underlying data, optimizing code efficiency.

In compiler theory, SSA form ensures every variable has a single definition, simplifying the maintenance of use-defined chains and enabling powerful optimization techniques.

JSCodeShift and ts-morph are mentioned as tools for running large-scale code migrations, aiding in refactoring and type transformations in frontend projects.

Hiram's Law states that when you depend on an API, you also depend on its implementation details, highlighting the potential for breaking changes in software development.

Matheus Albuquerque
Matheus Albuquerque
29 min
17 Nov, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Speaker shared a story of creating a Haskell-inspired language for Zebra labelers using a compiler. Discussed the evolution of JS frameworks into compilers, focusing on React compiler's advanced techniques. Highlighted the role of compilers in reactive programming and code optimization. Explored challenges in large-scale migration using tools like tsmorph and QuickType. Emphasized the significance of compilers in user interface development and software architecture decisions. Addressed the future of front-end tools, Web Assembly adoption, and the importance of experimentation with tools for project success.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

The State of the Web
JSNation 2025JSNation 2025
32 min
The State of the Web
Sasha Grief discusses the state of the web through web development surveys, leading to an interactive quiz about the state of JS and usage of front end frameworks. Discussion on popular front-end libraries like React, Vue, Angular, and the rising popularity of TypeScript among developers in recent surveys. Discussion on TypeScript adoption, TC39 committee proposals, favorite CSS feature 'has,' and browser support for 'has' selector. Browser interoperability, browser vendors' initiatives, AI usage among web developers, and survey insights. Job titles linked to higher income, diversity of survey topics, top hobby among developers, and popular specific video games. Learnings on CSS features, TypeScript default, AI usage, survey benefits, challenges in reaching diverse survey participants. Surprising positivity in JavaScript usage, stable framework landscape, AI adoption challenges, mainstream AI tools, successful situp.js survey. Inconsistent respondent numbers, manual data normalization efforts, subjective question selection process, community input, mitigation of selection bias. Reason for starting surveys, transition from Meteor JS, exploration of JavaScript ecosystem.
Remix: Embracing Web Standards to Redefine Modern Web Development
React Advanced 2023React Advanced 2023
26 min
Remix: Embracing Web Standards to Redefine Modern Web Development
Top Content
Watch video: Remix: Embracing Web Standards to Redefine Modern Web Development
Remix is a web development framework that combines the scalability of server-rendered frameworks with the flexibility of React. It prioritizes web standards and best practices for security. Remix streamlines development with web standards like URLs, fetch API, HTML, and HTTP caching. It simplifies data handling through HTML forms and HTTP, improving user experience. Httpication in Remix reduces server load and speeds up response time, while global search and Storyblock make building complex websites easier.
What is "TC39: Type Annotations" aka the Types as Comments proposal
TypeScript Congress 2023TypeScript Congress 2023
27 min
What is "TC39: Type Annotations" aka the Types as Comments proposal
Top Content
The TC59 Type Annotations proposal, also known as Types with Comments, introduces the ability to run typed code in JavaScript. It aims to bring TypeScript back into JavaScript and create a separation between type system and runtime. TypeScript's popularity is on par with JavaScript, raising concerns about the influence of Microsoft. The proposal progresses by addressing runtime interaction and token soup in type specifications. Research, community involvement, and quantifying the effects of supporting this comment style are important goals.
Temporal: The Curious Incident of the Wrong Nighttime
JSNation 2025JSNation 2025
25 min
Temporal: The Curious Incident of the Wrong Nighttime
Speaker's involvement in Temporal proposal and TC39 meetings for JavaScript standardization. Date conversion challenges faced in development. Addressing time zone discrepancies with Temporal to prevent bugs. Exploration of Temporal types and design philosophy. Usage of Java's time zone serialization in JavaScript Temporal. Challenges in implementing Temporal proposal and its transformative potential in ECMAScript.
Superpowers of Browser’s Web API
React Advanced 2023React Advanced 2023
23 min
Superpowers of Browser’s Web API
Watch video: Superpowers of Browser’s Web API
Today's Talk explores various Web APIs and their functionalities, including the Intersection Observer API for element visibility, the Network API for connection detection, and the Background Sync API for offline capabilities. The Broadcast Channel API enables communication between components and the Beacon, Web Speech, Web Share, Screen Awake Lock, Page Visibility, Background Fetch, and Web Authentication APIs offer additional functionalities. These standardized APIs work across browsers and can improve performance while reducing electricity consumption.
Web Push Notifications Done Right
JSNation 2023JSNation 2023
11 min
Web Push Notifications Done Right
Let's talk about web push notifications and their benefits. Web push notifications have higher opt-in and click rates compared to traditional methods. The web push API should be used responsibly, with subscription requests initiated only after explicit user action. Improve engagement by using emojis in notifications. Connect with the speaker on LinkedIn for more information about the web push API.