JavaScript Jam Live on Wednesday
This week we'll be joined by Dylan Piercey to talk about Marko, the little known framework created by eBay in 2014. Despite its relative obscurity, Marko anticipated many of the current trends in modern frontend frameworks nearly a decade before those trends became prominent.
Last week we spoke to Miško Hevery about Qwik. We discussed what makes Qwik different from other frameworks and the techniques it utilizes to ensure applications built with it are highly performant.
Articles of the Week
Measuring Core Web Vitals on Single-Page Applications
Traditionally, Core Web Vitals were designed for measuring the performance of individual web pages and the time it took for all necessary resources to be loaded for an individual page. However, this ignores the time it takes for a user to navigate from one page to another with "soft navigations," which is one of the core strengths of singe-page applications.
Thus, CWVs have previously not provided great metrics for evaluating the performance of a single-page application in contrast to a multi-page application. In How to measure CWVs on SPAs, Estela Franco provides instructions for measuring soft navigations in Chrome. This can be achieved in two ways, either with a PerformanceObserver
or by using web-vitals.js
.
Building SPAs in Chrome 111 with the View Transition API
The View Transition API allows page transitions within single-page apps, and will later include multi-page apps. The API lets you update the DOM in a single step, while generating an animated transition between the two states. Frequently requested by developers, the feature was added to Chrome 111+.
Check out the announcement article, SPA view transitions land in Chrome 111, by Jake Archibald to find out how to start using them. To learn even more about the API you can check out the following extensive guide, Smooth and simple transitions with the View Transitions API.
Announcing TypeScript 5.0
Microsoft has recently announced the release of TypeScript 5.0 which is focused on making the language smaller, simpler, and faster while bringing in several new features and improvements. Here are some of the new features included in the 5th major version:
- New decorators standard
- Improved ESM support for Node projects and bundlers
- Novel ways for library authors to control generic inference
- Expanded JSDoc functionality
- Simplified configuration
RSC Live Stream with KCD, Dan Abramov, and Joe Savona
Kent C. Dodds streamed a conversation with Dan Abramov and Joe Savona about React Server Components where he asked many clarifying questions about the new paradigm along with questions to clarify his concerns about potential drawbacks. If you don't want to watch the whole video, Kent provided a summary of the discussion on his blog.
Composability Summit
In Micro Frontend and Web Components and Stencil, Anthony Giuliano explains how to build micro frontends as web components with Stencil. He shows how web components can make micro frontends framework agnostic and therefore more easily composable.
Podcasts of the Week
- JS Party - The future of React with Dan Abramov and Joe Savona
- PodRocket - Streaming server rendering with Suspense with Shaundai Person
- Frontend First - Server Components and the React paradigm
- PodRocket - Building Elk with Daniel Roe
- DevtoolsFM - Fermyon with Matt Butcher
- PodRocket - Living on the Edge with Anthony Campolo (hey that's me!)
One More Thing
Watch Dev Agrawal give a rundown on the security incident that happened this month on Loom in How To Screw Up Auth and CDN Caching. The video breaks down the CDN misconfiguration which resulted in the reported issues.
JavaScript Jam on the Web
Find us online at the following links: