Now the algorithm is an important factor for the success of the new-sharp front end framework

With the popularity of the front-end MVVM, the small frame is now more and more difficult to survive! React, angular and other large companies in the banner of the framework accounted for half, and Avalon with its good compatibility in the domestic share of the rising.

The front end is the same as the back end, following the Matthew effect, the stronger the strong, the weaker the weaker. Finally, there are only two frames left, and the framework of bugs is constantly being found and no one is used. MVVM is inherently a very complex layered architecture. The computed attribute uses half of the GOF design pattern, and the two-way binding binds 6, 7 DOM events (like Angular,avalon in order to be compatible with IE6, the number is more than 10). But in spite of this complexity, if the user is unaware, used well, and useful for business development, it will naturally be used by someone. So now many companies in the country, in order to maintain the nature of the page form from the jquery-based architecture, to Ng, React, Avalon as the core architecture.

Framework for someone to use, there is a new need for it. With new needs, there is a new feature. With new feature, the framework expands. In the past, angular used dirty detection, and Avalon used attribute hijacking to listen for changes in the data, thus enabling the page to refresh intelligently. But as people use more and use it well, especially back-office systems, these frameworks start to take over some of the extra-large pages. On 2000 bindings, angular on the ground, on 10,000 bindings, and Avalon breathless. MVVM is experiencing a performance problem.

The front end typically does not experience performance issues and is experiencing performance problems that indicate how high the front end is. Some people know that the front-end problem is abstracted into two points: complex walls and performance walls.

Too complex things, we can split into small pieces, to divide the treatment method. such as modularity, assembly.

Performance problems, the backend tells us that using a lot of cache algorithms and pools, this avalon1 is already in use. Like angular such a cow frame, of course there is a very cow algorithm, but not enough cattle, so down. Until react with the virtual Dom came to our eyes.

What is virtual dom? Is it a DOM tree that is drawn with ordinary objects? That's just part of it. It contains three items: Vtree, diff, Patch.

Vtree is a few small libraries on the build virtual dom,github that teach you how to create a virtual DOM with Velement, Vcomment, Vtext three ways (and of course vthunk, vwidget? what), but in such a clumsy way, apparently no one is used. So react packaged a template engine called JSX to generate the virtual DOM.

diff, the difference between the virtual Dom before and after the comparison, react all the changes into 7, 8 changes, convenient later for different changes to apply a different refresh function. This involves many algorithms, such as the normal DSF traversal algorithm, the shortest editing distance algorithm (as long as it is used to compare the changes of two lists)

Patches are apps that change to the real DOM, which is similar to SVN version management, getting different points and modifying the existing version. But how do you know if this virtual DOM corresponds to a real dom? Do you want to traverse the entire DOM tree? So in the second step, we can make some tags in the changed virtual DOM, such as recording its location. The binary method can find the corresponding real DOM according to the index. But this is risky, if the user uses the jquery plugin, modifies the DOM tree structure, the real DOM and the virtual DOM does not correspond one by one, so react's intrusion and exclusivity is very strong. Like angular, react is maintaining the node to be modified so that the user can manipulate the DOM tree later, essentially without affecting its operation.

Say here, we have mentioned many algorithm names. In the era of jquery, the selector engine was a right-to-left fast lookup algorithm, and it was based on some Dom APIs. Many algorithms like MVVM, such as HTML parser, have to be used to implement a template for a class jsx. Then convert the instruction into a function, collect the VM variables inside, you need to extract the JS variable, this also need to understand Dot JS parser. The subsequent creation of the virtual Dom tree template function, diff, Patch is a bunch of algorithms. The front-end framework has finally reached a new era of battle algorithms.

The quality of the algorithm determines the quality of its performance. Just like the DOM library, everyone is willing to use the fastest selector engine. The World martial arts, only fast not broken, but also this truth.

Avalon is also a hack from the focus on various compatibility dom, turning to the optimization of the various algorithms within. When the user actually executes the code, we have used various algorithms to transform the user's code into another form, so that it will start the new posture later. Why is react so fast? Because in the compilation process, JSX, etc. have been optimized!

The front-end frame is doomed to become more and more complex, now read not understand its source code, later estimated also difficult to read. Just as you didn't buy a house in 2010, it's hard to buy a house now. The threshold will be higher. Economists say the phenomenon is class-cured. Although the social (framework) progress, let everyone live very relaxed, but the road to Ascension is more and more narrow! The algorithm becomes the focus of the front-end interview, as the DOM compatibility problem is reduced and completely blocked by the framework and engineering.

Finally Amway my frame avalon2, the official website moved to the mainland. MVVM is a good thing, switching to Avalon2 will turn you into two programmers-one that handles things you don't need to care about, and the other can focus on the problem itself. This is a very earthquake change, one you should be able to quickly get used to the changes you like.

Now the algorithm is an important factor for the success of the new-sharp front end framework