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

From the blog

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

From the web

The Deep Dive #7

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

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

Our guest in this episode tells us about his full-stack framework for rapid application development called Nawah. Its philosophy is that configuration gets us 80% of the way.

​Episode 5: Rapid application development

The Deep Dive podcast

The Deep Dive #9

Improved error logging in Angular, unexpected RxJS patterns and the why for linked list in React internals

For the years, one of the biggest pains in Angular was debugging, particularly because of the error messages coming from the compiler. The biggest challenge was missing stack trace of where the actual error occured. Ivy improved it a lot and now gives us the line number too. Read about the improvement in this article.

​Improved Error Logging by the Angular AOT Compiler

In this article we'll look at some interesting and often unexpected behavior of common RxJS operators like withLatestFrom, toArray, takeUntil and others.

​RxJS: The Unexpected

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

​The how and why on React's usage of linked list in Fiber

This article is a bit old but probably one of the most authoritative explanations of how a browser renders a frame, what's involved in shipping pixels to screen and what fires when and why. If you've always wondered where exactly the code you put into requestAnimationFrame is executed definitely give this article a read.

​The Anatomy of a Frame

A very good article from Ben Lesh on how Observables fit into Reactive Programming and RxJS. He explains how Observables are not RxJS with RxJS just being a library of functions built around observables, not the other way around. The article also outlines a few things that could have been done to make this distinction more evident.

​Observables, Reactive Programming, and Regret

This is a very technical document outlining the deficiencies of using TypeScript in projects like webservers where extreme performance is required. This story might be interesting for developers working on tooling or library code using TypeScript as the main language.

​Using JavaScript instead of TypeScript for Deno internals

Builders and schematics originally came from the Angular CLI, but can be used outside of Angular project, for example as plugins to the Nx CLI. Santosh Yadav tells us about his experience with creating builders and how they are related to schematics and Nx plugins.

​Episode 2: Builders, schematics and Nx plugins with guest

The deep dive podcast

The Deep Dive #5

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.

​Four Ways to Fetch Data in React

The first extensive study of so called flaky tests, i.e. tests with unreliable outocomes that that can intermittently pass or fail even for the same code version . This is a must read if you have to deal tests failing on CI or want to understand the reasons for such unexpected behavior.

​An Empirical Analysis of Flaky Tests

What's the experience like for a React developer to start developing Angular applications? What's it like coming from Angular to React? Which were the most difficult parts to learn? How are the frameworks different? A panel of guests share their experiences.

​Episode 3: Switching between Angular and React

The Deep Dive #6

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

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

Web development

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

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

React

​TypeScript 4.2

​Boa v0.11

​Snowpack v3.0

Releases & News

The Deep Dive #14

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

Reusable components in Angular through templating, deprecation of toPromise operator in RxJS, and the rendering engine exploration in SolidJS

This article will teach you about the difference between ng-content and ng-template . Kevin first explains the use for templates and slots in Angular and then demonstrates how they fit in to the concept of dynamic components. To demonstrate the practical usage, he builds a flexible "expander" component using both approaches and highlights benefits and disadvantages of each.

​Creating flexible and reusable components

Ryan, who's the author of Solid library, put together an in-depth article that explores the relationship between reactivity and rendering. He uses the internals of Solid library to demonstrate the main mechanisms that make up the library's reactive renderer.

​SolidJS: Reactivity to Rendering

In RxJS 7 toPromise will become deprecated and with RxJS 8 it will be gone. This article explains the reasons for the change and mentions an alterantive technique that you should be using in your code starting today.

​toPromise is being deprecated

In user experience, there's a concept from the called "progressive disclosure", which is an approach to designing better user interfaces (UIs). The main idea is to defer advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone. This article explores this concept and outlines a 4 step process to introduce progressive disclosure to complex systems.

​Progressive Disclosure of Complexity

This article explores the impact React had in the social, cultural, and technological areas. It features comments from prominent figures in web development on modular design enabled by React and the trend of "shoving everything into JavaScript".

​The rise of React

This article outlines a very interesting approach to measuring performance that uses CPU instruction count as the main metric.

​JavaScript component-level CPU costs

The Deep Dive #4

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

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

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

Styling techniques to reduce your Angular bundle size, state of reactivity in JS frameworks and the fascinating 20 years of JavaScript

In this article Ryan Carniato, the author of Solid library, explores an implementation of the "view as a function of state" principle in popular UI libraries React, Vue and Svelte. Read it if you're interested to learn what every one of them brings to the table when it comes to implementing reactivity patterns.

​Exploring the state of reactivity patterns in 2020

This article will teach you about shallow and integrated routing component tests. You'll learn how to user RouterTestingModule correctly and where it can help in integrated routing component tests. To explore the module, the article discusses the Location service and its dependencies.

​Testing Angular routing components

In this article Santosh shares his stuggles to finding the culprit of large bundle size of Angular components. He suggests to try a few unconventional things like turning off view encapsulation for components and instead using Host Binding to wrap the styling. The article ends describing the effect these measures can have on a bundle size of an application.

​Component styling technique to reduce your bundle size

This is an indepth overview of the essential development tools by Serkan Sipahi. For a long time he opposed using ESLint and Prettier, but eventually he found a few compelling reasons to adopt them. Eventually he decided to dive deep into the configuration options of these tools and figured out a few common workflows that made him more efficient. In this article he talks about the findings and outlines an approach that worked for him.

​Efficient workflows with ESLint, Prettier and TypeScript

This is a fundamental work by Allen Wirfs-Brock (editor of ES6) and Brendan Eich (the inventor of JavaScript). This paper primarily tells the story of the creation, design, and evolution of the JavaScript language over the last 20 years. It doesn't only talk about the technical details of the language, but also tells the story of how people and organizations competed and collaborated to shape the JavaScript language which dominates the Web of 2020. Please note that for some reason the website takes very long time to load, so open it in a browser tab and let it stay there for a while. The content is worth it!

​JavaScript: the First 20 Years

This piece is a great exploration of how React works in a server-side-rendering context when ReactDOMServer API is used instead of browser's ReactDOM. Josh starts his story with React component being rendered in the wrong spot and continues to explore how frameworks that use SSR differ from traditional client-side apps built with React. He comes to the critical realization that rehydration is not the same thing as a render. The article also introduces a concept of two-pass rendering to solve common problems and describes performance implication of using it in the real world.

​The Perils of Rehydration

In this great article Evan You, the creator of Vue.js library, talks about the process of completely rewriting the library. He talks about the reasons that inspired the rewrite and outlines the architectural challenges the team faced to make the framework faster and smaller. In the end Evan explores various needs and use cases of existing library users and how the rewrite seeks to strike a balance between various trade-offs for them.

​Lessons from rewriting the next major version of Vue.js

If you've read the article about reactivity patterns and wondering why Ryan didn't include Angular check out this discussion where Lars asked exactly this question.

From the community

The Deep Dive #3

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.

The Deep Dive