How I built a super fast JS/TS framework

#javascript #vue #react #showdev

How do other frameworks operate?

What if we didn't use Virtual DOM at all, instead work with real DOM instead? To answer this, we first need to understand how most frameworks work, to better illustrate this I drew a small example.

Violet are DOM/VDOM nodes, Blue = state, Red = diffing, Green = patching. I should explain what happens in this picture. So most of the frameworks that have state and DOM, act like this when something in the state is modified. In this example, state.bg has changed. So now we iterate through all of the nodes (those 5 steps) and renders them. If something is changed, then patching happens where rendered stuff goes to actual DOM (green action). Ok, that's cool, but why do we need to iterate every single node (note that here come those diffing algorithms that compete with each other and some does diff differently) when only state.bg changes?!..

So back to my original question “Why do we need Virtual DOM ?”, the answer is to iterate through all of DOM more quickly. Ok, so what if we didn't iterate?

Utopia way of doing this

But I want to show you the way that in my head it should work without diffing nor iterating, nor Vnodes for that matter as well.

So in this utopia way we changed the same state.bg and there is no iteration (so no need for Virtual DOM), only one render (that single red dot), only one single parameter/attribute/node modifies which is affected by state.bg changes. Much less unnecessary iteration, unnecessary memory usage for virtual nodes, much less rendering = much faster.

Motivation

1. Small bundle size
Many of the modern frameworks are very large. I honestly do not believe that the application “Hello World” should weigh more than 10kb.
To solve this problem, I decided to use a declarative way to describe the components. This has a positive effect on the final size of the application and allows you to use the tree-shaking directly in the component template.
Playground

2. Truly reactive
I really wanted to implement reactivity as it was done in VueJS. If you change the entity of something, then the data on the page also changes, and if you change the data, the entity changes.
Playground

3. Pure reusable components
Any framework should be able to create life-cycle-aware components. This removes duplication of code and allows the component to be reused in several places.
Playground

4. Conditional render and list render directives
I really like the ReactJS, very straight, the first acquaintance, it was just wonderful. However, if you need nested conditional rendering, you will have to either use component wrappers or make ternary expressions that are difficult to read.
Playground