What's new in Angular

Summary

In the 'What's New in Angular' session, Minko Gechev, Jessica Janiuk, and Jeremy Elbourn discuss the latest advancements in Angular, focusing on improving developer experience and application performance. They introduce new APIs for building components with Signals, enhancements to developer tooling, and optimizations in the build system with esbuild. The session also covers partial hydration for faster loading, the new Angular logo, and the refreshed documentation site at Angular.dev. They highlight community contributions and explore future possibilities like full zoneless, hot module replacement, and component authoring enhancements.

Takeaways

• 🎉 Angular has been undergoing a renaissance with significant updates and improvements, leading to a resurgence in community interest and usage.
• 🚀 The team has shipped deferrable views, which were highly requested and are now available for developers to enhance their applications.
• 🔄 Angular has also introduced a new control flow syntax, shipped in Angular version 17, aiming to simplify and streamline development processes.
• 🌐 Support for Material 3 has been added in Angular Material, with a corresponding blog post for developers to learn more.
• 📈 Angular Signals have been successfully implemented in YouTube's mobile web traffic, showcasing a significant performance improvement and a major step towards a more reactive framework.
• 🤝 Angular and Wiz, a Google internal web framework, have started collaborating, leading to shared codebases and a stronger focus on performance.
• 🛠️ New APIs for building Angular components and directives with Signals are now available in Developer Preview, offering a cleaner and more efficient coding experience.
• 📱 Performance optimizations have been a key focus, with improvements to the Angular's optimized image directive and the introduction of partial hydration for faster load times.
• ⚙️ Developer tooling has been enhanced, including improved type narrowing in templates, inspection of the application injector tree, and diagnostics to catch common issues.
• 🔧 The Angular CLI has been updated with new features such as automated refactoring to the new control flow syntax and support for new component authoring patterns.
• 🌟 The Angular team is looking towards the future with plans for full zoneless support, hot module replacement, streaming server-side rendering, and further enhancements to component authoring.

Q & A

What is the Angular renaissance mentioned in the script?

The Angular renaissance refers to the renewed interest and positive feedback from the community due to the continuous improvements and new features being introduced in Angular, such as deferrable views, new control flow syntax, and support for Material 3.

What are deferrable views in Angular?

Deferrable views is a feature that was shipped in Angular, which allows developers to load parts of their application on demand, improving the performance of their web apps by reducing initial load time.

What was the purpose of the request for comments (RFC) on deferrable views and the new control flow syntax?

The RFCs were published to gather feedback from the developer community before implementing these features. This helped shape the final implementation of deferrable views and the new control flow syntax in Angular.

How does Angular's collaboration with Wiz impact performance?

The collaboration between Angular and Wiz has led to the adoption of Angular Signals, which are now in production for 100% of YouTube's mobile web traffic, improving interaction latency and frame rates on various Google products.

What are Angular Signals primitives?

Angular Signals primitives are a reactive programming feature that allows for more efficient rendering and state management in Angular applications. They are now being used in YouTube's mobile web traffic, leading to significant performance improvements.

What is the status of Signals as a JavaScript language standard feature?

Signals have reached stage 1 in the JavaScript Standardization Committee, TC39, indicating that they are being considered for inclusion as a standard feature in the JavaScript language.

What are the new Signal-based query APIs in Angular?

The new Signal-based query APIs in Angular provide a Signal of query results for Angular APIs like ViewChild and ContentChildren. They offer a more concise and consistent way to work with query results and improve type inference.

What is the difference between Signal inputs and traditional inputs in Angular?

Signal inputs in Angular are based on the reactive programming model and provide a Signal for input properties. They simplify patterns where developers inspect input values for changes and are read-only to ensure clarity on the state's origin.

Why are outputs in Angular not signal-based?

Outputs in Angular are not signal-based because they work the same way they always have, using event emitters. The decision to keep outputs as they are aims to maintain consistency and simplicity in event handling within Angular components and directives.

What is the new model for two-way binding in Angular using Signals?

The new model for two-way binding in Angular using Signals provides a writeable signal that allows updating values directly, which then propagates changes back through two-way bindings. This simplifies the process compared to the traditional input and output approach.

What improvements has Angular made to its developer tooling?

Angular has improved its developer tooling by leveraging the Angular compiler for catching common issues, introducing inspection of application injector trees, and enhancing type narrowing in templates with the new control flow syntax.

What is the significance of the new Angular logo and the rebranding?

The new Angular logo and rebranding reflect a more future-looking direction for the framework. It's accompanied by a new documentation site at Angular.dev, which modernizes the documentation experience and adds useful features like an interactive Getting Started tutorial.

What are some of the future plans mentioned for Angular?

Some of the future plans for Angular include full zoneless support, hot module replacement, streaming server-side rendering, and enhancements to component authoring to simplify the development experience.

What is the concept of partial hydration in Angular?

Partial hydration is a technique that allows for a more efficient loading of JavaScript by only loading the necessary parts to handle user interactions with specific parts of the page. This can reduce initial bundle sizes and improve Core Web Vitals.

How does the JSAction library support partial hydration in Angular?

JSAction, a library originally created by the Wiz team, supports partial hydration by capturing and queuing user interactions that occur while the page is hydrating. These interactions are then replayed once hydration is complete, ensuring no user actions are lost.

What is the significance of the collaboration between Angular and Firebase teams?

The collaboration between Angular and Firebase teams aims to make Firebase App Hosting the new home for Angular apps, providing support for server-side rendering, client rendering, and pre-rendering, thus enhancing deployment options for Angular applications.

What is the new approach to component authoring that Angular is considering?

Angular is considering a new approach to component authoring that removes the need for component selectors, allowing developers to reference components directly using symbols from JavaScript module imports. This aims to simplify the component authoring experience and reduce boilerplate code.