Maxim Koretskyi

Most architectural patterns are not easy to grasp especially when the information that describes them is scarce. One of such patterns in Angular is unidirectional data flow. There’s no clear explanation of what that means in the official documentation and it’s only briefly mentioned in the expression guidelines [https://angular.io/guide/template-syntax#expression-guidelines] and template statements [https://angular.io/guide/template-syntax#template-statements] sections. I also haven’t found any

In my pursuit to grow as a developer I spend a lot of time reverse-engineering web technologies [https://blog.angularindepth.com/practical-application-of-reverse-engineering-guidelines-and-principles-784c004bb657] . I’m basically a reverse-engineering addict. The topic that fascinates me the most is change detection. You can find this mechanism in almost any web application. It’s an integral part of the most popular web frameworks. Sufficiently advanced widgets, like datagrids [https://react-gri

As you know, Angular’s dependency injection mechanism includes a bunch of decorators like @Optional and @Self which impact the way dependencies are resolved. And while most of them are pretty straightforward and self-explanatory, the @Host decorator has puzzled me for a long time. I haven’t found the docs that explain it, except for a comment in the sources [https://github.com/angular/angular/blob/cbd93fe0d0624ce5920f966027df534fd9b50b85/packages/core/src/di/metadata.ts#L252.] : > Specifies tha

I usually finish my talks with the philosophical phrase that nothing stays the same. And as you probably know it’s more then true with Angular. The current rendering engine is being rewritten with the new much enhanced version called Ivy. The current status of Ivy can be tracked here [https://github.com/angular/angular/blob/master/packages/core/src/render3/STATUS.md] . Today, we’re going to take a look under the hood of this marvel of complex framework engineering. I’m going to be honest with y

When writing a custom pipe in Angular you can specify whether you define a pure or an impure pipe: @Pipe({ name: 'myCustomPipe', pure: false/true <----- here (default is `true`) }) export class MyCustomPipe {} Angular has a pretty good documentation on pipes that you can find here [https://angular.io/guide/pipes]. But as it often happens with documentation the clearly reasoning for division is missing. In this article I’d like to fill that hole and demonstrate the difference from t

From the moment I started using Angular I was intrigued by the question what’s the difference between components and directives. It’s a nagging question especially for those who come from the AngularJS world since we only had directives that we often used as components. If you search the web for the explanation you will see many phrases like these: Components are just directives with a content defined in a template… Angular components are a subset of directives. Unlike directives, components a

Most articles I have seen strongly associate Zone(zone.js) and NgZone with change detection in Angular. And although they are definitely related, technically they are not part of one whole. Yes, Zone and NgZone is used to automatically trigger change detection as a result of async operations. But since change detection is a separate mechanism it can successfully work without Zone and NgZone. In the first chapter I will show how Angular can be used without zone.js. Second part of the article exp

Modern web applications are interactive. The state of an application can change anytime as a result of a button click or request coming back from a server. And as the state changes the code needs to detect that and reflect the change in the User Interface. That’s the main job of the change detection mechanism [https://medium.freecodecamp.org/what-every-front-end-developer-should-know-about-change-detection-in-angular-and-react-508f83f58c6a] . If you prefer watching over reading, check out this

In one of my recent article on dynamic component instantiation Here is what you need to know about dynamic components in Angular [https://hackernoon.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e] I’ve shown the way how to add a child component to the parent component view dynamically. All dynamic components are inserted into a specific place in the template using ViewContainerRef reference. This reference is usually obtained by specifying some template refer

Angular modules is a pretty complex topic. Angular team has done a great job putting up a quite lengthy documentation page on NgModule that can be found here [https://angular.io/guide/ngmodule]. It provides clear explanation to most of the topics but some areas are still lacking and thus often misunderstood by developers. I’ve seen people often misinterpret the explanation and use the recommendations incorrectly because they don’t understand how modules work on the lower level. Also check out m

If you’re working on a complex project inevitably you will face the situation when you have to create a custom form control. The essential component of this task will be implementing ControlValueAccessor. There are some articles on the web that explain how to implement it but none provides an insight into what role this component plays in the Angular forms architecture. If you want to know not only how to implement it but also why this article is for you. Here I’ll first explain why we need Con

If you’ve been programming with AngularJS (first generation of the framework) you probably got used to generating HTML strings on the fly, running them through $compile service and linking to a data model (scope) to get two-way data binding.const template = '<span>generated on the fly: {{name}}</span>' const linkFn = $compile(template); const dataModel = $scope.$new(); dataModel.name = 'dynamic' // link data model to a template linkFn(dataModel); In AngularJS a directive can modify DOM in any

If like me and want to have a comprehensive understanding of the change detection mechanism in Angular you’ll have to explore the sources since there is not much information available on the web. Most articles mention that each component has its own change detector which is responsible for checking the component, but they don’t go beyond that and mostly focus on use cases for immutables and change detection strategy. This article provides you with the information required to understand why use c

Whenever I read about working with DOM in Angular I always see one or few of these classes mentioned: ElementRef, TemplateRef, ViewContainerRef and others. Unfortunately, although some of them are covered in Angular docs or related articles, I’ve yet to found the description of the overall mental model and examples of how these work together. This article aims to describe such model. If you’re looking for more in-depth information on DOM manipulation in Angular using Renderer and View Contain

This article explains the very basic math behind four simple algorithms to convert binary to decimal: two for integer and two for fractions.

Usually signed integers are stored as two’s complement. However, exponent in IEEE-754 floating point standard is stored as offset binary. This article explains the inner workings of this mechanism.

We are all familiar with rounding numbers in decimal system. This article will teach you how to round binary numbers and explain the math behind it.

ES6 introduced a new iteration mechanism for traversing data and corresponding protocols that define a uniform approach to iterating structures in JavaScript. This article describes it.

It seems that the documentation will never be able to keep up with the rapid advances in these technologies. But as the web applications grow ever more complex we need that kind of knowledge to produce performant and extensible applications. INDEPTH dev publication is where you'll find it.

An in-depth guide into manual control of change detection in Angular

A glimpse into the internals of React Fiber

The how and why on everything from React elements to Fiber nodes

The main algorithm of the work loop in React’s reconciler

In the article Level Up Your Reverse Engineering Skills [https://indepth.dev/level-up-your-reverse-engineering-skills/] I explained the benefits of reverse-engineering and outlined some guidelines and principles of successful reverse-engineering. If you haven’t read it, I recommend you start from there. This article will demonstrate the application of those guidelines and principles and introduce debugging techniques that I commonly use. I was writing this article as I was exploring and debuggi

> This article's content describes the workings of the Angular's compiler in versions 4x through 8x. All modern frameworks are designed to help implement UI composition with components. Naturally you will have a parent-child hierarchy and the framework should provide a way to communicate between the child and parent. Angular provides two major ways of communication — through input/output bindings and services. I prefer using the first method for the stateless presentational components [https://m

Some new good excerpt

Do you know if Angular first checks siblings of the current component (breadth-first) or its children (depth-first)? This article answers this question for you.

> What I cannot [re]create, I do not understand The quote above belongs to Richard Feyman, one of the greatest scientists and physicists of our time. What he meant is that, starting with a blank piece of paper and the knowledge already in his mind, he could take any theoretical result and re-derive it. Feynman thought that ability was the true marker of understanding something. I’m a firm believer of the need to know the fundamentals myself. Having a solid grasp on existing solutions to common

This article explains the underlying causes of the error and the mechanism by which it’s detected, provides a few common patterns that may lead to the error and suggests a few possible fixes. The last chapter provides an explanation of why this check is important.