The Deep Dive #12

Dec 09, 2020

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

From the blog

ngTemplateOutlet: The secret to customisation

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.

Better Action Hygiene with Events in NgRx

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.

Declarative, Reactive, Data and Action Streams

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.

From the web

​A clean start for the web

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.

​Hooks and Streams

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.

​Responsive Components with Container Queries

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.

​Back/forward cache

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.