ZONE.JS
ABOUT ME
{
"name": "Ilia Idakiev",
"about": [
"Lecturer in 'Advanced JS' @ FMI",
"Developer / Manager / Owner @ HNS",
"Consultant"
],
"otherAchievements": [
"Angular Course 2016 @ HackBulgaria",
"Angular Course 2017 @ HackBulgaria",
"Advanced JS + Angular Course 2017 @ Innovative Labs"
]
}
I LOVE PLAYINGVINYL
WHAT IS ZONE.JS
• Library written by the team that is inspired by DART
• It provides a mechanism for encapsulating and intercepting
asynchronous activities in the browser
WHY ZONE.JS
• Useful for accessing data which persist across async operations.
• Useful for frameworks/applications to be able to schedule and
intercept async tasks
• Helps us detect theVM turns
• Useful for debugging, testing and profiling
ZONE
• A zone is an execution context that persists across asynchronous tasks.
• It allows us to control execution of the code within the zone.
ZONES.JS
• The library monkey patches all the async browser APIs.
• Redirects all the async operations trough a zone of interception.
• Creates a <root> zone.
• Provides a global Zone object used for zone management.
MONKEY PATCH
A monkey patch is a way for a program to extend or modify
supporting system software locally (affecting only the running instance
of the program).
( wikipedia )
MONKEY PATCH EXAMPLE
https://github.com/angular/zone.js/blob/0d0ee53974601738fb16235baa3e5cca8b95be4e/lib/
browser/browser.ts#L24
zone.js patching:
ENTERING ZONES
CREATION EXAMPLE 1
CREATION EXAMPLE 2
CONTEXT PROPAGATION
• A zone keeps a reference to its parent zone.
• A given stack frame can be only associated with one zone.
• Data attached to the zone is shallow-immutable.
• Child zone inherit parent zone properties.
WRAPPING
Zone.prototype.wrap method provides convenience for wrapping callbacks.
INTERCEPTION
ZONESPEC HOOKS
• onFork
• onIntercept - interception of the wrapping of the callback
• onInvoke
• onHandleError
• onScheduleTask
• onInvokeTask
• onCancelTask
• onHasTask
INTERCEPTION
INTERCEPTION EXAMPLE (1)
INTERCEPTION EXAMPLE (2)
ZONE DELEGATE
• A delegate which handles the interception of the current zone
methods.
• This way a child zone can invoke a method on a parent zone.
• The wrap method delegates to intercept and the run method to
invoke.
TASKTYPES
• MicroTask - work which will execute as ASAP on empty stack frame.A microtask is
guaranteed to run before host environment performs rendering or I/O operations.
• MacroTask - Macro tasks are interleaved with rendering and I/O operations of the
host environment. (ie setTimeout, setInterval, etc..) Macro tasks are guaranteed to
run at least once or canceled. Macro tasks have an implied execution order.
• EventTask - Similar to macro tasks, but unlike macro tasks they may never run.
When an EventTask is run, it pre-empts whatever the next task is the macro task
queue. Event tasks do not create a queue.
TASK METHODS
• runTask
• scheduleMicroTask
• scheduleMacroTask
• scheduleEventTask
• scheduleTask
• cancelTask
ANGULAR
ANGULAR COMPILATION
ZONEJS INSIDE ANGULAR
THE PROBLEM
How to understand that something changed and we need to update
the views?
ANGULARJS
$digest / $apply
NGZONE EVENT INTERCEPTION
NGZONE AND CHANGE DETECTION
Tick runs when there is no
more microtasks enqueue in
the currentVMTurn.
ANGULAR CHANGE DETECTION
ANGULAR CHANGE DETECTION
ANGULAR CHANGE DETECTION
PERFORMANCE OPTIMIZATION
• Asynchronous tasks that don't require UI updates or error handling
to be handled by Angular can be kicked off via "runOutsideAngular".
• If needed, these tasks can reenter the Angular zone via "run".
CONTROLLINGTIME
FAKEASYNC
• Instead of calling the browser, it saves all the calls into an array.
• It can then emulate the passage of time by going through that array
and invoking the stored functions.
HTTPS://BLOG.NRWL.IO/CONTROLLING-TIME-WITH-ZONE-JS-AND-FAKEASYNC-
F0002DFBF48C
ZONE.JS/DIST/LONG-STACK-TRACE-ZONE.JS
NODEJS AND ZONE.JS DEMO
ZONES ARE IN STAGE 0 PROPOSALS
https://github.com/tc39/proposals/blob/master/stage-0-proposals.md
WTF
WEBTRACING FRAMEWORK
SLIDES
https://github.com/iliaidakiev/slides
THANKYOU!

