Episode 23/01: Performance Content (Zone.js, refreshView)
Tags: javascript, webdev, angular, programming
Published: 2023-01-09 10:49:05

Using Angular's source code, Corbin Crutchley explains how Zone.js works and how Angular uses it.

Next, Max Koretskyi focuses on the internal refreshView function and what tasks are necessary to render a component.

{% embed https://youtu.be/g5d5IKmIyd0 %}

## Corbin Crutchley: Angular Internals: How Reactivity Works with Zone.js

Zone.js is a key ingredient of Angular. It listens for DOM events, for ending asynchronous tasks, and kicks in Angular's change detection. With Zone.js, we don't have to explicitly tell Angular when to re-render a component.

Corbin Crutchley wrote a detailed article about that topic. He heavily uses Angular's source code and Ivy's generated code for his explanation. Starting from a single component, he walks up to the actual DOM event, which initialises the re-rendering. 

Corbin explains what every frame in the stack trace is actually doing and how it fits into the big picture of change detection.

It is a wonderful article that motivates to look up the code snippets in one's own application code.

{% embed https://dev.to/this-is-angular/angular-internals-how-reactivity-works-with-zonejs-302m %}

## Max Koretskyi - Overview of Angular’s Change Detection operations in Ivy

And from Max Koretskyi, we got a second kind of accompanying article. Where Corbin has more of a top-down view, from the DOM Event to the component, Max focuses on the refreshView function. 

It runs multiple tasks for a given component.
For example, where and when the execution of the life-cycle hooks happens. Or where and how Angular deals with the OnPush strategy.

You will most likely never deal with refreshView directly, but with that knowledge, you better understand what's going on under the hood of Angular. 

{% embed https://medium.com/angular-in-depth/overview-of-angulars-change-detection-operations-in-ivy-2bf14a93f74f %}

## Angular Gaming Show

The monthly Angular Gaming show took place, where members of the Angular team answer questions.

The main takeaways:

- NgModules prevent the usage of Vite. Vite expects that a file change is always done "in isolation". [Direct Link](https://www.youtube.com/watch?v=b3qQnbNnCgM&t=3171s)
- You should favour the `inject` function over constructor based DI. [Direct Link](https://youtu.be/b3qQnbNnCgM?t=2275)
- It is theoretically possible that NgModules get deprecated in the future. But the Angular team still has to decide if and when: [Direct Link](https://youtu.be/b3qQnbNnCgM?t=1220)

{% embed https://youtu.be/b3qQnbNnCgM %}

## Miscellaneous

A list of popular JavaScript libraries/frameworks/tools ranked after their stars on GitHub can be found on: 

{% embed https://risingstars.js.org/2022/en %}

The current state of frontend development and where we are heading to from Ryan Carniato: 

{% embed https://dev.to/this-is-learning/javascript-frameworks-heading-into-2023-nln %}

## Minor Version Upgrades

### Nx 15.4

{% embed https://blog.nrwl.io/nx-15-4-vite-4-support-a-new-nx-watch-command-and-more-77cbf6c9a711 %}

### Cypress 12.3

https://docs.cypress.io/guides/references/changelog#12-3-0