Talk about the cognition of the modern front-end frame

This chapter talk about the modern front-end framework of the cognition, there is a certain reference value, the need for friends can refer to, I hope to help you.

So why do people need to choose various frameworks now?

In fact, we need to choose a framework now, essentially because the demands we face are changing. We all know that if we only write a page that displays information purely, there is no interactive function of the page, in fact, even now, we do not need to choose the framework, we only need to write a few lines of CSS and HTML to complete the task. So because of the complexity of the requirements we face, our applications often need to do some interaction at runtime.

There are three very important words in it. I marked it in bold, called Run Time (runtime). Modern front-end development, the applications we develop often need to do some interaction at runtime, and these interactions are just a few simple interactions in the early stages of a slide or tab-Toggle drop-down menu, and these interactions are completely fine with jquery implementations. But the modern front-end our goal is to use the web to the PK native application, goes and native carries on the PK.

That's when we find that using jquery to develop applications and our code becomes difficult to maintain, why is it easier to maintain with modern frameworks such as vue,react?

The difference between Vue and jquery is only a little, declarative and imperative.

Let's think about it, what is the purpose of using jquery to manipulate the DOM? is to partially update the view, in other words, to partially re-render.

jquery is the command-style operation of the DOM, the command-style partial update view, and the modern mainstream framework vue,react,angular, etc. are declarative, declarative partial update view.

Why does the declarative manipulation of the DOM allow the application to be well maintained?

To understand the problem first, let's start with a brief introduction of what is imperative and what is declarative.

Command type

Imperative, like jquery, is what we all want to do and then we're done, like the following code:

$ ('. Box ').  append (' <p>Test</p> ').  xxx (). YYY ().  jjj ()  .

Imperative is to do what you want to directly call the method directly to the end of the dry, simple and direct rude.

Imagine a very simple scene, such as a toggle effect, and click on a button to toggle the color.

Written in an imperative way, we must write this, if the current color makes it a different color.

If you think about it, it can be subdivided into two behaviors, one for state judgment and the other for DOM manipulation.

Then what is declarative??

Declarative

Declarative is done by describing the mapping between the state and the view, and then manipulating the DOM through such a mapping relationship, or by using such a mapping to generate a DOM node to insert into the page. Like the template in Vue. The role of the template is to describe the mapping of the state to the DOM.

The same scenario, we use the template in Vue, when we use the template to describe the mapping relationship, when we click on the button, we only need to change the color of the variable to complete the requirements.

Do you see the difference?

Think carefully, use Vue to achieve the same needs, if the subdivision, we have only a logical behavior, only state. While jquery is a two-action, state-+dom operation.

So why can declarative simplify the complexity of maintaining application code?

Because it allows us to focus on the maintenance of the State. In this way, when the application is complex, in fact, our thinking, we manage the code only in the state, all the DOM operations are not concerned about, can be said to greatly reduce the complexity of code maintenance.

We no longer need to focus on how to manipulate the DOM, because the framework will help us do it automatically, and we'll just focus on the state.

But if the application is particularly complex, we will find that even if we are only concerned about the state of maintenance, it is still very difficult, even if only maintaining the state is difficult, so the emergence of vuex,redux and other technical solutions.

What is rendering?

After the introduction, you will find that the most essential problem of the modern mainstream framework to solve is still rendering, but the different frameworks between the solution has a difference, then what is the rendering?

Now the development of the front-end, our application in the runtime need to constantly do various interactions, the modern mainstream framework lets us focus on the maintenance of the State, that is, the application at runtime, the application of the internal state will continue to change.

Instead of inserting the state-generated DOM into the page display in the user interface, this set of processes is called rendering.

The processing of modern front-end frame for rendering

When the application is running, the internal state changes constantly, and a local area of the user's page needs to be re-rendered continuously.

How do I re-render?

The simplest and most brutal solution, and the most common way I usually write some simple features in a project that doesn't use any framework, is to use the state to generate a new DOM, and then replace the old Dom with innerHTML.

I write the small function block in this way no problem, because the function involves a few DOM tags, state change, almost is my function block of all the tags need to change, so even with innerHTML will not have too much performance waste, is within the acceptable range.

But the framework does not, if the framework with innerHTML to replace, it is not part of the re-rendering, but the whole page refresh, the nature of the change, then the framework how to do partial re-rendering?

Solve this problem, need some technical solution, can be virtualdom, but not necessarily must be virtualdom, also can be angular in the dirty detection process, also can be fine-grained binding, like Vue1.0 is the use of fine-grained binding to achieve.

What is fine-grained binding?

Fine-grained binding means that when a State is bound to a specific label on the page. That is, if there are 10 tags in the template that use a variable, then the variable is bound to 10 specific tags.

Relative react and angular granularity are relatively coarse, their change detection actually does not know which state variable, so need a violent comparison, before you know which part of the view needs to be updated.

And Vue this fine-grained binding of its real state changes in that moment, immediately know which state has changed, but also know what specific tags use this state, then things become much simpler, directly to the state of the binding of these specific tags to update can achieve the purpose of local update.

However, there is a price to do this, because the granularity is too thin, there will be a certain amount of dependency tracing overhead. So Vue2.0 started to take a compromise by adjusting the bindings to medium granularity.

One of the benefits of a state that corresponds to a component rather than a specific label is that it can greatly reduce the number of dependencies, after all the number of components is much smaller than the number of specific tags in the DOM. However, this requires more than one operation, when the status changes are only notified to the component, then the component inside how to know the specific update which DOM tag??

The answer is Virtualdom.

That is, when the granularity is adjusted to medium, one more action is to use virtualdom inside the component to re-render.

Vue is smart enough to detect +virtualdom by changing the two technical solutions, which improves the performance of the framework operation.

So, Vue2.0 introduced virtualdom not because of how good virtualdom is, but precisely virtualdom the combination of change detection can adjust the binding to medium granularity to solve the dependency tracing overhead.

About change detection I've written articles about how Vue realizes change detection. Portals.

So the way of change detection, to a certain extent, has determined how the framework is rendered.

On the realization principle of virtualdom I wrote a ppt, interested can look at the portal.

There is also a template compiled, in fact, the template compiled before the problem does not say too much, the role of the template is to describe the relationship between the state and the DOM mapping, through the template can be compiled a rendering function, the execution of this rendering function can be provided in Virtualdom Vnode, In fact, you've seen the PPT in front of me about the virtualdom principle, you'll know that virtualdom the node diff is actually a diff vnode. About the implementation principle of template compiling I wrote an article about the portal.

Summarize

Now the front-end I personally feel a bit impetuous, a lot of people are chasing new, daily pay attention to some today out of a new feature, tomorrow out a new framework what, for these I am in favor of, but I hope in the pursuit of new at the same time, to see its essence. The ultimate goal of all technology solutions is to solve problems first, then there are solutions, solutions may not be perfect, there are many possible solutions, so what are the pros and cons of them? What trade-offs and tradeoffs have been made while solving the problem? We need to look at the nature through the phenomenon and not be fooled by the surface.