More Related Content

DOC
The cure - Friday, I´m in love. Letra de Música e atividade Pedagógica
PPSX
A conjunção e a locução conjuncional exercício 2 - soluções
DOC
Olivrodosmrtires johnfoxtraduo-140407132513-phpapp01
PDF
Deep Dive into Zone.JS
PDF
Rethinking the debugger
KEY
The Why and How of Scala at Twitter
PDF
backgroundcommunicationandwaitevents-180124221026.pdf
PPTX
A microservices journey - Round 2
The cure - Friday, I´m in love. Letra de Música e atividade Pedagógica
A conjunção e a locução conjuncional exercício 2 - soluções
Olivrodosmrtires johnfoxtraduo-140407132513-phpapp01
Deep Dive into Zone.JS
Rethinking the debugger
The Why and How of Scala at Twitter
backgroundcommunicationandwaitevents-180124221026.pdf
A microservices journey - Round 2

Similar to Zone.js (20)

PPTX
JS Event Loop
PDF
Nelson: Rigorous Deployment for a Functional World
PPTX
Planning to Fail #phpne13
PDF
Oracle Fusion Middleware on Exalogic Best Practises
PDF
DevOps: Automate all the things
PDF
Introducing BoxLang : A new JVM language for productivity and modularity!
KEY
Developing High Performance Web Apps - CodeMash 2011
PDF
Why scala is not my ideal language and what I can do with this
PDF
Running Spark on Cloud
PDF
Stackato v2
PDF
Groovy concurrency
PDF
Ratpack Web Framework
PDF
Stackato v4
PDF
Embracing the Future
PPTX
Building a document e-signing workflow with Azure Durable Functions
PDF
NetflixOSS Open House Lightning talks
PPTX
Planning to Fail #phpuk13
DOC
Concurrency Learning From Jdk Source
PDF
Matheus Albuquerque "The best is yet to come: the Future of React"
PDF
Stackato v6
JS Event Loop
Nelson: Rigorous Deployment for a Functional World
Planning to Fail #phpne13
Oracle Fusion Middleware on Exalogic Best Practises
DevOps: Automate all the things
Introducing BoxLang : A new JVM language for productivity and modularity!
Developing High Performance Web Apps - CodeMash 2011
Why scala is not my ideal language and what I can do with this
Running Spark on Cloud
Stackato v2
Groovy concurrency
Ratpack Web Framework
Stackato v4
Embracing the Future
Building a document e-signing workflow with Azure Durable Functions
NetflixOSS Open House Lightning talks
Planning to Fail #phpuk13
Concurrency Learning From Jdk Source
Matheus Albuquerque "The best is yet to come: the Future of React"
Stackato v6
Ad

More from Ilia Idakiev (18)

