Name: A sneak peek into super optimized code in JS frameworks by Maxim Koretskyi | JSConf EU 2019
Uploaded: 2020-03-28T18:21:28.000Z
Duration: 23 min 21 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Transition words & phrases

My name is Maxim Koretskyi, but I'm also known as the Wizard because I like to talk and write

about complicated stuff, topics that sometimes are seen as mysterious, and hence the name

I'm going to be talking about why Angular and React, the top web frameworks we have

I will present a few JavaScript opened myself techniques that these frameworks use to make

This is where we develop the best data grid in the world, so, if you need the data grid,

we have a free community version with a lot of features, so definitely give it a try if

I'm also the founder of Angular and dev community where we write and publish articles about

So, we will be talking about three things today: monomorphism, bitfils, and filters.

How many know about monomorphism, watch talks?

I watched a talk by Benedict last year, gave a talk about monomorphism.

I will give you an overview of what it is.

I will talk about bitfils and how Angular uses structure known as bloom filters.

I sit at the computer with debugger and go through the sores of the frameworks.

These are the comments that I found inside Angular and React sources.

So these are the comments by technical leads of the frameworks, and they talk about hidden

And internal data structures called fibre and view nodes.

They want to ensure that these internal data structures share the same hidden class, and

that is to make property access monomorphic.

So a bunch of words when I first encountered that, I didn't really know what they were

We need to clarify today what is hidden class?

Why is it important in what are these data structures, like fibre and view nodes?

Fibre nodes and view nodes in Angular are used internally to represent a template, basically.

When you define a component, this is the declaration of a component in Angular.

Angular uses view nodes, data structures, that it creates to represent a template.

They define the metadata needed to render the DOM, and it also specifies which part

We also define components, we define a template, and React uses fibre node.

Fibre nodes and view nodes are used by these frameworks to represent a template.

This is something in between the declaration of a component template and the DOM.

What is common between these data structures is that they are used a lot when these frameworks

Imagine there's a function called update node, an example of a function, there are a bunch

of functions similar to this one in both frameworks.

This function takes in a data structure, fibre or view node as the first parameter and then

What is interesting that these kind of functions and the property access to easily exceed 10,000

So it reads the data structure 10,000 times, every single times, changes are being processed.

You can imagine how many times the framework in JavaScript needs to have access to the

The problem is virtual machines bike V8, it's a complicated process to figure out where

exactly in memory for the value of the property is stored.

Hence the virtual machine has optimisation techniques they use to make the process faster.

First, let me explain to you: when I was trying to figure out all that stuff, the question

Why is it complicated to figure out where the value is, right?

And the answer is because of something called shapes or hidden classes.

That is exactly the hidden class that Sebastian talked in his comment.

So every single JavaScript object that you write in your everyday code is represented

by the JavaScript object, the object internally, inside the VM, and this also is the corresponding

So shape defines or describes the layout, which properties the object has, and some

metadata, for example, the offset, where to find the value in memory.

You might think why do we need this shape, right?

Why not put all description of the properties on the object itself?

So, if we have two objects, on 1,000 objects, right, there's no need to describe the layout

We can describe the layout only once, and then link this object to the shape that describes

In this way, we only describe the layout once, even though we have, I don't know, potentially

What if we want to add an extra property?

Now we want to extend the object A. We want to introduce the new property "W".

We cannot add the W property to the original shape.

Because it would mean that the other object, the object B that points to the same shape

We need to introduce the new property and then the new shape.

The object now, the object points to the new shape.

The same thing happens if we introduce another property we create one more shape.

And so, in fact, we end up with something called Transition Chains.

And it means that, when you try to access the property, for example, X, the original

property on the A object which points to the button on the chain.