The front-end framework battle 丨 Who else will compete with Vue, Angular, and React?

Please indicate the source for reprinting: Grape City official website, Grape City provides developers with professional development tools, solutions and services, and empowers developers.

The large number of frameworks that are pouring out today is dazzling and you don't know how to choose. Today, we will compare the five most popular front-end JavaScript frameworks and give an overview, introducing their main functions, tools, learning curve and other factors to help you make measurements and choices.

Popularity measure

According to the JavaScript survey in 2020, the popularity of the framework is determined by the use of the framework. The survey was completed by 23,765 respondents and the results are as follows:

1. React：80％
2. Angular：56％
3. Vue.js：49％
4. Svelte：15％
5. PreACT：13％

In addition, the "framework awareness" in the same survey was also considered:

1. React：100％
2. Angular：100％
3. Vue.js：99％
4. Ember：88％
5. Svelte：86％

front-end frame

For the purpose of this article, the text will use the definition provided by Martin Fowler:
A library is essentially a set of functions that developers can call, usually organized into classes. The call performs some work and returns control to the client.
The framework embodies the abstract design, with more built-in behaviors. The developer inserts the behaviors into different places in the framework by subclassing or inserting their own classes, and the framework calls the code at these points.

1. React

Released by Facebook in 2013, it is the most popular front-end framework today. Applied to the products of companies such as Facebook, Netflix and Airbnb, it has a large number of developers and rich learning resources.

There are many React-related tools. The CLI provided by the team is used to easily build a new project, and the tool extensions are suitable for Chrome and Firefox. Contains many third-party software packages to complete a variety of tasks (for example, routing, processing forms and animation), as well as several React-based frameworks, such as Next.js and Gatsby.

React pursues the concept of "learn once, write anywhere". It can use React Native to power mobile applications, use Node to render on the server, and has excellent SEO support.
The mainstream thinking thinks that React is too simple: it is only related to the view layer of the application, and it is all given to the developers, and there are mixed praises and criticisms for the excessive degree of freedom.

If learning, the learning curve is moderate. React encourages developers to use various functional programming paradigms (such as immutability and pure functions), and requires developers to have a basic understanding of basic concepts before building

In general, if you are satisfied with the freedom of react, then it is a good choice for data-driven applications of any size.

2.Angular

As a product provided by Google in the front-end frame, it was born in the form of AngularJS (or Angular 1) in 10 years and was immediately touted, mainly because developers were able to build the first framework now called single-page applications.

In order to solve the performance problem and the challenge of building large-scale JavaScript applications, Google rewrote AngularJS and released Angular 2 (now only Angular) in 2016. Because it cannot be easily migrated, AngularJS and Angular have become two independent frameworks.

Angular occupies an important position in the front-end framework. It has been put into production and used by companies such as Google and Microsoft after rigorous testing, and related online resources are also very rich.

Unlike react which only deals with the view layer, Angular provides a complete solution for building single-page client applications. Angular components implement two-way data binding to listen to events and update values simultaneously between parent and child components. Templates are part of HTML, allowing special syntax to take advantage of many features of Angular. TypeScript is the main language developed by Angular, so the framework is very suitable for enterprises and applications.

From the perspective of related tools, Angular provides a highly sophisticated CLI to initialize, develop, build and maintain its applications, and Chrome and Firefox Dev Tools extensions can be used to debug Angular applications.

But from a learning perspective, Angulard has the steepest learning curve. Developers need to be familiar with TypeScript to start their work, which is not the best choice for novices and is more suitable for playing a role in the team.

3.Vue.js

Note: Statistics are applicable to Vue v2, version 3 is available, vue@next must be installed.

Vue is a model-view-view model (MVVM) front-end framework for building user interfaces and single-page applications. Written by Evan You and first released in 2014.

It has been used in production by companies such as Alibaba, Gitlab and Adobe. It can be called the best document of all frameworks, and its forum is an excellent resource for getting help with coding issues. Vue is popular in the PHP world and is part of the Laravel framework.

The core selling point of Vue is to design from scratch, which can be gradually adopted. That is, Vue can enhance conventional web page functions or components to perfect single-page applications. At the same time, Anugular can bind attributes to the basic data model based on HTML and provide a single file component.

In terms of the completeness of related tools, on the one hand, the official CLI can create scaffolding and develop Vue applications, and the devtools extension can be used in Chrome and Firefox to help debugging. Unlike React, Vue provides official packages for routing and state management, a convenient and standardized processing method, and various third-party tools and Vue-based frameworks. But compared with other frameworks, the entry barrier is very low, and it is suitable for less experienced developers.

4.Svelte

Released by Rich Harris in 2016, as a new member of the front-end framework, it uses a method different from other frameworks to build Web applications.

It avoids the concept of virtual DOM, compiles the code into a small original JavaScript module during construction, and the module updates the DOM when the developer's application state changes. Realize the application of small size and fast speed.
The learning curve is very low, but the community is small, but it has been used in production by companies such as IBM and The New York Times, and it has great potential in the future.

Because of its low maturity, it is only preferred for small projects, but the situation has gradually changed. SvelteKit is in the public beta phase, and the community is constantly growing. Although Svelte is currently young, developers should pay attention.

5.Ember.js

The last Ember introduced has existed since the advent of the front-end framework. Originally released in 11 years, it is still popular in the development world: its history can be traced back to React, Vue, Svelte and all other companies. The framework has never appeared at the forefront of front-end hype, but it is still advancing steadily. The partners include Qonto and CLARK, two of the top 50 fintech companies in Europe in 2020.

Ember, similar to Angular, takes a more battery-inclusive approach to application development and provides everything needed to build modern front-end JavaScript applications. Follow a six-week release cycle and have excellent stability.

In terms of related tools, there are many related tools, from Ember CLI to Ember Inspector, and there are many third-party libraries available.

The size of its community is not comparable to other popular framework communities, but its members are highly involved, and it has a forum and Discord server, so it is easy to ask for help with coding issues.

If developers want to learn, the learning curve is medium to steep. For beginners or smaller projects, Ember may not be the best choice. It has many moving parts and does not provide much flexibility in organizing things as part of teamwork.

extended reading
If many frameworks dazzle you and you don't know how to choose, then you might as well learn about the online excel spreadsheet control SpreadJS , which is less dependent on the platform and can be embedded in the system. I believe it will also help your development.

Conclusion
This article compares the five most popular front-end frameworks on the market today, and provides a better reference for developers to choose according to their personal abilities and project needs.