• Jan 29, 2024

    Rethink NgRx - ComponentStore vs Store (part 2)

    Observable is pushed-based architecture. NgRx has two observable-based implementation, Store and ComponentStore. Store is more flexible and scalable, but you need deal with multiple objects such actions and reducers, selectors. ComponentStore is also powerful but much simpler to use. It involves less concepts and requires less coding.

  • Jan 28, 2024

    Rethink NgRx - Observable (part 1)

    NgRx has been around as long as Angular. It is a very popular and so highly praised, if you don’t use it, you will feel you are missed out. NgRx is also controversial. There are lots of articles advocating NgRx or asking people stop using it. I have used it for a long time in various projects, and I have seen good code and bad code in using NgRx. In the post, I would like reintroduce NgRx from a new perspective. All the source code of the post can be found here. The live demo is here

  • Dec 4, 2023

    Angular signal - a new reactivity primitive.

    Angular 17 has brought lots of new features. One of them is Signal. If you’re an Angular user, you surely know that zone.js as the underlying mechanism of change detection in Angular. It is simple, elegant, and sufficent in terms of performance in most of cases. The beauty of zone.js is that you can use any kind of data stucture to for state, you can use plain old javascript object, observable, now you have one more option, signal. To understand signal, I will review what we have. In this post, I will use the following application to demonstrate the different ways to represent state in Angular. The source code of the app is hosted at github

  • Mar 19, 2023

    Part 3 Angular Change Detection - The cycle and the job

    When I use the word change detection, this is not specific enough in Angular. It can be referred as change detection cycle, or it can be referred as change detection job. The cycle refer to the process of recursive updating the hierachy of angular views. In the context of each component, the job refers to the work of comparing the current state and previous state of the component, updating the view of the component when there is a difference. In the last post, I mentioned. Zone.js will call applicationRef.tick(), and it will start a change detection cycle. During the cycle, the job can happen depending on some condition. But in the cycle, what does it actually do? This is a pretty complicated process. Here is some very high-level pseudo code, and it omits lots of details, let’s just focus on the high-level process.

  • Mar 17, 2023

    Part 2 Angular Change Detection - Zone.js

    In Part 1, I showcased the best practice in Angular change detection. Now I aim to delve into the rationale behind it. This topic is about Zone.js