Zoneless Angular: The Hidden Cost of Zone.js and What Replaces It

Zone.js has been a core part of Angular’s change detection for years. At the same time, it introduces real trade-offs: more challenging debugging, unpredictable performance, increased bundle size, and additional runtime overhead.

In this talk, we’ll start by examining the price we pay for using Zone.js and what practical benefits zoneless mode brings in return: improved performance characteristics, a clearer mental model, and an enhanced developer experience.

After that, we’ll take a short look under the hood of Angular’s zoneless mode. You’ll see how Angular triggers change detection without Zone.js, the role of the ChangeDetectionScheduler, and how the framework knows which exact parts of your application view need to update.

Transcript

1. Hallo Munich 👋
2. Zoneless Angular: The Hidden Cost of Zone.js and What Replaces It Dmytro Mezhenskyi Angular GDE. Creator and Author of @ DecodedFrontend dmytro@decodedfrontend.io
3. Let ’ s talk about Zoneless
4. Agenda Before Zoneless Zone.js challenges How Zoneless Works
5. Understanding Zoneless starts with Angular change detection
6. What ’ s Change Detection? A continuous synchronization between the component state and the UI
7. View Checking/Refreshing View Checking Scheduling Change Detection Phases
8. Root Component Child Component … … View Checking
9. APIs for Triggering View Checking
10. So... could we go Zoneless all this time?
11. Yes! But DX would be 💩
12. We needed a way to schedule view checking automatically
13. When should we schedule view checking? Every time the state changes But when can the state change? User interactions (events) and asynchronous operations 🤔
14. In short, we need something that can detect async operations and tell Angular about it
15. This is exactly what ZoneJS is responsible for
16. ZoneJS - it is a library that monkey-patches the async browser APIs and notifies Angular when async tasks complete
17. gallery Root Header Page Footer Search Button breadcr gallery slide logo AppComponent ( Root ) HeaderComponent SearchComponent ButtonComponent PageComponent FooterComponent LogoComponent BreadcrumbsComponent GalleryComponent SlideComponent ZoneJS ApplicationRef tick()
18. It worked… but…
19. ZoneJS - it is a library that monkey-patches the async browser APIs and notifies Angular when async tasks complete
20. ZoneJS - it is a library that monkey-patches the async browser APIs and notifies Angular when async tasks complete
21. ZoneJS - it is a library that monkey-patches the async browser APIs and notifies Angular when async tasks complete
22. Zone.js 😐 Another dependency to manage 😐 Adds about + 33kb to the initial bundle is a library 😐 Delays between new browser async API releases and Zone.js support 😐 Maintenance cost and bug fixes
23. ZoneJS - it is a library that monkey-patches the async browser APIs and notifies Angular when async tasks complete
24. Zone.js Monkey-Patches Browser APIs Monkey-patched
25. ZoneJS Monkey-Patches Browser APIs 😐 Invasive and not obvious Surprise!
26. Zone.js Monkey-Patches Browser APIs 😐 DX degradation
27. Zone.js Monkey-Patches Browser API 😐 Not everything is monkey-patchable
28. Zone.js Monkey-Patches Browser APIs 😐 Additional Overhead for testing
29. 😐 Harder to integrate 3rd party JS libs Zone.js Monkey-Patches Browser APIs
30. Zone.js - it is a library that monkey-patches the async browser APIs and notifies Angular when async tasks complete
31. Zone.js As a CD scheduler 😐 ZoneJS doesn ’ t really know what & where changed, making Angular do unnecessary work
32. gallery Root Page breadcr gallery slide AppComponent ( Root ) PageComponent BreadcrumbsComponent GalleryComponent SlideComponent Zone.js Zone.js doesn ’ t know WHAT & WHERE has changed! ???
33. Zone.js As a CD scheduler 😐 Not every async operation should trigger a change detection cycle
34. Zone.js Summary 😐 Monkey-patching can hurt developer experience and create integration challenges 😐 Less efficient change detection can hurt performance 😐 One more dependency to manage 😐 Adds about 33kb to the initial bundle
35. What could replace Zone.js?
36. Change Detection Scheduler …
37. Change Detection Triggers
38. Zoneless Scheduler
40. State synchronization
41. It plays so well with Signals
42. Signals Signal Signal Signals can notify dependent consumers about their change
43. Reactive Consumers
44. SearchComponent ButtonComponent PageComponent BreadcrumbsComponent GalleryComponent HeaderComponent AppComponent ( Root ) gallery slide SlideComponent ChangeDetectionScheduler ApplicationRef Contains a dirty child view
45. Zoneless Summary 😊 Improved Developer Experience 😊 No “big bang ” migration 😊 Better performance 😊 Simpler mental model
46. If your app works well with onPush strategy — you ’ re likely ready for Zoneless
47. Try it ;)
48. Zoneless Angular: The Hidden Cost of Zone.js and What Replaces It Dmytro Mezhenskyi Angular GDE. Creator and Author of @ DecodedFrontend dmytro@decodedfrontend.io