Source map generators, Angular compilers and React as UI runtime

This article covers a basic overview and an in-depth explanation of the mechanics of JS code generators and source maps. We'll build our own generator from scratch.

​Source Maps from top to bottom

The article takes a look at the differences between ngtsc and ngcc, explores template and decorators compilation process and teaches you a few things about Angular compilers design principles.

​An in-depth overview of Angular compilers

​Builders, custom typescript transformers, custom tslint rules, schematics — how not to be overwhelmed and lay it all out in your head? This article intends to lay it out for you.

​Angular CLI flows. Big picture

From the blog

A great overview of the main ideas behind Crank.js and a small portion of valid criticism of React.js from the heavy user of the framework. Read the article to find out why React Suspense might not be a good solution and how Crank.js aims to re-use JSX templates ideas and build upon React's strong foundation.

​Introducing Crank

Amazing read that goes in-depth to explore the paradigm of Functional Reactive Programming and its constituent parts like Denotative and Continues Time Programming. It uses familiar concepts from web development to explain pretty theoritical topics in a gentle manner. The author also touches a little bit a topic of React and demonstrates how its concepts map to the ideas of FRP.

​The Misunderstood Roots of FRP

From the web

Check out the discussion to learn where the complex logic should go within this pattern and whether it's OK for a presentational component to have a container component as part of its template.

​A discussion of the Model-View-Presenter pattern

The Deep Dive #1

A deep-dive into the rendering process of Chrome, Angular Components Design Patterns and a case for using custom hooks in React components

A deep-dive into the rendering process of Chrome.

​Life of a Pixel

A critical look at how focus on bundle size as a measure of web performance can be misleading.

​JavaScript performance beyond bundle size

Learn how to use readable, writable, and transform streams with the Streams API.

The definitive guide to streams

​Through the pipeline

An overview of Incremental Static Regeneration, it's benefits and flaws.

​Incremental Static Regeneration

Web development

An overview of a couple interesting patterns when designing a component.

​Angular Component Design Patterns

Article describes how to correctly avoid redundant change detection runs.

​Running event listeners outside of the NgZone

Article outlines the issues and possible solutions you can encounter while using SSR through Angular Universal.

​Angular Universal: real app problems

Learn how to override well-known Angular schematics with custom logic.

​Customize your development process via Schematics

Angular

A deep dive into useRef that covers what it is used for, its mental model, practical examples and related concepts.

​React useRef Hook By Example

Dan Abramov shares a couple of fundamentals techniques to optimize performance before you apply useMemo.

​Before You memo()

Article makes a case for always using custom hooks in React components.

​Encapsulation

React

​Gatsby v3.0

​esbuild v0.9

Releases & News

The Deep Dive #15

Refactoring Angular codebase, 5 Types Of React's Application State and CSS utility classes paradigm

The article describes a transition from a very "semantic" approach in CSS to something much more like what is often called "functional CSS" (think Tailwind).

​CSS Utility Classes and "Separation of Concerns"

A nice introduction to functional concepts for programmers used to an imperative style. Although functional programming doesn't have answers to all problems, it certainly has some interesting ideas like immutability that allows for better architecture.

 ​Switching from OOP to Functional Programming

Many programming languages have one “non-value” called null. It indicates that a variable does not currently point to an object – for example, when it hasn’t been initialized yet. In contrast, JavaScript has two such non-values: undefined and null. This blog explains how they differ and how to best use or avoid them.

​undefined vs. null revisited

The article explores a pattern where a programmer passes a function that is not designed be a callback to other functions. This can lead to problems if a library is updated and parameters to the function change.

​Be careful with using functions as callbacks

The article describes a technique of lazy-loading non-critical resources, such as images or video content, only when a user interacts with UI requiring it.

​The Import On Interaction Pattern

If you see a project ridden with problems and bad practices, it might be tempting to start refactoring right away. But it is important to clear up several issues before getting to work. This article explains how.

​How to refactor an Angular codebase

Today we cannot use HostBinding with Observable data — it requires a plain value. This is a pretty sought-after feature. Learn from the article how we can implement it while we wait for the official support.

​Making HostBinding work with Observables

This article will teach you two ways to implement reactive and reusable forms that have the capability to be used as sub-forms and also be used as standalone forms.

