Node v20, Fetch Priority API, Breaking React Query's API

Node v20, Fetch Priority API, Breaking React Query's API


JavaScript Jam Live on Wednesday

This week we'll be speaking with Mr. Remix himself, Kent C. Dodds, about the upcoming Remix Conference, why he's excited about the event, and what attendees can expect to see while they're there. Set your reminder on Twitter.

Last week we hosted back-to-back Twitter Spaces while at React Miami including a conversation with Facundo Giuliani about the Art of Personalized, Custom Experiences and a recap with event speakers about their experience speaking at the conference.

News of the Week

Node v20 and the Permission Model

The newest version of Node includes experimental support for a new permissioning model (likely inspired by Deno's more security focused runtime constraints) to control access to system resources and actions that can be taken with those resources. The model distinguishes between two distinct forms of permissions:

  • Module-based permissions control access to files or URLs by other modules.
  • Process-based permissions regulate the Node.js process's access to resources.

The documentation discusses the experimental support for creating policies on loading code, highlighting the importance of safe practices for policy files. The Permission Model is a mechanism for restricting access to specific resources during execution and can be enabled with the --experimental-permission flag.

Fetch Priority API for Optimized Resource Loading

Optimizing resource loading with the Fetch Priority API explores the Fetch Priority API and the fetchpriority HTML attribute, which allow developers to optimize the loading order of resources on web pages by hinting at their relative priority. These features can help improve Core Web Vitals, such as boosting the priority of the Largest Contentful Paint (LCP) image or adjusting the priority of async scripts.

The Fetch Priority API complements existing resource hints, such as preload and preconnect, and provides more control over resource loading. The fetchpriority attribute can be applied to link, img, and script tags, and accepts values of 'high', 'low', or 'auto', giving developers the ability to influence resource priorities and optimize page performance. Fetch Priority is available in Chrome 101 or later.

Breaking React Query's API

TkDodo discusses the challenges of designing APIs for library interfaces, emphasizing the importance of balancing flexibility and simplicity in his article Breaking React Query's API on purpose. He points out that it's difficult to "get it right" on the first try.

This is because modifying or removing existing APIs requires major version updates that are often unpopular. Highlighting React Query's controversial decision to remove the onSuccess, onError, and onSettled callbacks from useQuery in v5, he cites a lack of good use-cases and the API's inconsistency as the main reasons for the change.

Next.js 13.3 and Astro 2.2

Next.js 13.3 adds popular community-requested features including the File-Based Metadata API, Dynamic Open Graph Images, Static Export for App Router, and Parallel Routes and Interception. Astro 2.2 adds CDN support for deploying assets to an external CDN and makes a change to the image() schema helper.

Composability Summit

In Nuxt and the Composable Web, Daniel Roe takes a tour of Nuxt 3 by creating, building, and deploying a real, live-coded app to a serverless environment. He discusses the changing requirements in today's serverless world and how that makes a difference for UX and performance.

Podcasts of the Week

One More Thing

Check out Brad Traversy's newly released ChatGPT Crash Course that demonstrates close to a dozen practical use cases for developers including providing code feedback, implementing specific solutions, generating sample data/documentation, explaining error messages, writing tests, and building user interfaces and layouts.

JavaScript Jam on the Web

Find us online at the following links: