In recent years, a large number of frameworks have emerged in the field of front-end development, making people dazzled and confused about how to choose. Today we will compare the five most popular front-end JavaScript frameworks for you and give you an overview, introducing their main features, tools, learning curves and other factors to help you make a choice.
Popularity Measure
According to the 2020 JavaScript Survey, the popularity of the framework is determined by framework usage. The survey was completed by 23,765 respondents and the results are as follows:
React：80％ Angular：56％ Vue.js：49％ Svelte：15％ PreACT：13％
Also considered was "framework awareness" from the same survey:
React：100％ Angular：100％ Vue.js：99％ Ember：88％ Svelte：86％
Definition of front-end frameworks
For the purposes of this article, the text will use the definition provided by Martin Fowler:
A library is essentially a set of functions that a developer can call, usually organized into classes. The call performs some work and returns control to the client.
The framework embodies abstract design and has more built-in behaviors. Developers can insert behaviors into different locations in the framework by subclassing or inserting their own classes, and the framework calls the code at these points.
1. React
Recommendation: " Summary of front-end React interview questions (collection)》《react video tutorial》
was released by Facebook in 2013 and is the most popular front-end framework today. It is used in company products such as Facebook, Netflix and Airbnb, and has a large number of developers and rich usage 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 extension is suitable for Chrome and Firefox. It contains many third-party packages for a wide variety of tasks (e.g., routing, handling forms, and animations), as well as several React-based frameworks, such as Next.js and Gatsby.
React pursues the philosophy of "learn once, write anywhere". It can power mobile apps with React Native, render on the server with Node, and has excellent SEO support.
The mainstream thinking is that React is too simple: it is only related to the view layer of the application, and it is all left to the developers, and there are mixed reviews for the excessive degree of freedom.
If you study, 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.
Overall, if you are interested in the freedom of react If you are satisfied with it, it is a good choice for data-driven applications of any size.
2. Angular
Recommended: "Angularjs Video Tutorial"
was born as AngularJS (or Angular 1) in 2010 as a Google offering in the front-end box and became an instant hit, mainly due to the ability of developers to build what are now known as single-page applications the first frame.
To solve performance issues and the challenges of building large JavaScript applications, Google rewrote AngularJS, releasing Angular 2 in 2016 (just Angular today). Since they cannot be easily migrated, AngularJS and Angular become two independent frameworks.
Angular occupies an important position in the front-end framework. It has been put into production use by companies such as Google and Microsoft after rigorous testing, and related online resources are also abundant.
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 a part of HTML that allow special syntax to be used to take advantage of Angular's many features. TypeScript is the main language used for Angular development, so the framework is suitable for enterprises and applications.
From the perspective of related tools, Angular provides a highly complete CLI to initialize, develop, build and maintain its applications, as well as Chrome and Firefox Dev Tools extensions for debugging Angular applications.
But from a learning perspective, Angulard has the steepest learning curve. Developers need to be familiar with TypeScript to work. It is not the best choice for novices and is more suitable for playing a role in a team.
3. Vue.js
Recommended: "The latest 5 vue.js video tutorials Featured 》
Note: Statistics are applicable to Vue v2, version 3 is available, vue@next must be installed.
Vue is a Model-View-ViewModel (MVVM) front-end framework for building user interfaces and single-page applications. Written by Evan You and first published in 2014.
Vue is now used in production by companies such as Alibaba, Gitlab and Adobe. It's arguably the best documentation of any framework, and its forum is an excellent resource for getting help with coding questions. Vue is popular in the PHP world and is part of the Laravel framework.
The core selling point of Vue is that it is designed from scratch and can be adopted gradually. That is, Vue can enhance regular web page functions or construct components to improve single-page applications. At the same time, Anugular can bind attributes to basic data models based on HTML, providing 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 in addition, the devtools extension can be used for Chrome and Firefox to help debugging. Unlike React, Vue provides official packages for routing and state management, providing a convenient and standardized processing method, as well as various third-party tools and Vue-based frameworks.
But compared with other frameworks, the entry barrier is very low and is suitable for inexperienced developers.
4. Svelte
was released by Rich Harris in 2016. As a new member of the front-end framework, it adopts a different approach than other frameworks. methods to build web applications.
It eschews the concept of a virtual DOM and compiles the code during the build into a small raw JavaScript module that updates the DOM as the developer's application state changes. Achieve small size and fast application.
Rich Harris has a low learning curve and a small community, but it has been used in production by companies such as IBM and the New York Times, and has great potential in the future.
Due to its low maturity, it is only preferred for small projects, but the situation is gradually changing. SvelteKit is in public beta and the community is constantly growing. Although Svelte is currently young, developers should pay attention.
5. Ember.js
The Ember introduced last has been around since the advent of the front-end framework. Originally released in 2011, but still popular in the development world:
It dates back to before React, Vue, Svelte and all the rest. The framework has never been at the forefront of front-end hype, but it continues to make steady progress. Partners include Qonto and CLARK, two of the top 50 fintech companies in Europe in 2020.
Ember takes a more battery-inclusive approach to application development, similar to Angular, and provides everything you need to build modern front-end JavaScript applications. A six-week release cycle is followed and stability is excellent.
In terms of related tools, there are many related tools, from Ember CLI to Ember Inspector, and there are many third-party libraries available.
Its community is no larger than other popular framework communities, but its members are highly engaged, and with a forum and Discord server, it's easy to get help with coding issues.
If developers want to learn, the learning curve is moderate to steep, and for beginners or smaller projects, Ember may not be the best choice. It has a lot of moving parts and doesn't offer a lot of flexibility in organizing things as part of a team effort.
in conclusion
This article compares the five most popular front-end frameworks on the market today, providing a better reference for developers to choose according to their personal abilities and project needs.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
