Analysis of JS front-end development and MVVM selection

Recently finally made up his mind to learn something at the front, but the various frameworks, dazzling.

First summarize the history of JS front-end

1. Slash and burn, primitive times

This time using the DOM native API to work with HTML elements, estimating functions such as Getelementby

2. Steam engine, Industrial age

such as jquery and other frameworks appear, DOM operations are encapsulated in the framework, can be easily updated

3, electricity, post-industrial era

React, Vue, angular, Avalon and other mvvm, forget to manipulate DOM

Speaking of MVVM actually variable binding, the DOM and JS variable binding, update JS variable can be achieved to update the DOM, or two-way binding.

First look at the foreign angular2 and react, feel too large, so the main focus on the Vue and Avalon, the following is the binding syntax of the two.

Avalon's binding syntax

<script>
var vm = Avalon.define ({
$id: "Test",
a:111
})
</script>

<div ms-controller= "Test" >
{{@a}}
</div>

Vue's binding syntax

<id= "app">  {{message}}</Div > <script>new Vue ({  el: ' #app ',  data: {    message: ' Hello vue.js! '  }})
</script>

Can be seen almost the same, and Avalon is bound to use extra tags when the output is more a @,vue code is significantly more concise.

And the two methods of binding are almost all implemented with Object.defineproperties. Both of the 1.x versions did not include virtual DOM, and the virtual Dom was used after 2.0.

I hesitated for a long time on which to use. Avalon has a performance comparison on the Web, and in the 1.x era, it has a higher performance than Vue.

Because I do not see the source code, I think the performance gap may come from the binding syntax, Vue does not require additional tags, then some of the DOM is bound, some are not bound, scanning

The analysis must be slower than the tagged Avalon.

In addition, due to the richer components of Avalon, the supported browsers are as low as the amazing IE6, so the final choice is Avalon.

Removing virtual DOM We can actually implement a simple MVVM, such as a jquery wrapper, and a variable bound syntax sugar.

Perhaps you can also use the element and line number hash table to correspond, directly with the regular expression.

Analysis of JS front-end development and MVVM selection