Improving and simplifying the developer experience is a major theme we started to work on in 2022 and will continue into 2023 and beyond. We are excited to see the first step launch in v14 with Standalone components in developer preview. This is only the start in rethinking the developer journey and experience, with an emphasis on the initial learning journey.
We are increasing our investment in partnerships to help evolve Angular along with the web ecosystem. Through our partnership with Project Aurora on a faster and more accessible Web, including creating a new image component and investigating hydration improvements. We are also partnering with other Google 3P teams to create a smoother developer journey across products.
We have a fantastic community of contributors that gives us inspiration and continues to impress us with their contributions. We are thrilled that we are able to deliver Typed forms in v14 to address the top-voted feature request. As part of our commitment to continue listening to your feedback and to be a good partner, we decreased the outstanding PRs to be below 100 and Feature requests to be below 1300.
Continue reading to learn more about all of these efforts and how we are moving toward our goals.
New development experiences with Standalone Components
Standalone components are simplifying Angular in meaningful ways. Developers getting started with the framework will face fewer concepts on their critical learning path to getting their first apps built with Angular.
We are thrilled to be able to release standalone components as a developer preview feature in v14, giving the community a chance to try them out.
Here’s an example:https://blog.angular.io/media/199abfb98d463330ddaf1328867dd69eExample of Standalone Component in Angular
We’re excited to hear community feedback and experiences. Standalone components will continue to evolve with the goal of leaving developer preview at the latest by Angular v15.
Other opportunities to simplify Angular
Standalone components are not the only way that we are looking at simplifying the Angular developer experience. As we look at Angular and where the framework can go long term, we’ve come across some areas that we believe can have an incredibly positive impact on Angular developers everywhere. We want to make Angular increasingly frictionless for developers of all skill levels.
Angular’s Ivy engine establishes the technical foundation upon which we can evolve Angular in unprecedented ways. This year, we are embarking on a deep and critical reevaluation of our component model, authoring experience, and reactivity system. In particular, we are digging into how Angular’s pull-based change detection system, usage of RxJS, and dependence on Zone.js shape the authoring experience for Angular developers. In this reevaluation, we are always drawing inspiration from innovations in the broader web ecosystem.
Also, the team is currently developing new content for YouTube including content and tutorials to better support developers during their learning experience.
We believe with the conceptual simplifications we’re working on in the framework, we can create a smoother “getting started” journey in the documentation by creating a modern guide that covers the essentials. We want to provide developers with enough of a foundation that they can quickly go to their favorite IDE and build their next great app, and have the documentation as a resource to light the path forward.
We’re also working on new developer guides. Angular’s core features are getting rethought and reworked to provide tutorials and code examples to match the needs of the Angular community.
Our story, however, doesn’t end there. We have multiple upcoming and in-progress projects as a part of our vision for the future of Angular. Let’s continue our journey toward the future of Angular.
Welcome, Typed Forms!
Typed forms are the most requested feature of all time by users and they are coming to Angular. Before this change, interacting with form data required developers to handle the `any` type when accessing form values. This can lead to hard-to-diagnose bugs in your code. With the introduction of Typed forms, developers will be able to work with form values with confidence by taking advantage of TypeScript’s type checking features. Now, developers will benefit from type-related errors during compile time and not at runtime.
Here’s an example:https://blog.angular.io/media/9b7b25773997dd4e2a6d5429f91f7b04Example of TypedForms in Angular
The power of typing in forms gives developers the chance to find errors before their users do — improving the experience for everyone.
We’re implementing this feature in a backwards-compatible way that uses schematics to move existing projects forward. We know that many of you are eager to try them out in v14 and we can’t wait to receive your feedback.
Angular and the Web
The web is moving incredibly fast and Angular is growing and adapting along with it. One of the ways we’re able to do this is by collaborating with Project Aurora on a faster and more accessible Web. On this front, developers can expect consistent improvements in Core Web Vitals and tooling that support building for everyone.
Here are more projects that we’re actively exploring:
Improvements in the server-side rendering pipeline with hydration
Outreach and guides to help you navigate in the evolving ecosystem
We are involved in the standardization process, providing input and feedback to help evolve web standards to suit the needs of developers.
We’re also working on an image component designed to help Angular developers leverage various image optimization techniques. The goal of this project is to provide an optimization-rich component that targets improving Core Web Vitals scores.
Our integration with Firebase and Google Cloud products continues to provide significant value to the Angular development experience. Developers benefit from the custom integration via the AngularFire package that gives users the ability to deploy an application to Firebase with a few commands.
While Angular is a front-end framework, there’s still the server side aspect to modern web development. Next, we’ll share our thoughts on what’s next for Angular in this area.
Investing in hydration
After server-side rendering produces the page HTML, and the browser renders and loads the associated scripts, the client-side logic needs to take over the page. Two popular approaches in front-end frameworks are:
Destructive hydration: client-side scripts destroy the DOM and rerender it producing the same structure.
Hydration: client-side scripts traverse the DOM, attach event listeners, and build internal data structures.
To the end user, both approaches are mostly equivalent. We worked with Chrome’s metrics teams to ensure Core Web Vitals does not penalize either of them. The first approach, however, is often suboptimal. It requires additional operations and blocks us from implementing advanced optimizations (finer grained page loading, for example).
Currently, Angular implements the first “destructive hydration” approach. In the second part of the year, we will spend time working through the strategies and exploring solutions for the Angular non-destructive hydration approach. While this is a large effort, we are motivated to dive into this area and have conversations with experts both at Google and external to find a path to deliver a better experience. We’ll share more updates later this year in an upcoming post.
We’re committed to innovate the framework while providing backwards-compatible experience. We’ll keep the community posted on our updates, so make sure you follow us on social media and watch for updates and new RFCs.
Listening to the Community
Speaking of community, we have a fantastic community of contributors that continues to impress us with its contributions. Whether these come in the form of feedback on the request for comments proposals (RFC), feature requests issues, or pull requests on GitHub, we value all of the feedback. We want to continue to hear from our community, so we’ve created multiple channels to connect with us.
Over the past year, we addressed over 5000 issues and processed thousands of pull requests.
Currently, there are fewer than 100 open PRs in the Angular repository for 625k lines of code. Our repository health is important to the team. Back in 2020, we invested up to 50% of our engineering capacity on triaging issues and PRs until we had a clear understanding of broader community needs. Since then, we’ve committed up to 20% of our engineering capacity to keep up with new submissions promptly.
The team has also spent time developing new avenues to communicate directly with the team as a community. We have monthly live streams on our YouTube channel, AMAs on Twitter, as well as partnering with community groups for events like State of Angular, where we get to connect with you all directly. Our goal is to continue to listen and learn from our community.
Even with all that we’ve shared in this post, there is more we can’t share publicly just yet. We have excellent opportunities that we’re exploring and the best way to stay up-to-date on which projects we’re working on is via our public roadmap.
There are so many great days ahead for Angular and we couldn’t be more excited. The Angular community is so much of what makes Angular special and we couldn’t paint such a bright future for Angular without you. What do you think about what’s next for Angular? Let us know in the comments.
We use analytics to understand the usage, to improve user experience and to measure the performance of our website. We anonymise any information we may collate so we can’t identify you personally.