Łukasz Jancewicz discussed Google Cloud’s massive 15-million-line Angular app and its unique MicroFrontend architecture. The new Incremental Hydration RFC offers more control over hydration in SSR apps. Angular 19 will default to standalone: true unless explicitly set to false, with automated migration support.
Largest Angular App
Łukasz Jancewicz was recently a guest on the Angular Masters Podcast with Dariusz Kalbarczyk. Łukasz works for Google Cloud, which is built as an enormous Angular application comprising 15 million lines of code. The number of developers currently working on this platform is 2,000.
In the podcast, Łukasz discussed the challenges they face with scalability, especially when implementing features that span horizontally across the platform.
Even though the entire source code is stored in Google’s mono repository, they utilize a MicroFrontend architecture. Their solution is unique, non-open source, and built using two iFrames—one for the App Shell and another for the MicroFrontend itself.
They have a clever setup where they patch the MicroFrontend iFrame so that any DOM manipulation methods are executed in the App Shell's placeholder for the MicroFrontend, ensuring proper interaction and consistency.
Another fascinating topic Łukasz touched on was their testing strategy. Testing, as you’d expect for a project of this size, is crucial.
They also had to migrate from AngularJS to Angular, and while they were able to automate much of the process, the complete rewrite still took five years.
Incremental Hydration
The upcoming Progressive Hydration feature has been renamed to Incremental Hydration, and the official RFC is now available.
When using SSR (Server-Side Rendering), end users receive the static HTML quickly, followed by Angular being loaded later. This process is known as Hydration.
Incremental Hydration allows existing defer blocks and their dependencies to opt out of the initial hydration process. Triggers such as "on interactive" or "on timeout" can be set to defer the hydration, meaning that while the content of the deferred view is already visible, it remains non-interactive until the trigger is met. Previously, defer worked like a lazy-loaded component, but Incremental Hydration puts on a completely new level.
Additionally, if desired, there’s an option to skip completely hydrating a deferred view.
The RFC is now open for comments and feedback, offering a chance for the community to weigh in.
https://github.com/angular/angular/discussions/57664
The Future is Standalone
In the article “The Future is Standalone,” written by Alex Rickabaugh, the lead of the Angular framework, exciting updates for Angular 19 were revealed. One key change is the behavior of the standalone property.
Moving forward, if the standalone property is missing, it will automatically default to true. This means you can safely drop all instances of standalone: true from your components. However, if you want a component to not be standalone, you will need to explicitly set standalone: false.
Additionally, there will be an option in tsconfig that lets you configure the compiler to forbid standalone components entirely if needed.
As usual, Angular update scripts will take care of this migration automatically, ensuring that the transition happens smoothly without any manual intervention.
The future is standalone!. Angular v19 will make standalone: true… | by Alex Rickabaugh | Sep, 2024 | Angular Blog
Angular v19 will make standalone: true the default for components, directives, and pipes.
blog.angular.dev
Detective
Manfred Steyer has introduced a new tool for architectural analysis called Detective. This tool provides visualization to help developers better understand and analyze their application’s architecture. He’s also published an accompanying blog post with further details on how to use it effectively.
angulararchitects.io
Angular Developer Survey
On another note, Matthieu Riegler announced that the yearly Angular Survey is now available. Please consider filling it out—past surveys have shown that community feedback plays a significant role in shaping the future of Angular.
Top comments (0)