Angular v18 is now out!
developrec
We're a leading contributor to the software engineering community & an award-winning recruitment business.
Welcome back to our newsletter!
Angular released the v18 and now it's generally available for developers. There are several good updates, but the most promising and exciting one is the Zoneless change detection, which ensures flawless integration.
Let's dive into the news you`ll enjoy!
Advancing Change Detection
Historically, Angular has relied on a library called zone.js to manage change detection. However, this approach has had several drawbacks related to performance and developer experience. After years of development, the Angular team is excited to announce the first experimental APIs for using Angular without zone.js.
Starting today, developers can experiment with zoneless support in Angular. To enable this feature, simply add provideExperimentalZonelessChangeDetection to your application bootstrap.
bootstrapApplication(App, {
? providers: [
??? provideExperimentalZonelessChangeDetection()
? ]
});
Zoneless offers several advantages for developers:
Enhanced composability for micro-frontends and better interoperability with other frameworks, faster initial render and runtime, smaller bundle size and quicker page loads, more readable stack traces, easier debugging.
@Component({
? ...
? template: `
??? <h1>Hello from {{ name() }}!</h1>
??? <button (click)="handleClick()">Go Zoneless</button>
? `,
})
export class App {
? protected name = signal('Angular');
? handleClick() {
??? this.name.set('Zoneless Angular');
? }
}
In the example above, clicking the button calls the handleClick method, updating the signal value and the UI. This process is similar to how it works with zone.js, but with some differences. With zone.js, Angular ran change detection whenever the application state might have changed.
Without zones, Angular limits this checking to specific triggers like signal updates. Additionally, a new scheduler with coalescing is included to prevent multiple consecutive change checks.
领英推荐
Updating to Zoneless
Angular is undergoing an exciting evolution, and zoneless is a key part of this transformation. As we evolve the framework, we ensure that all existing APIs continue to work as expected and that there's strong interoperability with new features introduced to Angular.
Zoneless exemplifies our commitment to interoperability. We also aim to make transitioning existing applications to zoneless as simple as possible. If your components use Angular’s ChangeDetectionStrategy. OnPush, they should be mostly compatible with zoneless, ensuring a seamless transition!
Native Await for Zoneless Apps
Zone.js intercepts many browser calls to integrate Angular’s change detection. However, it can't fully support async/await, requiring downleveling to promises via the Angular CLI. This is suboptimal since modern browsers natively support async/await, which are more expressive and optimized.
With the new experimental zoneless change detection, Angular CLI now uses native async/await without downleveling to promises. This change improves debugging and reduces bundle sizes.
Components Support Zoneless
Zoneless support has been enabled in the Angular CDK and Angular Material. This update helped identify and refine some rough edges in the zoneless model.
New Home for Angular Developers
The Angular team has launched angular.dev as the official documentation website. Over the past 18 months, they have worked hard to create an intuitive getting started journey and improve in-depth guides.
The new site offers a modern design, an interactive hands-on tutorial using WebContainers, an example playground, better search powered by Algolia, updated guides, simplified navigation, and more!
All requests to angular.io now automatically redirect to angular.dev. To ensure all existing links still work, developers are forwarded to v17.angular.io.
Visit angular.dev to explore the new site!
Enhanced Debugging Experience
Angular DevTools has been updated to visualize Angular's hydration process. Next to each component, there's now an icon indicating its hydration status. Enabling overlay mode allows you to preview the components Angular has hydrated on the page. Additionally, any hydration errors in your app will be visualized in the component explorer of Angular DevTools.
Stable Release of Deferrable Views
After six months of anticipation, deferrable views are now stable! Developers have expressed excitement over how these views effortlessly enhance Core Web Vitals. For instance, Bill.com reported a 50% reduction in bundle size by using @defer in one of their apps. You can now confidently incorporate deferrable views into your applications and libraries.
Stable Release of Built-in Control Flow
Accompanying deferrable views in v17 is the stable release of built-in control flow, featuring enhanced performance. This new syntax has been widely adopted, and after incorporating community feedback, the API is now stable!
Throughout the preview period, enhancements were made to the control flow's type checking, implicit variable aliasing was made more ergonomic, and guardrails were implemented for certain performance-related anti-patterns.
?? Hot Web Development Jobs by develop ??
Are you following us?
Frontend/Angular/JavaScript Developer
5 个月Great news that promises to speed up applications and make them easier to debug.