Max Koretskyi - inDepth.dev

From zone.js to zoneless Angular and back — how it all works

Explore the mechanism behind automatic change detection in Angular with zone.js and use cases when to jump in and out of Angular zone

angular

Change detection and component trees in Angular applications

We can think of an Angular application as a tree of components. Under the hood, for components Angular uses a low-level abstraction called View. In this article we'll take a detailed look how component tree corresponds to a tree of views

angular

Rendering cycle in Angular applications — browser, angular and zone.js interaction

Modern web stack involves lots of moving parts. Let's take a look at all the actors and their functions in a typical Angular application.

angular

Overview of Angular’s Change Detection operations in Ivy

In this article I want to provide an overview of all operations that Angular runs during change detection in the new Ivy engine.

Ukraine and In-Depth’s founder need your help

Over the years inDepth.dev has helped millions of people — YOU CAN HELP us now! Every dollar counts.

writing

Make your mark with inDepthDev

At inDepth we strongly believe that writing technical articles is one of the most effective ways to learn a topic at a deeper level. Investing your time and effort into acquiring valuable knowledge and sharing it with peers is the most rewarding path to professional growth.

javascript

How to debug a child process in Node and Gatsby.js with Chrome

This article will show you how to patch `jest-worker` package used by Gatsby.js and by patching enable child process debugging using Chrome Dev Tools.

react

Inside Fiber: in-depth overview of the new reconciliation algorithm in React

Dive deep into React's new architecture called Fiber and learn about two main phases of the new reconciliation algorithm. We'll take a detailed look at how React updates state and props and processes children.

webpack

This is how angular-cli/webpack delivers your CSS styles to the client

Have you ever wondered how is it possible to import CSS into JavaScript files? In this article I'll show you how Webpack does it by transforming your CSS styles into JavaScript.

javascript

Becoming a Git pro. Part 1: internal Git architecture

In this article we'll explore internal architecture of Git step by step using practical exercises. We'll see how Git stores content, what is a tree object that underlies a commit and how a branch is just a text file.

webpack

This will make you more efficient at debugging Webpack unspecified build errors

In this article we'll build a very primitive plugin for Webpack and then I'll show you how to find out if this plugin triggers error by debugging Webpack build.

javascript

Dijkstra was right — recursion should not be difficult

In this article I explain the idea of recursion and show where it could be helpful. Then I proceed to introduce and explain a number of topics and ideas that will help you when practicing recursive problems.

javascript

Here is why appendChild moves a DOM node between parents

A light introduction into DOM fundamentals through an insightful quiz. You'll learn how HTML is transforms into JavaScript objects to eventually become part of the Document tree.

javascript

Gentle introduction into compilers. Part 1: Lexical analysis and Scanner

A deep dive into ECMAScript (JavaScript) specification and internals of TypeScript compiler. In this first part I'll explore lexical grammar and explain TypeScript's scanner implementation details.

angular

Here is what you need to know about dynamic components in Angular

We start with the comparison of dynamic components functionality in Angular and AngularJS and then continue with main concepts that enable dynamic components to you an extensive overview of the dynamic components functionality in Angular.

angular

Exploring Angular DOM manipulation techniques using ViewContainerRef

The article explores common elements used for DOM manipulation in Angular with a particular focus on ViewContainerRef. Learn why they are needed, how they work and when you need to use which.

dependency-injection

Why do we have Dependency Injection in web development

An in-depth look at why and how we implemented Dependency Injection (IoC) Container in ag-Grid. In the article I also explore the benefits DI brings in web development.

javascript

Inside ag-Grid: techniques to make the fastest JavaScript datagrid in the world

The main idea is to review patterns and techniques that we use under the hood to build the fastest datagrid while also providing ample customization opportunities. Since ag-Grid is open source, you can follow along by exploring source code on github when I link to it.

javascript

Developments in Web Components I’m excited about in 2019

I'll go over a developments in Web Components I’m excited about in 2019.

indepth.dev

Connecting the dots: where hard work and dreams can lead you

This is the story behind AngularInDepth and inDepth.dev. It recounts obstacles I’ve gone through, emotions I had to face, people who helped me and lessons I’ve learned along the way.

react

In-depth explanation of state and props update in React

This article uses a basic setup with a parent and children components to demonstrate internal processes in Fiber architecture React relies on to propagate props to child components.

angular

A gentle introduction into change detection in Angular

This article describes the use case that results into common ExpressionChangedAfterItHasBeenCheckedError and uses it to explore change detection mechanism and related internal implementation details in depth.

angular

The difference between NgDoCheck and AsyncPipe in OnPush components

This article uses NgDoCheck and AsyncPipe to dive deep into manual control of change detection in Angular and explains what effect each method can have on performance.

angular

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

Dive into change detection by learning the problems it solves and studying basic implementation with browser API. Then go through implementation details of change detection in Angular and React for complete understanding.

react

The how and why on React’s usage of linked list in Fiber to walk the component’s tree

This article explores the main the work loop in React’s new reconciler implementation called Fiber. It compares and explains the differences between browser's call stack and the implementation of the stack in React's Fiber architecture.