What every front-end developer should know about change detection in Angular and React

2020 is the year you can help the Angular ecosystem thrive.

How to respond to Angular Ivy in 2020/2021 if you're a library author.

The createAction creator function opened opportunities in the NgRx world. With it came two other creator functions, createReducer and createEffect. Let's take a look at what's so special about it and why it's important.

In this article, we'll iterate over an implementation to introduce multiple independent instances of a NgRx store slice. In an application, these instances can be represented by a tab-like interface. To come to a solution we'll use the Angular Router, NgRx Effects, and NgRx Router Store.

We have collected the top 15 Angular INDEPTH articles of 2019.

The Angular Ivy runtime introduces a new concept called component features. Component features are mixins for components. They add, remove or modify traits at runtime.

Learn how you can handle dynamic items size for Angular CDK virtual scroll by providing your own VirtualScrollStrategy.

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 post is going to cover how to build an Angular Project with P5JS. I’m going to walkthrough creating a basic sketchpad, and also discuss some cool things that you can do in your own applications.

Building a robust component architecture.

This article will teach you what you need to know to successfully implement multi-language Angular applications rendered server-side.

This article describes my experience tuning up angular application using a few common and a few lesser known techniques related to change detection. Doing so helped me learn how change detection in Angular works under the hood.

Ivy engine has brought (and also will bring) a huge amount of new features. Honestly, I always dreamed of having an opportunity to load modules asynchronously, and most importantly, components, you can do that with one line of code in Vue: Vue.component('lazy', () => import('./lazy.component')); For sure we could lazy load any non-routable module by adding it to the lazyModules property in the Angular’s config and then override NgModuleFactoryLoader token with SystemJsNgModuleLoader, but thi

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

In this post I will be building out an API with Google’s Firebase. I will be building out the back-end with Firebase Cloud Functions and ExpressJS.

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.

Refactoring the zippy application using SCAMs.

Cypress is an Open Source JavaScript testing framework. Cypress enables e2e, integration, and unit tests in your projects. The e2e features of Cypress are what get the most attention currently, because of both the quality of the experience and the large amount of benefits it provides.

Or how my dreams of writing a game started by animating a square block I love playing games. And I love coding too. So, one day, I got thinking, why not use those coding skills to make a game? But it sounds hard. How would one even get started? > With baby steps. First, we need some 2D graphics. In this case, it’s moving some blocks on the screen. So, in this article, I will show how to draw and animate objects using the HTML5 Canvas [https://www.w3schools.com/html/html5_canvas.asp] and Java

In the process of building my application, I used Firebase Cloud Functions that are called by triggers in the Firebase Cloud Firestore. Basically, whenever a record is written to specific collections in my app’s Firestore, the Cloud Functions trigger Slack notifications.

In this post, I’m going to define what a JAM stack is and walk you through how I used it to build a learning app recently. I’m going to showcase a few key areas where the JAMstack greatly improves the development experience, and takes a lot of the work out of maintaining applications.

Create components and directives for manual tests.

Learn the ins an outs of Angular dependency injection in automated tests.

The first Angular In Depth conference is coming up.

By visualizing your UI component library both developers and designers become more productive. In this article, I first describe how to build a component library with Angular CLI. After the library is done, I write some stories in Storybook to test and document the UI components. Storybook [https://storybook.js.org/] is a UI component explorer [https://blog.hichroma.com/the-crucial-tool-for-modern-frontend-engineers-fb849b06187a] that visualizes components in different states. Storybook en

NgRx is an open source library that provides reactive state management for your Angular applications. Inspired by Redux, NgRx provides a way to maintain...

Should these states be part of NgRx Store to begin with? TL; DR: It depends… However, we’ll look into the pros and cons of different approaches. If you chose to make the loading/error as part of the state, make sure they are encompassed within a single property. Does handling multiple interconnected properties that represent the same AJAX call ✨spark joy✨? If not, then it’s time to let them go and use a single property insteadNot so long ago Michael Hladky started a very interesting discussion

NgModule is arguably one of the most confusing Angular concepts.

The following post is going to give a high level view of the AngularFire library, and how it works under the hood. I’m going to walkthrough a simple grocery list app I wrote, and show how using AngularFire makes things seem to work like magic.

Tree-shakable dependencies are easier to reason about and compile to smaller bundles.

This article explains the difference between applying an asyncScheduler as an argument and passing it to the observeOn operator

If you’ve done anything in web development in the past year, you’ve undoubtedly heard of CircleCI and Firebase.

Learn tactics for testing RxJS observables and application state commands. Opt out of Angular testing modules for blazingly fast unit tests.

Lazy load your locale when changing countries. The other day I read Using TypeScript Dynamic Imports in Angular [https://netbasal.com/using-typescript-dynamic-imports-in-angular-d210547484dd] by Netanel Basal [https://medium.com/u/b889ae02aa26] where he says: > TypeScript 2.4 added support for dynamic import() expressions, which allow us to asynchronously load and execute ECMAScript modules on demand. This sounded like something I had to try! I already had the perfect use case from my pr

Container components are extracted from mixed Angular components to increase the maintainability, testability and scalability of our Angular apps.

Dust off the history books and discover the origins of the MVP pattern.

Manage complex Angular applications with the MVP design pattern.

> 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

You're probably only using ngrx/effects to handle the communication to an external source by triggering an effect with a NgRx action.

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.