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

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.

​The Cost of Javascript Frameworks

TypeScript is taking over web development world. And it's developing very fast. Check out the article about the latest release v3.9 to find out about improvements in speed, IDEs integrations and some breaking changes.

​Announcing TypeScript 3.9.

Check out this ongoing discussion about Angular and Web Components. Learn about the pain points like change detection and share with us the challenges you faced while using Web Components with Angular.

​Using Angular with Web Components

From the community

The Deep Dive #2

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.

The Deep Dive #3

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

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

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

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.

The Deep Dive

The Deep Dive #9