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
- A more ergonomic approach to
- Typed slots with
Other major enhancements include:
- Improvements to the
- Better getter support with
- 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:
- 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:
- Igor Gassmann - 5 Lessons Learned From Taking Next.js App Router to Production
- Alen Ajam - How to Structure Your Next.js App With the New App Router
- GitHub Blog - All GitHub Actions will run on Node 16 instead of Node 12
- Herrington Dackholme - Grok React Server Component by Quizzes
- React Core Team - React Canaries: Enabling Incremental Feature Rollout Outside Meta
- Silvestar - How to measure page loading time with Performance API
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.
Podcasts of the Week
- PodRocket - Redux Toolkit with Mark Erikson
- PodRocket - Modern, Maintainable Node.js Architecture with Juri Strumpflohner
- DevtoolsFM - Prisma with Sabin Adams
- Svelte Radio - A Primer on AI for Developers with Swyx
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.
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.
Find us online at the following links: