Dev News: Vercel Preps for React 19; New jQuery, pnpm Releases

Vercel is working with the React team to prepare for the upcoming React 19 release and plans to address those changes in a major version in the future. In the meantime, on April 11, Vercel released Next.js 14.2, with enhancements to the release candidate Turbopack for Development.

Vercel has been working on improving local development performance with Turbopack and notes that Turbopack Release Candidate is now available for local development with 99.8% of integration tests passing. The team also verified that the top 300 npm packages used in Next.js applications can compile with Turbopack. All Next.js examples work with Turbopack now and they’ve integrated Lightning CSS, a fast CSS bundler and minifier written in Rust.

Using vercel.com as a testing ground, the team found that TurboPack led to:

• Up to 76.7% faster local server startup;
• Up to 96.3% faster code updates with Fast Refresh; and
• Up to 45.8% faster initial route compile without caching (Turbopack does not have disk caching yet).

That said, Turbopack is still opt-in. The next step will be to improve memory usage, implement persistent caching, and next build --turbo.

Besides Turbopack, version 14.2 focused on overall build and production performance improvements. Among the updates:

• Tree-shaking. The team writes that it identified “an optimization for the boundary between Server and Client Components that allows for tree-shaking unused exports.” So, for instance, if developers import a single icon component from a file that has “use client,” it no longer includes all the other icons from that package, which can “largely reduce the production JavaScript bundle size,” they note. On one popular library with react-aria-components, this reduced the final bundle size by 51.3%. It’s important to note that the optimization doesn’t work with barrel files, and the full blog post suggests what you can do to optimize those using the PackageImports config option.
• Build Memory Usage. Extremely large Next.js applications were getting out-of-memory crashes (OOMs) during production builds. Vercel found the root issue was over-bundling and minification (Next.js created fewer, larger JavaScript files with duplication), so they refactored the bundling logic and optimized the compiler for these cases. Early tests show that on a minimal Next.js app, memory usage and cache file size decreased from 2.2GB to under 190MB on average.
• CSS. Vercel changed how CSS is optimized during production so that the order and merging of CSS chunks is now defined by the import order.
• Caching Improvements in the App Router.
• staleTimes (Experimental). Vercel added an experimental staleTimes option to allow the client-side router cache invalidation period to be configured. “By default, prefetched routes (using the component without the prefetch prop) will be cached for 30 seconds, and if the prefetch prop is set to true, 5 minutes,” the team noted. Developers can overwrite these default values by defining custom revalidation times in next.config.js.

Not Updating jQuery Poses Security, Compliance Concerns

jQuery may not be the web development powerhouse it once was, thanks to modern JavaScript frameworks, but the OpenJS Foundation estimates that 90% of all websites still use JQuery.

jQuery 4.0.0 is expected to be released soon; it became available as a beta release in February. So the jQuery team and OpenJS Foundation are running a Healthy Web checkup campaign to promote updating all sites to it. Security vulnerabilities and security best practices lead a list of reasons why web developers should update their jQuery. Compliance requirements are the third reason web developers should give this problem a closer look.

The jQuery Team provides the jQuery Migrate plugin to make upgrading jQuery as easy as possible.

April 24 Is JavaScript Naked Day

How dependent is your website on JavaScript? April 24 is a good day to find out, because it’s JavaScript Naked Day — a day that calls on web developers to strip JavaScript from their websites. It’s designed to promote the Rule of Least Power, which is a W3C concept that the least powerful language suitable for a given purpose is the one that should be used.

The day also calls on users to disable it in the browser, and even report it as a bug if the site doesn’t function without it, according to the JS Naked Day website (of course there’s a website!).

The site explains that the concept came about during a conversation between Zach Leatherman, Ryan McNeely, Jason Garber and Simon MacDonald.

“JS Naked Day started because we were jealous of CSS Naked Day,” the site added.

It’s worth noting that the site was built using the HTML framework Enhance, which The New Stack covered in more detail earlier this week.

Interactivity API for WordPress

A new Interactivity API for WordPress allows developers to build interactive, dynamic elements within their websites in a standardized way, wrote developer and Automattic Team Lead Manager Even Tobiesen in a Wednesday post about the new API. Automattic helps maintain the open source WordPress and runs WordPress.com.

“Dynamic interactivity like instant search, form handling, and client-side ‘app-like’ navigation where elements can persist across routes, all without a full page reload, can make the web a more efficient and interesting place for all,” Tobiesen wrote. “But creating those experiences on WordPress hasn’t always been the easiest or most straightforward, often requiring complex JavaScript framework setup and maintenance.”

The Interactivity API, a lightweight JavaScript library, was first introduced in 2022 as an experimental plugin but became an official proposal last year. In WordPress 6.5, which was released April 2, it merged into the WordPress Core.

Several core WordPress Blocks, such as the Query Loop, Image and Search blocks, have already adopted the Interactivity API, he added. So, for instance, it’s possible to use the Image block to add an image to a post or page, then when a user clicks on the image, the Interactivity API can launch a lightbox showing a high-resolution version of the image. The rendering of the image is handled server-side, but the client-side interactivity — handling the resizing and opening the Lightbox — are done with the Interactivity API.

“You might say, ‘But I could easily do this with some JavaScript!’” Tobiesen said. “With the Interactivity API, the code is compact and declarative, and you get the context (local state) to handle the lightbox, resizing, side effects, and all of the other needed work here in the store object. The lower-level implementation details, like keeping the server and client side in sync, just work; developers no longer need to account for them.”

He explained how it differs from, say, React, Alpine or Vue — and why that matters.

“For a large open-source project with several contributors, having an agreed-upon standard and native way of providing client-side interactivity speeds up development and greatly improves the developer experience,” he stated.

New Version of pnpm Available

Pnpm version 9.9 was released on Tuesday, April 16. This update discontinues Node.js v16 support and includes corepack compatibility, lockfile changes, dependency resolution changes, and configuration updates, among other changes.

pnpm, or Performant Node Package Manager, is a disk space-efficient package manager designed specifically to address some of the shortcomings of the Node Package Manager (NPM). It’s known for faster installation times, reduced disk space usage, security focus, and improved efficiency for monorepos.