Frameworks: do we still need them, or are they the new platform?

It’s been almost 15 years since JavaScript frontend frameworks first came out. Since then they’ve essentially taken over frontend development. These days very little Web application development is done without the use of some framework. Moreover, JavaScript frameworks are starting to take over backend development as well, in order to provide features such as SSR, SSG and Server Components. Given all this it’s worthwhile to reflect on what exactly constitutes a modern framework? What differentiates frameworks from each other? Why are some frameworks significantly more successful than others? Is there any possibility that enhancements to the platform itself will someday make frameworks obsolete, or conversely is the platform itself becoming irrelevant? These are the fundamental questions that I will tackle in this talk.

Contents:
1. What is a framework (and what is a meta-framework)
2. What’s the main benefit of using a framework
3. The different types of frameworks
4. Is the platform becoming a framework, or are frameworks the new platform?
5. What are the keys to framework success?

Which frontend framework is the fastest?

Wondering which framework is most likely to produce the fastest loading websites? Google collects performance information from all sessions on opted-in Chrome browsers into its Chrome User Experience Report (CrUX) database. It then uses this information as a ranking signal for its search engine, but it also makes this information available for everyone to view. I used this data to analyze and compare the performance of the leading JavaScript frameworks. Along the way I encountered several surprising results, and solved at least one mystery. See how your favorite framework ranks vs all the rest!

Strength in Weakness: JavaScript Memory Management and Weak References

Garbage Collection (GC) in JavaScript is supposed to simplify and automate memory management. But it turns out that there are various scenarios where GC can get in the way, and avoiding resource leaks becomes challenging. In order to overcome such issues, the ECMAScript standard includes WeakMap and WeakSet. Also, Chrome recently added support for WeakRef and FinalizationRegistry, which will soon be part of the standard as well. In this presentation I explain what these are, why they're needed, and provide concrete usage examples and best practices.

Overcoming the performance cost of modern Web frameworks

Modern JavaScript frameworks overcame the rendering performance limitations of Single-Page Applications (SPAs) by introducing Server-Side Rendering (SSR) and Static Site Generation (SSG). Unfortunately at the same time they created a potentially worse problem: unresponsive user interfaces. This is due to the need to hydrate UIs generated by SSR/SSG using client-side JavaScript before they can respond to user interactions. Recently frameworks have started to focus on this issue and tackle it using a variety of different approaches. These approaches include: React Server Components (RSC). islands of hydration, selective hydration, progressive enhancement, and resumability. In this talk I will describe these approaches, and highlight their benefits and limitations. This will enable you to determine which approach best meets your and your users needs.

The introduction of SSR and SSG have simultaneously been a big step forward and a big step back for Web performance. SPAs cannot achieve good startup rendering speed without SSR / SSG. But using these techniques often results in UIs that are initially unresponsive or slow to respond to user interactions. This is due to the requirement to hydrate such UIs before they can become interactive. Fortunately frameworks are now starting to tackle this limitation head-on using a variety of methods. I have investigated these methods, including interviewing their creators (Dan Abramove, Misko Hevery, Ryan Ryan Carniato, etc.), and this talk is a summary of what I have learned.

Introduction to Prometheus and Grafana for monitoring and alerting

Prometheus is a powerful Open Source platform for collecting system metric data, querying this data, and specifying alerts for it. It's especially appropriate for multi-dimensional time series data, such as throughput, performance and availability. It automatically monitors standard NodeJS metrics, as well as enabling the creation of custom, app-specific metrics. Prometheus integrates with Grafana, an Open Source analytics and interactive visualization web application, for sophisticated yet straightforward data analysis. In this session I provide an overview of these services, and their internal operation. I explain how best integrate them into your environment, and get the most value from them. This is based on our extensive utilization of Prometheus and Grafana across our entire system.

The hidden framework revolution: the comeback of RPC

A major shift is taking place in frontend programming that is mostly going unnoticed: the comeback of RPC (Remote Procedure Call). Leading frameworks, such as React, Qwik and Solid are embracing RPC as the preferred mechanism for accessing backend services and data from the frontend in the form of server components, server actions, and server functions. This is surprising because RPC used to be big in the 90s but fell out of favor when the Web took off, replaced by protocols such as REST and GraphQL. Now RPC is back and replacing these protocols instead. What’s driving this resurgence? Why is it happening now? What’s its impact on the way we implement frontends? In this talk I will answer these questions and explain how to achieve the benefits of RPC, avoid its limitations and make the most from this technological comeback.

React Server Components, server$ in Qwik, Solid server functions, tRPC and more are embracing RPC as the underlying method for invoking services and retrieving data from the backend. Yet each one is implementing it in a different manner. In this talk I will review and compare these RPC implementations, and also explain:
1. What is RPC, its benefits and drawbacks
2. Understanding the evolution of network protocols, coding practices, and front-end frameworks
3. Synchronous vs asynchronous approaches to data exchange
4. The impact of typing on modern front-end development
I've researched and discussed this topic with creators of various frameworks such as Miško Hevery (creator of Angular and Qwik) and Ryan Carniato (creator of Solid).