​Implementing reusable and reactive forms in Angular

The author of the article identifies five types of state in React. Each type of state has a number of rules which it follows. It interacts with the other types of state in well defined ways — as long as it follows the rules. And based on these rules, you’ll find that there are ways of storing the state which just make sense.

​The 5 Types Of React Application State

​TypeScript 4.2

​Boa v0.11

​Snowpack v3.0

The Deep Dive #14

New Angular's UI library Taiga, tao of React development and computational caching fundamentals

​Learn about the concepts and practices that were used to build this awesome UI library. The article explains why you should try the kit for both new and old projects even with other components or UI libraries.

​Taiga UI is a new Angular UI Kit

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

​Angular and SOLID principles

Previous articles in the series discussed how to change imperative code in components to functional, reactive, RxJS way. This article will show you how start thinking in a reactive way right away without resorting to imperative code first.

​RxJS in Angular: Part III

In-depth guide into best practices of developing with React. It's a collection of principles and rules that have proven to be effective for the author who has worked with React for a long time. It touches multiple aspects of software development like components, state management, performance and testing. Very interesting read!

​Tao of React - Architecture & Best Practices

This article will explain the fundamentals behind and benefits of Computation Caching. While it'll be explaining this concept from the perspective of Nx, the Web platform, and using JavaScript code to demonstrate concepts, these concepts are still relevant outside of Nx, as well as with other platforms and languages!

​The Fundamentals Behind Nx’s Lightning Fast Execution

In this article Addy Osmani reviews the concept of zero-bundle-size React Server Components, which aim to enable modern UX with a server-driven mental model. He explains how this quite different to Server-side Rendering (SSR) of components and could result in significantly smaller client-side JavaScript bundles. Read the article to learn about server-side rendering limitations and how Server Components can help them solve it.

​React Server Components

Most applications have memory leaks. To see a memory leak in action it's necessary to open a browser and its dev tools to execute some manual steps. It's always a complicated procedure. The author of the article found a way to to test the memory consumption automatically using Puppeteer.

​Automatically detect memory leaks with Puppeteer

"Context vs Redux" has been one of the most widely debated topics within the React community ever since the current React Context API was released. The author put together this post as a definitive answer to the questions of what Context and Redux actually are, how they're different and how they're meant to be used. There's an interesting discussion about that topic on Reddit, definitely check it out.

​Why React Context is Not a "State Management" Tool

The Deep Dive #13

The secret to customization of Angular components, the need for redesign of the Web Platform and an alternative to React hooks

ngTemplateOutlet is a powerful tool for creating customizable components. It is used by many Angular libraries to enable users to provide custom templates. This article demonstrates how to use this functionality to make a component completely customizable.

ngTemplateOutlet: The secret to customisation

This post explores how a small adjustment can guarantee Good Action Hygiene (GAH), extensible reducers without action subtyping without the typical high code cost of NgRx. It introduces simple NgRx wrappers that make the Reducers adhere to Open/Closed principle and allow using of facades without breaking GAH.

Better Action Hygiene with Events in NgRx

That title has a lot of big scary words. The article first nails down some key terms and basic fundamentals before explaining how you can use action and data streams declaratively to react to user actions. It shows how by leveraging the power of RxJs operators we can transform our data and allow our template to subscribe to the Observable using the Async pipe.

Declarative, Reactive, Data and Action Streams

It’s an interesting overview of the current state of Web Platform. It describes major problems for web developers and consumers, like Chrome dominating the market, huge bundle sizes that cause slow loading time and others. It then goes on to speculate on how we can recreate simplicity in the platform again and do that for each of the two sides of the web — documents and apps.

​A clean start for the web

This long-read introduces an alternative approach to React hooks with all the same advantages and none of the problems that hooks brought with them. To explain this alternative, the author walks you through some SPA history and explores existing alternative component interfaces. It uses examples and ideas from Dan Abramov’s article on hooks to compare ideas. It’s an interesting story even for developers not familiar with React.

​Hooks and Streams

Responsive design has always been a challenge for web developers. Although the ability to define CSS based on an element width may well be the most requested CSS feature ever, today you can only apply styles based on the viewport size. The article explains how to implement responsive styles based on the container width without waiting for the feature to get into browsers. The suggested approach uses Resize Observer to add classes to elements which are later used as anchors in breakpoints.

 ​Responsive Components with Container Queries

Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation. With the entire page in memory, it can significantly improve the browsing experience because the browser can quickly and easily restore it if the user decides to return. If not handled correctly, it can cause underreported pageviews in tracking solutions like Google Analytics.

​Back/forward cache

The Deep Dive #12

Type safety in Angular v11, TypeScript performance optimization and Workspaces in npm v7

Angular 11 is released, and it's focus is on improving the type safety of APIs and fixing the issues. It also brought Webpack 5 opt-in support and some interesting features like lazy loading with named outlets. This article goes through the changes introduced in this version.

​Angular 11 - Towards the Type Safety

Angular gives us the mechanism to render components dynamically through View Container. The most dynamic component rendering mechanism would be the one where at the compile time we don't know what component will be rendered. This article talks about rendering an Angular component based on its selector, which is available only at run-time in the browser.

​Rendering dynamic components by selector name in Ivy

Learn Gitlab to build a CI/CD pipeline for Angular apps and libraries. This first article introduces Gitlab pipelines. At the end, you'll get a pipeline fetching project dependencies and running build and tests. It comes with many optimizations and reports integration in merge requests.

​Craft a complete GitLab pipeline for Angular

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.

​Make your mark with inDepthDev

There are easy ways to configure TypeScript to ensure faster compilations and editing experiences. The earlier on these practices are adopted, the better. Beyond best-practices, there are some common techniques for investigating slow compilations/editing experiences, some common fixes, and some common ways of helping the TypeScript team investigate the issues as a last resort.

​TypeScript performance optimization techniques

Cypress now offers full network stubbing support with the introduction of the cy.intercept() command. With cy.intercept() your tests can intercept, modify and wait on any type of HTTP request originating from your app. There are also many potential breaking changes, so go ahead and explore the changelog.

​Cypress v6 official release

NPM version 7 released two new long-awaited features: workspaces and better peer dependency management. Workspaces will change the way we handle dependencies for all projects and automatic peer dependencies will optimize a process that right now has to be done manually.

​NPM 7: This Is What I Call An Update

React Router is currently the most popular routing solution for building applications with React, but it might have too many features for smaller applications. Wouter is a minimalist routing library that implements only the most used functionality from React Router and targets the most recent environment.

​Wouter: A Minimalist Alternative to React Router

The Deep Dive #11

Responsive Angular components, What will replace SPAs and Observers API in JavaScript

Ever since mobile devices became capable of accessing the web, it became obvious that not all web pages are usable on a small screen. Today most websites implement responsive design, but often at a cost of extra DOM. This post will show you how to solve that last step in Angular.

Responsive Angular Components

JWT Tokens are widely used today for all kinds of authentication workflows. While it's clear what to do with them on backend, the question on the frontend is where to store them? We usually have two choices: LocalStorage or Cookies. This article goes over the pros and cons of each.

LocalStorage vs. Cookies

JavaScript runtime has rich set of observers to help with common development tasks. Previous articles in the series covered Mutation and Intersection observers. This article explains what is Resize and Performance observers and shows how to use them.

Observer APIs: Resize and Performance observers

How to stop being afraid and create your own builder

RSLint is part of an emerging trend consisting of writing JavaScript tooling in other languages that compile to native machine code. We recently mentioned ESLint bundler written in Rust, and now there's a JavaScript linter written in Go. The project is a fully-fledged JavaScript linter which strives to be as fast as possible with parsing error recovery capabilities built-in.

RSLint, a New JavaScript Linter Written in Rust

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. The article focuses on Core Web Vitals such as Largest Contentful Paint (LCP)
, First Input Delay (FID) and Cumulative Layout Shift (CLS) and outlines tools to measure them. Among others, there's a library to collect those metrics that uses PerformanceObserver to get the values from a browser.

Web vitals

Dead code elimination is a process wherein code that is not used is excluded from the code that is executed. Doing that in JavaScript is tricky because of the lack of static typing and code with side-effects. This articles outlines cases where code needs to be removed and possible complications that make this process difficult.

