Home > Article > Web Front-end > Advantages and disadvantages of the three MVVM frameworks: vue, angular, and avalon_Others
The main content of this article is summarized by referring to the official documentation:
Vue.js
Vue.js @You Yuxi is a library for creating web interactive interfaces. It is a streamlined MVVM. From a technical perspective, Vue.js focuses on the ViewModel layer of MVVM models. It connects the View layer and the Model layer through two-way data binding. The actual DOM encapsulation and output format are abstracted into Directives and Filters. Compared with other libraries, Vue.js is a small but beautiful library. The author's main purpose is to produce reflective data binding and composable view components through an API as simple as possible. I feel that the author's ideas are very clear.
Advantages:
Simple: The official documentation is very clear and easier to learn than Angular.
Fast: Update DOM in asynchronous batch mode.
Composition: Compose your application with decoupled, reusable components.
Compact: ~18kb min+gzip, and no dependencies.
Powerful: Expressions & computed properties without declaring dependencies.
Module-friendly: It can be installed through NPM, Bower or Duo. It does not force all your code to follow Angular's various regulations, and the usage scenarios are more flexible.
Disadvantages:
Newborn: Vue.js is a new project, version 0.10.0 Release Candidate released on March 20, 2014. The latest version on github is version 0.11.4, which is not as mature as angular.
The impact is not very big: I googled it and found that the diversity or richness of Vue.js is less than that of some other well-known libraries.
Doesn’t support IE8: Haha, but AngularJS 1.3 also abandoned support for IE8, but teacher @ Stu Zhengmei’s avalon supports IE6+, so a lot of efforts should be made to optimize it. This is not good for projects that need to support IE8, but this is also a trend in web front-end development. Lower versions of IE should withdraw from the stage of history. By changing our front-end thinking, rather than conforming to those who use older versions People who don’t upgrade. Teacher @玉博 said something, and I think it is very good. "These days, supporting IE6 and 7 is no longer a feature, but a shame. We are working hard to promote Alipay to not support IE6 and 7. We look forward to more brothers joining us." ".
AngularJS
AngularJS is very popular recently and has many followers. Superheroic JavaScript MVW Framework
The official statement is very simple: "Client-side technology written entirely in JavaScript. Used in conjunction with other long-established Web technologies (HTML, CSS and JavaScript) to make Web application development simpler and faster than ever." When you learn it, I believe you will be attracted by its many new special effects.
Advantages:
Dynamic view: I have never thought that js can extend the attributes of HTML in this way, but AngularJs has done it. It adds a lot of extensibility functions to our static HTML, and it feels like making HTML come alive.
Perfect: It is a relatively complete front-end MVW framework, including templates, two-way data binding, routing, modularization, services, dependency injection and other functions. The templates are powerful and rich, declarative, and come with a wealth of Angular instructions. .
Google maintenance: AngularJS is maintained by Google. It undoubtedly has a powerful backend. It has obvious advantages over Vue.js and avalon in terms of promotion and maintenance. The community is also very active and can promote its development well.
AngularJS & Ionic: Ionic: Advanced HTML5 Hybrid Mobile App Framework, these two are good friends. Ionic uses AngularJS to create a framework that is best suited for developing rich and powerful applications. Last time, Yu Zhihu answered a related question about webapp development. Which framework and packaged app platform have the best performance and efficiency? - Tang Wei's answer, details can be found here.
Disadvantages:
Large and comprehensive: It is difficult to learn. For me, the learning curve is very tortuous and difficult to understand.
Overturn and rewrite: Some time ago, I visited the community and found that AngularJS 2.0 will overturn and rewrite the previous ones. The two frameworks have changed a lot. They are basically two frameworks. This means that you need to start from scratch after 2.0 comes out, but I also said Come back, /article/79637.htmThis article explains the changes in AngularJS2.0 very well.
It does not support IE8 or below. It seems that 2.0 only supports mobile terminals. Let’s wait until it is released.
Avalon.js
Avalon.js is a simple and easy-to-use mini MVVM framework written by @ Stu Zhengmei. It was first released on September 15, 2012. It was developed to solve the problem of various view presentations for the same business logic. You can often see teachers promoting his Avalon.js and publishing many tutorials, which undoubtedly provides great convenience to people in China learning Avalon.js.
Advantages
Easy to use, add binding in HTML, define ViewModel with avalon.define in JS, then call avalon.scan method, and it will move!
Compatible with IE6 (other MVVM frameworks, KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9)), and avalon.mobile, which can run more efficiently in newer versions of browsers such as IE10
No dependencies, less than 5000 lines, less than 50KiB after compression
Supports pipe character style filter functions to facilitate formatted output
The granularity of local refresh has been refined to a text node, feature node
The node to be operated is bound to the view refresh function in the first scan and cached, so there is no room for the selector to appear.
Make DOM manipulation code almost extinct
Use a CSS-like overlapping coverage mechanism to allow each ViewModel partition to render the page alternately
When a node is removed, the corresponding view refresh function is intelligently unloaded to save memory
Operating data means operating DOM, and operations on ViewModel will be synchronized to View and Model
Comes with AMD module loader, eliminating the need to integrate with other loaders.
Disadvantages
1. Array filtering is not as comprehensive as angular. Avalon’s filter can only be used for ms-text, ms-html
2. There is no English document and publicity is restricted
3. OniUI’s skin is not good-looking enough. Many people say that they need to cooperate with boostrap, but no one in the community has taken the initiative to do this