Speaker

Dan Shappir

Dan Shappir

I love the Open Web, software development, and good performance

Tel Aviv, Israel

Dan Shappir is the Performance Tech Lead at NEXT Insurance. Dan has over 25 years of software development experience, and has worked on systems ranging from multiuser games to missile trajectory simulations to designing and building large-scale Web applications. He is a frequent speaker at technical conferences, a host and panelist on the JavaScript Jabber podcast, and an Invited Expert on the W3C Web Performance Working Group. Dan holds an MSc in Computer Science.

Area of Expertise

  • Information & Communications Technology

Topics

  • JavaScript
  • JavaScript & TypeScript
  • Web Development
  • Web Performance
  • Web Frontend

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!

The ins and outs of Core Web Vitals

Ever since Google announced the webpage performance, as measured by Core Web Vitals (CWV) is a ranking factor starting May 2021, it has become the de-facto standard for measuring performance on the web. But while they seem straightforward, it turns out the CWV are anything but.

In this talk we will dive into the technical details of CWV, and understand what they actually measure, and how they themselves are measured. What you learn in this talk will definitely surprise you!

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).

Dan Shappir

I love the Open Web, software development, and good performance

Tel Aviv, Israel