Dead Code Elimination in Javascript

Frameworks should lure people into the pit of success, where following the normal rules and using normal techniques is the winning approach. Tom MacWright doesn't think the SPA pattern (Single-Page Apps), which is a model frameworks like React, Angular and Vue follow, really is that pit of success. In his new article he outlines some new trends starting to form that solves problems common to SPAs like bundle splitting, server-side rendering and data fetching.

If not SPAs, then What?

An excellent post by Kent C. Dodds where he explains why contributing to a project you use everyday is the best strategy. He then outlines the steps to take like familiarizing yourself with codebase, figuring out where to contribute and creating your first PR. The aticle is concluded with a great list of resources on open-source contributions.

What open source project should I contribute to?

The Deep Dive #10

Demystifying Angular's router scroller, React animations with React-Spring and the state of RxJS with v7

The RouterScroller entity is a very interesting part of the Angular Router. In this post, the author is going to have an in-depth look at how it works, what makes its features possible and how it can be configured to suit a developer's needs.

​Demystifying Angular's router: RouterScroller

React-Spring is a modern React library based on spring-physics which is highly flexible and it covers almost all of the UI animation needs. It inherits animated powerful interpolations and performance, as well as react-motion’s ease of use. In this article you'll become familiar with the library.

​Taking React animations to the next level with React-Spring

This article discusses the state of RxJS, because the next major version – RxJS 7 – is around the corner. The author takes a close look at new features, deprecations, and removals in both v7 and v7.1 and outlines what to expect going forward in version 8.

​The State of RxJS. RxJS 7 and Beyond

Angular CLI schematics offer us a way to add, scaffold and update app-related files and modules. In this article I will guide you through some common but currently undocumented helper functions you can use to achieve your goal.

​Speed up your Angular schematics development

Until now, the only way to use Shadow DOM was to construct a shadow root using an imperative JavaScript API. This works fine for client-side rendering, however, many web applications need to render content server-side. Declarative Shadow DOM is what will bring Shadow DOM to the server.

​Declarative Shadow DOM

Typescript is gaining a lot of momentum. It's the second most loved programming language after Rust according to StackOverflow. In JavaScript we deal with lots of objects of different shape. In this article Dr. Axel Rauschmayer explores how objects and properties are typed statically in TypeScript. He goes in depth into the roles played by objects, the difference between objects literals and interfaces and the mechanism of type inference.

​Typing objects in TypeScript

With increasingly complex data structures and software systems, traditional test case based testing strategies cannot scale well to achieve the desired level of test adequacy. Differential (Diff) is one of the new testing techniques adapted to fill this gap. Over the past few years, differential testing has been quickly adopted at big tech companies. Incidentally, this technique is used by React core team to test the framework.

​Perception and Practices of Differential Testing

Very much inspired by Conventional Commits, the proposal of conventional comments aims to clarify and disambiguate intention of the reviewer. Nicholas Jamieson in his article explains how he uses this convention when reviewing RxJS pull requests. Also, there's an interesting discussion about that technique on YC.

​Conventional comments

The Deep Dive #9

Angular's push pipe, React as a black box and Cypress release with improved network stubbing support

The main idea behind the Angular push pipe is a new way of handling change detection locally instead of the global handling used in async pipe by Angular natively. It is implemented in a way we can get zone-less performance in zone-full applications.

New possibilities with Angular's rendering and the push pipe

Learn the best practices on how to build your custom validator in Angular by reverse engineering the built-in Angular validators.

​The best way to implement custom validators

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.

​In-depth explanation of state and props update in React

If you've used Cypress a lot you probably know about its network stubbing problems that cause tests to fail, especially in CI environment. A feature request to address that issue and bring more stability has been around for more than two years. Finally, it's been implemented and is available as a new experimental API.

​Cypress 5.1.0 release with full network stubbing support

An interesting take on how React is supposed to take care of the “how” so that we can focus on the “what” of our apps, but gradually fails to do that. And that happens because we no longer can predict the “how” part correctly. The articles also features the explanation from Tom Occhino, the Engineering Director of the React Group at Facebook, on why this happens.

​React is becoming a black box

JavaScript is growing explosively and is now used in large mature projects even outside the web domain. JavaScript is also a dynamically typed language for which static type systems, notably Facebook's Flow and Microsoft's TypeScript, have been written. What benefits do these static type systems provide? Read the report to find that out.

​To Type or Not to Type

The Deep Dive #8

Angular 10, React 17, Esbuild architecture and Git internals

Angular 10 has been recently released, yet it doesn't include any major features, so there were lots of questions about the purpose of the release. In this blog post Santosh explains that sometimes you need to take some time to prepare for a better future, and this is what Angular 10 release was all about.

​Angular 10 - Towards the Better future for Angular

Becoming a Git pro. Part 1: internal Git architecture

This articles shows a very powerful DI technique in Angular that uses a concept knonw as private providers. This approach can help you simplify your components with a lot of dependencies or give you an alternative when gradually refactoring large pieces of logic.

​​​Make the most of Angular DI: private providers concept

A monorepo is a single git repository that holds the source code for multiple applications and libraries, along with the tooling for them. Learn how to build full-stack apps with your preferred framework, integrate with modern tools and reinforce best practices.

​What makes Monorepo development so powerful with Nx?

It has been two and a half years since the previous major release of React and recently React team has published the first Release Candidate for React 17. This blog post describes the role of this major release, what changes you can expect in it, and how you can try this release.

​React v17.0 Release Candidate

This article explores a new approach to building web applications called "Islands" architecture: render HTML pages on the server, and inject placeholders or slots around highly dynamic regions. These placeholders/slots contain the server-rendered HTML output from their corresponding widget. They denote regions that can then be "hydrated" on the client into small self-contained widgets, reusing their server-rendered initial HTML.

​Islands Architecture

Esbuild is a new JavaScript bundler that brings order-of-magnitude speed improvements in the JavaScript bundling process. This is a deep dive into its internal architecture that maximizes parallelism (e.g. when parsing, printing, and generating source maps), tries to do as few full-abstract syntax tree (AST) passes as possible for better cache locality, and supports incremental builds.

​Esbuild architecture

The Deep Dive #7

In-depth guide into animations in Angular, reverse-engineering React and the experience of switching between frameworks

Explore the various animation methods in Angular, their use cases, implementation, and some tips on performance, debugging, and reusability.

​In-Depth guide into animations in Angular

This article demonstrates on practice how to apply guidelines and principles of successful reverse-engineering to break down and understand React's fiber functionality from the ground up.

​Practical application of reverse-engineering principles

This article explores the nullish coalescing operator - another upcoming ECMAScript feature that goes hand-in-hand with optional chaining.

​Double Question Marks TypeScript 3.7 - Nullish Coalescing

Check out these advises backed by concrete examples which can help you improve your developer skills and give you some practical tricks.

​5 tips to boost your Angular skills

An excellent article by Svelte's author Rich Harris where he shares his views on some problems with the state of the art in web development today. Don't forget to check out a great discussion of the article in the following comments.

​In defense of the modern web

The article outlines four ways to request remote data - inline, centralized, custom hooks and react-query/swr and explores each in detail.

Angular in Depth course series

the deep dive you've been waiting for

The Deep Dive #1

Source map generators, Angular compilers and React as UI runtime

From the blog

Source Maps from top to bottom

An in-depth overview of Angular compilers

Angular CLI flows. Big picture

From the web

Introducing Crank

The Misunderstood Roots of FRP

A discussion of the Model-View-Presenter pattern

Featured newsletters

The Deep Dive #15

The Deep Dive #14

The Deep Dive #13

The Deep Dive #12

Angular in Depth course series

the deep dive you've been waiting for

The Deep Dive #1

Source map generators, Angular compilers and React as UI runtime

From the blog

​Source Maps from top to bottom

​An in-depth overview of Angular compilers

​Angular CLI flows. Big picture

From the web

​Introducing Crank

​The Misunderstood Roots of FRP

​A discussion of the Model-View-Presenter pattern

Featured newsletters

The Deep Dive #15

The Deep Dive #14

The Deep Dive #13

The Deep Dive #12

Source Maps from top to bottom

An in-depth overview of Angular compilers

Angular CLI flows. Big picture

Introducing Crank

The Misunderstood Roots of FRP

A discussion of the Model-View-Presenter pattern