To continue my series on the power of Zone, I examine yet another powerful and useful way you can use zones to improve your application. If this is your first time learning about Zone, read my introduction to Zone titled Taming Asynchronous Tasks in JavaScript with Zone.js. Anyone familiar with Angular apps has run into the concept of the $digest loop. This is essentially a pass to update data-binding. When the model is mutated, which can happen a number of ways, anything observing the model is notified. The watchers may also mutate the model further which results in a recursive call until either the changes settle or the maximum recursion is reached.
The problem with this approach is that Angular is only aware of changes that happen within the loop. Directives that ship with Angular are automatically called within the loop so their changes are propagated. It is not uncommon to introduce a third-party library that may mutate the model somehow. When this happens, Angular is not aware of the changes because it happens outside of the loop. When you are able to intercept the update yourself, you can make it inside of a call to $apply which will notify Angular of the change. However, you don’t always have the luxury of intercepting third-party modules.
To demonstrate how Zone can help, I created a simple (contrived) scenario. Assume you have a simple clock you wish to display:
The timer, however, comes from a third party control. It exposes a timer object and runs on a timer but you can only kick it off – you have no control of the actual code that makes the updates. Again, to keep it simple, assume this amazing control works like this (remember, you only have access to the externalTimeObj, and something else kicks it off).
In Angular, you can capture the timer and place it on your scope:
But the problem is you don’t see any updates (here’s the proof). Even though the timer object is updating, it happens outside of the digest loop so Angular isn’t aware. What’s worse is that the only way you can update your timer to call $apply is to get in and modify the source code which isn’t ever a great idea. If only there was a way to create an execution context that would automatically update the digest loop when done. Then you could call the initialization methods for the third-party timer control from within that execution context and capture the updates. Wait, there is! We have Zone.
First, create a zone that is dedicated to initiating the digest loop when it’s work is finished. OK, don’t, because I’ve already done it and it looks like this:
The digestCapture variable is necessary to allow Angular to initialize the call into the digest loop. If we bootstrap Angular in this zone we’ll create too much overhead because Angular methods that already execute in the digest loop will trigger a redundant call when the task is complete. Notice how once the digest call is captured, the check for it is removed by replacing the onZoneEnter function with a no-op.
There is no need to change any of the Angular code (that’s why I love this approach – open to extensibility, closed to change). Simply add the code to capture the digest function:
There is also no need to change the third-party control. Instead, we just move our third-party control initialization into the zone (again, we’re using the interval here but this could be any call into the third-party API as once it happens in a zone it is captured for that zone).
That’s it! Now we’ve got a way to initialize our third-party controls and ensure any time they return from an asynchronous task that we are able to notify Angular our model has mutated by running the digest loop. See the code running yourself.
Carefully Tuned Databases
Ensuring a database system has been properly designed, implemented, and tuned requires expertise and ongoing management. Atmosera provides managed Database (DB) services designed to help you get the most out of their systems. Our DB experts are available 24x7x365 to perform any task from basic day-to-day maintenance to complex architecture design.
Get reliable administration.
We maintain and proactively troubleshoot your databases 24x7x365.
Drive rapid innovation.
Together we partner to deploy the latest database and storage technology.
Educate support teams.
We actively help your team better leverage your database tools.
“Atmosera has been more than a infrastructure as a service for Navos. Their DBA team have become trusted partners supplementing our internal staff with deep specialized skills. Their experts have helped us drive additional improvements with our other technology partners. Atmosera brings talent to our team that we would not otherwise have access to and they care about our success.”
– Jim Rudnick, Vice President & Chief Information Officer
Databases Administration (DBA)
- Day-to-day database administration tasks.
- Professionals available 24x7x365.
- Proactive maintenance and troubleshooting of your databases.
- Rigorous processes to safeguard the security of your databases.
- Rigorous processes to safeguard the security of your databases.
Database Architecture and Engineering (DBAE)
- Rapid innovation & deployment of the latest database & storage technologies.
- Peace of mind which comes from highly trained professionals
- Thoroughly vetted technology before it ever gets deployed into production environments.
- Recommendation and migration to the technology which best aligns with your business needs.
Education
- Assist and teach the application and software development teams how to leverage the tools included with their databases
- Application and code tuning capabilities.
- Self-service on performance reporting when making code and tuning changes.