Point of Vue — Part 2 — Facing Angular

5 min readJul 1, 2018

In my previous article I made some people angry, as I briefly went through many aspects of modern web apps development, and expressed my dislikes of both React and Angular compared to Vue.js.

In this article I will go deeper in two aspects: (1)I will present the concept of change detection and compare the strategies of Angular vs Vue. and (2) we will check how each framework handles dynamic components (which is a feature that always reveals the pipes of the engine)

Lets do it.

Change detection

We make the model (state) of the application visible to user by the process we call rendering.

The challenge is tracking changes over time and reflecting them efficiently
(DOM Access is expensive)

What Causes a Change? Changes may origin from:

Events — click, keyup, submit, etc.
Data arrival — AJAX, fetch, websockets, etc.
Timers (interval, timeout)

How changes are tracked In Angular

Angular uses the same old dirty checking mechanism that brought us (as angularjs developers) to our knees back in the days:

It keeps copies of each component’s data properties.
These copies include the current state and the previous state
Than it compare them, one by one to detect the changes.

We know that for Angular 1 (AngularJS), ~2500 watchers on page already choked the system, how is Angular doing?

How does Angular knows that change have happened? This comes from another layer that is called Zones.

Zones work by monkey-patching the core async JS functions, Angular’s change detection system is built on top of zone.js hooks. NgZone is really a forked zone with additional APIs based on Observables: onTurnStart(), onTurnDone()

When Angular detects the completion of an asynchronous action it triggers a change detection cycle

Magic revealed, this is how Angular kick starts change detection:

And the function tick (simplified):

Look mam I’m using Zones

Sometimes, you might find yourself in a need to use zones directly, examples:

Using youtube player iframe api or any 3rd party based on an iframe (so -not monkey patched)
Here is a sample:

By default, all views are initialized with ChecksEnabled this strategy is slow for big DOM, so we must start optimizing and start adding:ChangeDetectionStrategy.OnPush throughout our system, but this will not help unless we switch to Immutable objects (!).

The main logic responsible for running change detection for a view resides in the checkAndUpdateView function. As you can see, this function is called recursively for each component, starting from the host component.

Yak, immutable everything

Immutability has pretty much became a must for both Angular and React apps to work properly. Some would argue that it promotes a good design principal (Immutability), others would finish the work earlier and go make love. Detailed article about Angular change detection is here.

How come VueJS developers can skip this entire chapter of immutability in the javascript life and move on with their life so merrily?

Vue Reactivity

Like anything in Vue, there is no better way from just reading the outstanding great documentation, here is the relevant peace:

When you pass a plain JavaScript object to a Vue instance as its data option, Vue will walk through all of its properties and convert them to getter/setters using Object.defineProperty.
The getter/setters are invisible to the user, but under the hood they enable Vue to perform dependency-tracking and change-notification when properties are accessed or modified
Every component instance has a corresponding watcher instance, which records any properties “touched” during the component’s render as dependencies. Later on when a dependency’s setter is triggered, it notifies the watcher, which in turn causes the component to re-render.

Here is a simple example:

Compare by Example — Dynamic Components

There are many ways and metrics to try and compare frameworks, but For me — Dynamic components has always been a way to look into the guts of a framework.

Think about a loop that creates various types of components based on some JSON arriving from server.

Angular is a framework built by engineers for engineers so obviously supports dynamic components, but the feature is so cumbersome and poorly documented that I’ve met several projects that have added yet another dependency ng-dynamic-component as a way to abstract some of the complicated syntax and the bare hands electric wiring.

Here is how the wiring looks in a simple Angular component: