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

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.

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

Our guest tells us about mutation testing, how Stryker came to be and how Stryker improves performance with mutation switching and coverage analysis.

​Episode 6: Mutation testing with Stryker

The Deep Dive #11

Type Systems overview, React.js Performance Profiling and how-to on setting up Nx-style monorepo with Angular CLI

In this article, we'll start exploring how JavaScript's type system compiler works. Specifically, we'll focus on type checks functionality. Starting with an overview of type systems, we'll proceed to build our own compiler which can run type checks and output messages.

​Under the hood of Type Systems

An in-depth series of tutorials on setting up an Nx-style monorepo workspace with the Angular CLI. In this first part, Lars will show you how to create an application project, add a feature shell library and wrap it up with end-to-end tests.

​Nx-style monorepo with Angular CLI

This is a real-world case-study from Tobias Schweizer who explores the architecture they built to enable the usage of UI components for CRUD operations. He describes the approach in great detail highlighting OOP mechanisms they used like abstract classes and inheritance.

​Shared logic for CRUD UI Components

As you may already know, Deno v1 is out. Our regurarly member Tim Deschryver has already decided to give it a try. He describes his experience of creating a minimal API server and covers initial setup, watch mode, modules system and debugging.

​Trying out Deno for the first time

Another impressive article by Addy Osmani. This time he focuses on prifiling React performance. First he shows how to use React Profiler API to measure component render performance, then he demonstrates React's new experimental Interaction Tracing API and wraps it up with User Timing API provided by web platform.

​Profiling React.js Performance

This in-depth article touches a very important topic of shipping too much JavaScript to a browser by the way of using frameworks. It compares metrics across websites that use jQuery, Vue, Angular and React and ends up with some very interesting results. Read the article to discover how much of a performance penalty we're paying when we make these frameworks the default starting point.