This would render the HelloComponent and display the name property from the route. With the PriceComponent it would display the price property from the QueryParams .

Zone less change detection

Currently, Zone.js is an integral part of automatic change detection. Even though it’s not needed for Change Detection itself. Zone js monkey patches asynchronous browser events. Once such an event occurs, it notifies Angular to run change detection.

However, Zone.js , has a couple of downsides. First, it's around 100 KB of size. This is a show stopper for Web components. Even though we can shrink our bundle to 10 KB size, you would still need to ship 100 KB of Zone.js for Change detection to work. The other big downside is that Zone.js can not patch native async/await statements.

How does Ivy help?

Well, Ivy introduces a markDirty function. The markDirty function takes a component as a reference. It then marks this component as dirty and causes change detection to run. The markDirty function also ensures that change detection doesn’t run too often.

Push pipe

“Zone-less” approaches take advantage of the markDirty API. One proposal is to implement a push pipe which would be very similar to the already known async pipe. The difference is that under the hood it uses markDirty instead of markForCheck .

{{ someStream$ | push }}

Reactive Components

Mike Ryan gave a great talk at last year’s AngularConnect in London. He dived deep into the markDirty function and introduced the idea of a ReactiveComponent, which runs Change detection once a stream emits a value.

Zone-less change detection with reactive components

Extending the ReactiveComponent would give us a connect method to run Change Detection once our stream emits a value.

Conclusion

Ivy is the most exciting thing in the upcoming Angular release. Ivy offers us a lot of great features we can already use with Angular 9.

Smaller bundles out of the box

Lazy loading components

Improved debugging in the browser

Even more exciting than the features we can already use today is the view in the future. Ivy enables a lot of great things for the future of Angular. Some may make it to Angular, and some may not. It’s yet unclear. But Ivy offers the potential for the following features.

renderComponent — for tiny bundles

— for tiny bundles Tiny web components with the help of renderComponent

Optional NgModules

Higher-order components

Zone-less change detection

You can already play around with the thrill-seekers APIs. But don’t use them for production. We don’t know if those features will make it to Angular.

🧞‍ 🙏 If you liked this post, share it and give some claps👏🏻 by clicking multiple times on the clap button on the left side.

Claps help other people to discover content and motivate me to write more 😉

Feel free to check out some of my other articles about front-end development.