Vue 3.3, Web Vitals Extension, and Interaction to Next Paint

Vue 3.3, Web Vitals Extension, and Interaction to Next Paint

Newsletter

JavaScript Jam Live on Wednesday

This week we'll be having another open mic to discuss the JavaScript news of the week. We'll also be kicking off our final conference collaboration for the season by discussing all the amazing speakers and events that will be happening at RenderATL at the end of this month.

Last week we were at Remix Conf and we've got a lot of content coming your way. You can listen to our conversation with Glauber Costa from Turso and Jamie Barton from Grafbase below and stay tuned for upcoming podcast episodes with Nick Taylor and Christoph Nakazawa.

Stories of the Week

Vue 3.3 - TypeScript, JSX, and Experimental Macros

Vue.js version 3.3, (dubbed "Rurouni Kenshin" in continuation of the previous manga/anime themed code names) has been released, featuring major improvements in developer experience, particularly in the usage of SFC <script setup> with TypeScript. The release resolves many challenges previously faced when using Vue with TypeScript and includes:

  • Expanded support for imported and complex types
  • Advanced type analysis in conjunction with the 1.6 release of Vue Language Tools (previously Volar)
  • Generic components that accept type parameters via the generic attribute
  • A more ergonomic approach to defineEmits
  • Typed slots with defineSlots

Other major enhancements include:

  • Improvements to the defineOptions macro
  • Better getter support with toRef and toValue
  • JSX import source support

The release also introduces experimental features including reactive props destructure (see RFC #502) and the defineModel macro, simplifying the usage of two-way binding with v-model (see RFC #503). The launch also capitalizes on several maintenance infrastructure improvements, resulting in faster builds, tests, and type generation enabling smaller and more frequent releases in 2023.

Web Vitals Extension for Performance Debugging

Google I/O prompted numerous new announcements and releases from the Chrome team, particularly around performance. Firstly, Google's Web Vitals browser extension has been updated with additional debugging information to help developers better understand and resolve performance problems. The extension provides diagnostic information to address Core Web Vital issues.

Each metric has detailed debugging information including features such as element highlighting and breakdowns of time and phases where applicable. The update also allows for "live tracing" of websites enabling developers to interact with a site while identifying potentially slow interactions in the console. The updated extension includes user-friendly console logging/debug info for metrics like:

  • Largest Contentful Paint (LCP)
  • Cumulative Layout Shift (CLS)
  • First Input Delay (FID)
  • Interaction to Next Paint (INP)

Interaction to Next Paint Replaces First Input Delay

Google made another big announcement recently by stating that Interaction to Next Paint (INP) will replace First Input Delay (FID) as a Core Web Vital in March 2024. INP is a metric that measures the responsiveness of a web page, from the time a user interacts with it to the time the page responds. Google believes INP more holistically measures responsiveness than FID.

FID only measures the time it takes for a page to respond to the first user input., whereas INP measures the latency of all user interactions with the webpage. This provides a single value that represents the threshold most interactions fall beneath which makes it a key metric for gauging a webpage's responsiveness to user interactions.

Optimizing INP requires a comprehensive understanding of factors affecting interactivity. Google's series of web.dev articles on INP address this by providing information on how to understand INP, how to identify and reproduce slow interactions in the field and lab, and how to rectify these issues. The guides split optimization strategies into two buckets that can cause poor INP:

  • Excessive JavaScript, such as refining long tasks, reducing input delay, evaluating scripts, and utilizing web workers to run JavaScript off the main browser thread.
  • Slow Rendering, with advice on avoiding complex layouts, reducing the complexity of style calculations, managing large DOM sizes, and the impact of client-side rendering of HTML on interactivity.

You can also check out the announcement video from Google I/O:

Composability Summit

Christopher Burns originally built his company's product Everfund using Gatsby. But after a year of building new features and onboarding more users, he began to feel some pain points of the framework and evaluated whether he should migrate his company's stack to Next.js.

In his Composability Summit talk, Why the perfect framework is not NextJS, Chris explains what a framework is, what would make a framework "perfect," how frameworks could change throughout the third age of JavaScript, and why Next has become so prevalent over Gatsby and others for many developers.

Podcasts of the Week

One More Thing

Lifecycle methods can be one of the trickier concepts to internalize when first learning React, especially without tools that make it easy to see the order of hook-function calls. Libraries like react-lifecycle-visualizer and the newly React 18 compatible react-hook-tracer were created specifically to address this issue.

A gif showing the trace log from react-hook-tracer

They provide interactive logs with real-time visualizations of React's lifecycle methods being called as demonstrated in the above gif. This allows inspecting components inside the rendering process along with their props, state, and refs.

JavaScript Jam on the Web

Find us online at the following links:

Anthony Campolo
Anthony Campolo

💌 Subscribe to JavaScript Jam

Join a growing community of developers. Every monday we share valuable insight, tips, and news surrounding JavaScript and modern web development. We are also live on Twitter Spaces every Wednesday at 12pm PST.

Thank you for subscribing!
Please check your inbox for a link to confirm your email address.

© JavaScript Jam 2024.