PDF
No more promises lets RxJS 2 Edit
PDF
Enterprise State Management with NGRX/platform
PDF
RxJS Schedulers - Controlling Time
PDF
Creating lightweight JS Apps w/ Web Components and lit-html
PDF
No More Promises! Let's RxJS!
PDF
Marble Testing RxJS streams
PDF
Deterministic JavaScript Applications
PDF
Web Components Everywhere
PDF
Building Reusable Custom Elements With Angular
PDF
State management for enterprise angular applications
PDF
Offline progressive web apps with NodeJS and React
PDF
Testing rx js using marbles within angular
PDF
Predictable reactive state management for enterprise apps using NGRX/platform
PDF
Angular server side rendering with NodeJS - In Pursuit Of Speed
PDF
Angular Offline Progressive Web Apps With NodeJS
PDF
Introduction to Offline Progressive Web Applications
PDF
Reflective injection using TypeScript
PDF
Predictable reactive state management - ngrx
No more promises lets RxJS 2 Edit
Enterprise State Management with NGRX/platform
RxJS Schedulers - Controlling Time
Creating lightweight JS Apps w/ Web Components and lit-html
No More Promises! Let's RxJS!
Marble Testing RxJS streams
Deterministic JavaScript Applications
Web Components Everywhere
Building Reusable Custom Elements With Angular
State management for enterprise angular applications
Offline progressive web apps with NodeJS and React
Testing rx js using marbles within angular
Predictable reactive state management for enterprise apps using NGRX/platform
Angular server side rendering with NodeJS - In Pursuit Of Speed
Angular Offline Progressive Web Apps With NodeJS
Introduction to Offline Progressive Web Applications
Reflective injection using TypeScript
Predictable reactive state management - ngrx
Ad

Recently uploaded (20)

PDF
Ableton Live Suite for MacOS Crack Full Download (Latest 2025)
PDF
iTop VPN Crack Latest Version Full Key 2025
PPTX
"Secure File Sharing Solutions on AWS".pptx
PDF
Practical Indispensable Project Management Tips for Delivering Successful Exp...
PDF
Microsoft Office 365 Crack Download Free
PDF
Top 10 Software Development Trends to Watch in 2025 🚀.pdf
PDF
Introduction to Ragic - #1 No Code Tool For Digitalizing Your Business Proces...
PDF
Autodesk AutoCAD Crack Free Download 2025
PPTX
Trending Python Topics for Data Visualization in 2025
PDF
Salesforce Agentforce AI Implementation.pdf
DOC
UTEP毕业证学历认证,宾夕法尼亚克拉里恩大学毕业证未毕业
PPTX
Cybersecurity-and-Fraud-Protecting-Your-Digital-Life.pptx
PDF
How Tridens DevSecOps Ensures Compliance, Security, and Agility
PDF
E-Commerce Website Development Companyin india
PDF
DuckDuckGo Private Browser Premium APK for Android Crack Latest 2025
PDF
CCleaner 6.39.11548 Crack 2025 License Key
PDF
Wondershare Recoverit Full Crack New Version (Latest 2025)
PDF
Multiverse AI Review 2025: Access All TOP AI Model-Versions!
PPTX
Full-Stack Developer Courses That Actually Land You Jobs
PPTX
Advanced SystemCare Ultimate Crack + Portable (2025)
Ableton Live Suite for MacOS Crack Full Download (Latest 2025)
iTop VPN Crack Latest Version Full Key 2025
"Secure File Sharing Solutions on AWS".pptx
Practical Indispensable Project Management Tips for Delivering Successful Exp...
Microsoft Office 365 Crack Download Free
Top 10 Software Development Trends to Watch in 2025 🚀.pdf
Introduction to Ragic - #1 No Code Tool For Digitalizing Your Business Proces...
Autodesk AutoCAD Crack Free Download 2025
Trending Python Topics for Data Visualization in 2025
Salesforce Agentforce AI Implementation.pdf
UTEP毕业证学历认证,宾夕法尼亚克拉里恩大学毕业证未毕业
Cybersecurity-and-Fraud-Protecting-Your-Digital-Life.pptx
How Tridens DevSecOps Ensures Compliance, Security, and Agility
E-Commerce Website Development Companyin india
DuckDuckGo Private Browser Premium APK for Android Crack Latest 2025
CCleaner 6.39.11548 Crack 2025 License Key
Wondershare Recoverit Full Crack New Version (Latest 2025)
Multiverse AI Review 2025: Access All TOP AI Model-Versions!
Full-Stack Developer Courses That Actually Land You Jobs
Advanced SystemCare Ultimate Crack + Portable (2025)

Zone.js