Marko, View Transitions API, and React Server Components

Marko, View Transitions API, and React Server Components


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

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: