Recently, Angular released an independent "experiential" development feature called Zone.js. Although the feature is still experimental, the Angular team has been working on this important innovation for a long time. Responsive primitives are becoming increasingly important to developers, indicating that Angular is entering another new era. Angular dependenciesThe advantages of Signals and Rxjs are even more pronounced, eliminating the need to constantly listen for changes that Zone.js depend on, and ended acting as an intermediary during development.
Angular will continue to be a bold and powerful framework in the future and start a new transformation.
First of all, my article is not intended to teach anyone anything. I hope my readers don't feel like they deserve to be so passive. I try to share my experiences and learnings as much as possible and open up to discussions. It is important to discuss together, exchange ideas, and evaluate based on critical thinking. It should not be forgotten that there is still some confusion about how exactly they work, especially when the technologies discussed in this article are still being experienced, and I would say that even the change detection mechanism can still cause some confusion among the core team in Angular.
What is Zone.js and what does it do?
Zone.js is a small library developed by Brian Ford in 2010 under the name "Zones" to manage asynchronous work in JavaScript. Inspired by languages like Erlang and Dart, it aims to bring structured concurrency to JavaScript's single-threaded environment. The Angular team gained momentum when it adopted Zones as its change detection mechanism in Angular 2, and the Angular team began contributing it in the form of Zone.js, providing broader community participation and further development. Today, although it is still tightly tied to Angular, Zone.js can be arguably considered a powerful tool for monitoring and intervening in asynchronous tasks, enabling performance analysis, error handling capabilities, and many questionable functions.
So why did Angular abandon Zone.js?
Leveraging AI's ability to effortlessly transform our imaginary images into drawings, we used the metaphor of "sponge under the bed" to create a visual for easy understanding.
Imagine the bed in the image above, which is not placed on the floor, but on a large sponge. Zone.js is like a sponge in an Angular application. This sponge ensures that the bed sits on a comfortable, supportive base while providing relative comfort to the sleeper. The sponge absorbs every movement of the bed, preventing the movement inside the bed from reflecting to the outside.
Monkey patches in Zone.js listen to all asynchronous APIs in the browser, such as: events, commitments, observables, setTimeout, setInterval, etc.
By listening to these, the Angular application can detect any changes and thus update the user interface, in fact, just like a sponge support bed, Zone.js also allows the Angular application to run smoothly. In this case, performance problems that we do not feel in very large projects can occur.
On the other hand, this complex structure seems to prevent us from perceiving certain specific changes over time. Each previous characteristic and development, along with its own internal development and changing needs, suddenly becomes an obstacle to the next one and development.
When we pull the sponge out from under us, we see that natural freedom of movement begins to emerge as the bed is in direct contact with the ground. When the comfort-limiting effect of the sponge begins to wear, it means that movement on the bed will now be reflected directly on the ground.
Such a metaphor may mean that the sponge provides a comfort zone and provides a relatively more comfortable sleep. Zone.js like this sponge, it provides a serious comfort zone that allows us to feel every change across the surface. However, over time, this complex structure may prevent us from perceiving some specific changes. Lower back pain can occur when we pull the sponge out from under us, and these aches and aches and pains indicate that we have descended from artificial to natural ground, and while this transition experience can be a little painful, ultimately, with a straight lower back, more comfortable sleep and better circulation, as well as healthier physical and mental acuity. When we switch to zone-free, i.e. back and joint pain from sleeping in a bed without a sponge, is a good sign that we are switching from artificial to natural ground. While this transition experience is a bit painful, the transition pain also disappears as our lower back begins to reshape to its former natural state, providing better circulation; The transition example here corresponds to the experimental Zoneless we heard in Angular v18.
Zone.js is thought to add additional load because it tracks asektron operations and passes them to Angular detection mechanisms such as calls, events, errors, etc. Today, in terms of Angular's performance, we can't see or even feel the extra load here. Zone.js could be further developed and some debugging issues could be solved, but the basis here is Angular's roadmap. We see that Angular's own in-house developed Signals reacting primitives Zone.js are now getting in the way of Angular's future plans. While the Signals structure is very useful in terms of detection mechanisms and also good in terms of performance, easy to use and powerful, Zone.js is no longer necessary, but it is not a library that can be abandoned overnight.
We understand that Angular doesn't want to limit its dreams, but rather wants to build a more flexible and reliable application with a more self-sufficient framework by eliminating intermediate processes as much as possible. We see Angular moving towards a more practical state and trying to seize the opportunity to enter the uptrend again in the future. Unfortunately, from the current StateofJS survey, we can't say it's in such a trend, but we also see that Angular is open to all possible innovations.
How do I switch to Zoneless mode in Angular 18?
Angular 18 comes with a step that allows us to switch to zone-free mode and get rid of the sponge. As shown below, we can now provide this experience using the no-zone change detection mechanism in the bootstrap phase.
With the above function added to the provider, we can now use the npm uninstall zone.js command to remove the zone.js defined in the polyfills array below from the angular.json.
Now we can use Angular Zoneless!
What are the advantages of Zoneless?
Zoneless provides a more streamlined ecosystem for our applications by eliminating unnecessary listening operations. This means faster rendering, higher performance, faster page loads, smaller package sizes, and easier debugging.
Take a classic test where you add a counter by clicking a button and you want to increase that number when you click the button. In this case, we can see that the changed value is rendered when each function is triggered, and this value changes in the HTML. Because it's already a function and we trigger it directly, it's rendered here. But what happens if this value changes due to external influences and we want to see any value change without us triggering it manually? If there is a Zone.js, it constantly listens for all changes and notifies Angular on our behalf. However, since there is no such mechanism right now, we either need to trigger the change detection mechanism after some asynchronous operation, or use Signals or RxJS directly, so that the change can be detected directly due to this reactivity.
Sponge's disappearance teaches us that it's not just Zone.js that disappears, it's also the "comfort zone".
If we use Zone.js as a module with raw JavaScript, it will look like this.
In Angular, we don't need to deal with these situations; With ngZone, these operations already work in tandem with the detection mechanism.
For example, in the case of direct DOM, event listeners, observables and commitments, HTTP requests, and synchronous control flows, we must manually trigger the change detection mechanism for asynchronous operations.
Since Signals or R xjs automatically detect changes, there is no need to trigger the change detection mechanism.
Signal example:
Now let's write an application to test the Zoneless and Angular change detection mechanisms and see how it works.
After starting the interval defined above as standard, we see that it starts working, but the DOM is not refreshed and the changes are not reflected. When we use the signal start interval, we see that it works without triggering Angular's change detection mechanism. As you can see, as the click event and signal interval begin, Angular notices the change, immediately captures the change in our standard interval, and then releases it.
When we send the value in a variable to the parent component, we find that it is perceived differently in both push and default cases.
When we bind the input on the left, the change is reflected when there is no area, and similarly, we can see that the change is reflected after clicking due to the promise.
Here we see that after an HTTP call without detect changes, the changes are not reflected, only when we trigger them manually. Of course, Signals easily reflects newcomers to the desired screen. Some of the code is as follows:
app.component.ts
change-detection-demo.component.ts
The app has been published on Stacklibitz, and you can check out the rest of the tests. You can also track results in the UI through code.
Stackblitz：The hyperlink login is visible.
GitHub：The hyperlink login is visible.
There is also a sample application below that shows how Angular's change detection mechanism works, and you can try it out from there as well.
The hyperlink login is visible.
Things to consider when switching to region-free mode
It's important to note that, as its name suggests, ExperimentalZonelessChangeDetection is still experimental.
While doing some testing, we noticed some oddities in the change detection mechanism. For example, when some changes are not triggered manually, we see no changes in the DOM and the state is not refreshed. However, when another signal or reaction variable works outside of the change detection mechanism and causes the DOM to be refreshed, we can observe that the previously unrefreshed state is also refreshed.
If you want to implement this feature in an existing project, you should carefully test all actions and application behavior. In particular, third-party libraries may rely on Zone.js, which can lead to some errors and rendering issues.
Original:The hyperlink login is visible. |
Posted on 2024-12-30 11:02:42
|
|
|
|
Landlord|
Posted on 2024-12-30 11:04:13
|
