The Deep Dive #3

Jun 04, 2020

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

From the blog

​Exploring the state of reactivity patterns in 2020

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.

​Testing Angular routing components

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.

​Component styling technique to reduce your bundle size

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.

​Efficient workflows with ESLint, Prettier and TypeScript

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.

From the web

​JavaScript: the First 20 Years

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!

​The Perils of Rehydration

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.

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

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.

From the community

​Exploring the state of reactivity patterns in 2020

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.