Google Engineer Outlines What’s Next for Angular
The release of Angular version 15 is planned for November, when Google will introduce friendly stack traces to help identify precisely where code errors are, as well a way to optimize image components that will yield significant improvements in a site’s First Contentful Paint, said Emma Twersky, a developer relations engineer at Google.
Twersky presented “What’s New with Angular” at this month’s Progress 360 conference in Boston, Mass. Despite the title, a good portion of the talk focused on the past iterations of Angular and how those changes laid the groundwork for what Google will do next with Angular.
Project Ivy: ‘Replacing a Car Engine While the Car Is Moving’
Google is iterating quickly with Angular — versions 12 and 13 were released last year with version 14 released in June of this year. All of that work — including Ivy — was really laying the groundwork “under the hood” to make future framework improvements, Twersky said. Ivy is the name for Angular’s next-generation compilation and rendering pipeline, which took over from View Engine as the default with Angular version 9.
”Project Ivy was announced, maybe prematurely, but a long time ago, and it took a long time to develop,” Twersky told developers. “It was a full rewrite and the best analogy I can give is that it was like replacing a car’s engine while the car was still moving.”
That new engine gave Angular better type checking, error reporting, debugging, smaller bundle sizes; but what it really did is to enable future improvements Google has planned. With Ivy complete, Google saw a 90% reduction on computational resources, which in turn led to about 50 minutes of reduced time for a build of the largest Angular app at Google, she said.
Google’s Angular Army
The Angular team also rolled out request for comments (RFC) around this time, she said. RFC are a chance for feedback but also a chance to introduce experimental changes, she said. In versions 13 and 14, Google also began issuing developer previews, which allow developers to test out what Google is considering implementing, but with the realization that it could be changed and Google isn’t necessarily promising to support backward compatibility. It’s designed to help grow the framework faster, she said.
“If we have a design document, why not share it, why not battle test it against the millions of developers out there using Angular, and why not like think through some of those interesting cases ahead of time?” she said. “We’re really taking the army of Angular and tackling problems together.”
She added that Google has launched over 15 RFCs, but two of the biggest RFCs mentioned standalone components, the removal of NgModules, which are Angular-specific modules that configure the injector and the compiler in order to help organize related things together.
Another fix from the team during this time: Better support for debugging and diagnostics, specific details and guidance on error messages, as well as Angular dev tools supported through partnerships with the Chrome team and third-party resources.
Standalone Components
NG Modules are one more thing new developers have to learn about Angular, but it’s confusing because other programming languages use the term ‘modules’ to mean something else, Twersky said.
“Standalone is designed to simplify all of that and streamline the steps to getting started,” she said. “By introducing the standalone true flag, you can bootstrap your component directly and you don’t need a module.”
The idea is that an entire app can now be standalone, she said. It’s a major change, supported by new APIs Google created, she added; it also promised that any changes to the APIs would be backward compatible.
Angular Version 15: Reaping the Benefits
“Now we enter into phase three, which is the fruits of our hard work,” Twersky said. “This phase has yet to happen, frankly. Version 15 is scheduled for November, so this is very speculative and early preview. But the idea here is […] everything that we unlocked.”
Version 15 will see support for full standalones and support for that, she said.
“We have something that will benefit everyone, which is zone JS-enabled async stack taking by default, but we’re just calling it better stack traces,” she said. This is through another collaboration with Chrome and will make it easier to pare down to what’s relevant even when using open source code a developer didn’t write and where errors occur.
Version 15 also promises to make the router tree shakable, which basically removes unused code from the code base. In writing a standalone version of the router, the team was able to integrate a lot of things about the router module that are no longer needed, making it more tree shakable, she said. The new config API allows developers to tree shake major pieces of the router API, she said.
“What we want to do and what the Northstar is delivering [is] only what you need, at that end stage, and we got to tree shake a lot of the router away, so if you’re not using it, we’re no longer having to supply you with it. In Angular is this idea that we have a lot of code, but your apps don’t use all that code. And so at some point in compilation, we can get rid of a lot of the code that you’re not using.”
Other changes Google is considering:
- Hiding CLI configs by default
- MDC. MDC Web is a library created by the Google Material Design team that provides reusable primitives for building Material Design components. The Angular team is incorporating these primitives into Angular Material, according to their road map. “So if you use Angular Material, MDC is like the newest shiniest most accessible specs for that, that’s happening under the hood by default,” she said.
- Request for comments around hydration and other development trends.
Disclosure: Progress Software paid for Loraine Lawson to attend its conference in Boston.
