Dev News: Angular v16, Next.js Updates and Prep for Deno 2.0
Angular v16 is the biggest release since the initial rollout of Angular, with “large leaps in reactivity, server-side rendering, and tooling,” according to Angular product lead Minko Gechev on Wednesday. The new release includes a new reactivity model for Angular, which improves performance and developer experience, he added.
It enables better runtime performance by reducing the number of computations during change detection, Gechev wrote. It also supports fine-grained reactivity — in future releases, that will allow the team to check for changes only in affected components.
We recently wrote about Angular 16, but the official release announcement adds more information. New additions include:
- The Angular signal library allows developers to define reactive values and express dependencies between them.
- RxJS Interoperability. ”You’ll be able to easily “lift” signals to observables via functions from @angular/core/rxjs-interop which is in developer preview as part of the v16 release!”, the post explained. “We are introducing a new RxJS operator called takeUntilDestroy… by default, this operator will inject the current cleanup context.”
- Server-side rendering, a number one opportunity for improving Angular, Gechev wrote, and part of the announcement included news that they’ve launched a developer preview of full app non-destructive hydration. Angular partnered with the Chrome Aurora team to improve the performance and DX of the hydration and server-side rendering.
“In the new full app non-destructive hydration, Angular no longer re-renders the application from scratch,” Gechev wrote. “Instead, the framework looks up existing DOM nodes while building internal data structures and attaches event listeners to those nodes.”
That means no more content flickering on an end-user page, easy integration with existing apps, better web core vitals in certain scenarios and future-proofing the architecture to enable fine-grained code loading with primitives that will ship later this year, he wrote. Early tests show up to 45% improvement of the largest contentful paint with full app hydration, he added.
Version 16 also enables support for TypeScript 5.0, with support for ECMAScript decorators.
There’s also a reminder in the post that Angular will be removing the legacy, non-MDC-based components in v17. A migration guide is available.
Next.js 13.4 Features New App Router
Since the release of Next.js 13 six months ago, the team at Vercel — which created the open source web development framework — has been focused on building “the foundations for the future of Next.js — App Router — in a way that can be incrementally adopted without unnecessary breaking changes,” wrote Next.js lead maintainer Tim Neutkens and Vercel Engineer Sebastian Markbåge.
The release of 13.4 means developers can now start adopting the new router for production.
Next.js is starting to get a bit long in the tooth — it was built six years ago. Its expansion and what developers want to achieve with it has expanded over the years, and that’s created some hiccups, some of which this release aims to correct. For example, one founding principle for Next.js was, “Zero setup. Use the filesystem as an API.” Maintaining this has been tricky as developers have used it for more support for defining layouts, nesting pieces of UI as layouts, and more flexibility over defining loading and error states, the post explained.
“To make our router compatible with streaming, and to solve these requests for enhanced support for layouts, we set out to build a new version of our router,” the blog post stated. “With the Pages Router, layouts were not able to be composed, and data fetching could not be colocated with the component. With the new App Router, this is now supported.”
The App Router also allows developers to fetch data using async and await syntax — without an API.
“By default, all components are React Server Components, so data fetching happens securely on the server,” the post states. ”Critically, the “data fetching is up to the developer” principle is realized. You can fetch data and compose any component. And not just first-party components, but any component in the Server Components ecosystem, like a Twitter embed react-tweet, which has been designed to integrate with Server Components and run entirely on the server.”
The complete post details all the ways Next.js is going back to its core design principles with this new App Router, and provides a short FAQ about the impact of App Router.
Laying the Groundwork for Deno 2
The Deno team is working toward a major release of Deno 2 this year, but first, it’s released Deno v1.33. Deno is a Rust-based runtime for JavaScript, TypeScript, and WebAssembly.
The end goal will be effortless coding, more security features and best-in-class performance, the team wrote. To that effort, Dino 1.33 includes updates such as a built-in KV database and improvements to npm and Node compatibility.
DenoKV is an integrated database within Deno. Developers can start building apps without worrying about installing dependencies, the blog announcement stated. It also adds, however, that KV is currently an unstable API, so devs will need the –unstable flag to use it.
“This release brings a huge quality of life improvement when working with dynamic imports,” the blog added. ”If you use a string literal in an import() call (e.g. import(“https://deno.land/std/version.ts”)) Deno will no longer require a permission to execute this import.”
The change makes it easier to conditionally execute some code in certain situations, the blog post noted, citing a CLI tool that includes many subcommands, and developers might want to “conditionally log their respective handlers only when the subcommands is invoked.” Doing so will significantly improve the startup tie of your tool, the team wrote.
Deno has improved cache handling for npm packages, as well.
“Starting with this release, Deno will try its best to retrieve information from the registry when it encounters a missing version (or a version mismatch) of a package in the cache,” the post stated. This should result in a lot fewer messages suggesting to use –reload flag to retrieve the latest registry information.”
