Home Web Front-end JS Tutorial Advantages and disadvantages of the three MVVM frameworks: vue, angular, and avalon_Others

Advantages and disadvantages of the three MVVM frameworks: vue, angular, and avalon_Others

May 16, 2016 pm 03:03 PM
angular vue

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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use bootstrap in vue How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

How to add functions to buttons for vue How to add functions to buttons for vue Apr 08, 2025 am 08:51 AM

You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.

How to reference js file with vue.js How to reference js file with vue.js Apr 07, 2025 pm 11:27 PM

There are three ways to refer to JS files in Vue.js: directly specify the path using the <script> tag;; dynamic import using the mounted() lifecycle hook; and importing through the Vuex state management library.

How to use watch in vue How to use watch in vue Apr 07, 2025 pm 11:36 PM

The watch option in Vue.js allows developers to listen for changes in specific data. When the data changes, watch triggers a callback function to perform update views or other tasks. Its configuration options include immediate, which specifies whether to execute a callback immediately, and deep, which specifies whether to recursively listen to changes to objects or arrays.

What does vue multi-page development mean? What does vue multi-page development mean? Apr 07, 2025 pm 11:57 PM

Vue multi-page development is a way to build applications using the Vue.js framework, where the application is divided into separate pages: Code Maintenance: Splitting the application into multiple pages can make the code easier to manage and maintain. Modularity: Each page can be used as a separate module for easy reuse and replacement. Simple routing: Navigation between pages can be managed through simple routing configuration. SEO Optimization: Each page has its own URL, which helps SEO.

How to return to previous page by vue How to return to previous page by vue Apr 07, 2025 pm 11:30 PM

Vue.js has four methods to return to the previous page: $router.go(-1)$router.back() uses <router-link to="/" component window.history.back(), and the method selection depends on the scene.

How to use vue traversal How to use vue traversal Apr 07, 2025 pm 11:48 PM

There are three common methods for Vue.js to traverse arrays and objects: the v-for directive is used to traverse each element and render templates; the v-bind directive can be used with v-for to dynamically set attribute values ​​for each element; and the .map method can convert array elements into new arrays.

How to jump a tag to vue How to jump a tag to vue Apr 08, 2025 am 09:24 AM

The methods to implement the jump of a tag in Vue include: using the a tag in the HTML template to specify the href attribute. Use the router-link component of Vue routing. Use this.$router.push() method in JavaScript. Parameters can be passed through the query parameter and routes are configured in the router options for dynamic jumps.

See all articles