Now, the market is filled with a large number of excellent front-end frameworks, each with its own merits. It is really hard to choose which framework to learn, or which framework is best for your next project.
This article will compare the five most popular front-end JavaScript frameworks to provide a high-level overview of their features, tools, learning curves, and other advantages and disadvantages.
Of course, I can't tell you which framework is "best": it depends on your subjective feelings, as well as your current level of JavaScript experience and the type of application being developed. However, I will quickly let you know the main competitors and help you make informed decisions about which framework to choose for in-depth learning.
Popularity is determined based on framework usage in the 2020 JavaScript Status Survey. The survey had 23,765 respondents, and the competitors were ranked as follows:
I also considered the "framework awareness" in the same survey:
I also cross-verified these results with framework usage in the 2020 Stack Overflow Developer Survey. The survey, with a total of 65,000 respondents participating, was basically consistent with the results of the JavaScript status survey—although unfortunately, it did not distinguish between front-end and back-end frameworks.
Of course, there are many other metrics that can be referenced, such as job openings, GitHub stars, npm downloads, GitHub "usage" and so on. If you want to know some of these metrics (at least for the top three frameworks), please refer to this GitHub Gist.
To interactively view the comparison of these frameworks, refer to this chart of npmtrends.
The most critical issue is that the most popular framework (React) on the list defines itself as a "library".
I don't want to go into this issue in depth, as there are already complete articles that explain the differences between frameworks and libraries. In this article, I will use the following definition provided by Martin Fowler:
Library is essentially a set of functions that can be called, and is usually organized into classes today. Each call does some work and returns control to the client.
The framework embodies an abstract design with more behaviors built into it. In order to use it, you need to insert your behavior into various places in the framework by subclassing or inserting your own class. The framework's code will then call your code at these points.
In my opinion, React is more in line with the behavior of the framework than the library. While it is not a framework technically, developers often adopt many tools and packages from their ecosystem to make it work.
React's main purpose is to combine interactive user interfaces from reusable components. It uses JSX (a syntax extension for JavaScript) for templates and implements a one-way data flow model to fill components with data. Whenever component data changes, React uses its virtual DOM to update the page quickly and efficiently.
Developer tools are very useful. The React team built and maintained a CLI (Create React App) to quickly and easily build new projects, as well as developer tools extensions for Chrome and Firefox. There are many third-party packages available that can accomplish various tasks (such as routing, handling forms, and animations), as well as some React-based frameworks such as Next.js and Gatsby.
React follows the concept of "learning once, writing anywhere". It can use React Native to drive mobile applications and can render on the server side using Node. This means excellent SEO support, which will only get better and better with the introduction of server components.
One of React's main criticisms is that it's too unconstrained: it focuses only on the application's view layer, leaving everything else to the developer. Some people like this freedom, but others – especially new developers – may be overwhelmed by this encouraged unstructured coding approach.
React has a moderate learning curve. It encourages the use of various functional programming paradigms such as invariance and pure functions, which means developers are better off mastering these concepts before trying to build anything serious.
If you are satisfied with React's unconstrained approach and it leaves most of the development process to developers, it is a great choice for data-driven applications of any size.
To solve the performance issues and the challenge of building large JavaScript applications, Google rewrote AngularJS from scratch and released Angular 2 (now Angular for short) in 2016. There is no simple migration path between these two versions, so AngularJS and Angular become two separate frameworks. AngularJS has now been discontinued for maintenance and should not be used for new projects.
As for Angular, it is a heavyweight in the front-end framework world. Companies like Google and Microsoft use it in production environments, so it has definitely been fully tested. There are also many resources available online (such as the excellent Tour of Heroes tutorial), and there are also many questions about Angular on Stack Overflow.
Unlike React, which only handles view layers, Angular provides a complete solution for building single-page client applications. Angular components can implement bidirectional data binding, which allows them to listen to events simultaneously and update values between parent and child components. Templates are HTML snippets that allow the use of special syntax to take advantage of many of Angular's features. TypeScript is the primary language for Angular development, making this framework particularly suitable for enterprise-level applications.
The tool is very useful. Angular provides a highly polished CLI to initialize, develop, build and maintain Angular applications. Chrome and Firefox Dev Tools extensions are also available to help debug Angular applications. Angular natively provides solutions to handle many common tasks such as forms and routing, but there is still a rich ecosystem of third-party libraries.
In my opinion, Angular's learning curve is the steepest of all the frameworks listed here. Developers need to be familiar with TypeScript, as well as concepts such as decorators and dependency injection in order to use the framework effectively. Therefore, it is not suitable for new developers. Instead, it is more suitable for teamwork to build large applications.
If you want to have a comprehensive understanding of the difference between React and Angular, see "React vs. Angular: In-depth comparison".
Please note that these statistics apply to Vue v2. Version 3 is available, but must be installed as vue@next.
The third place in our list is Vue.js, a model-view-view model (MVVM) front-end framework for building user interfaces and single page applications. It was written by You Yuxi and was first released in 2014. Vue has a very loyal developer community (for example, it has more GitHub stars than React), which is probably because it fills the gap left by AngularJS after rewriting it to Angular.
Vue is developed and maintained by about 20 core team members, and while it is not directly supported by the internet giant, companies such as Alibaba, Gitlab and Adobe use it in production environments. Vue's documentation is arguably the best of all frameworks, and its forum is also a great resource for getting help with code issues. Vue is also popular in the PHP world and is available as part of the Laravel framework.
One of the selling points of Vue is that it was designed to be gradually adopted from the very beginning. This means you can add Vue to regular web pages to enhance its functionality, or you can go all out to build a full single page app. Vue.js uses HTML-based template syntax that allows you to easily bind properties to the underlying data model. It also provides a single file component that keeps templates, JavaScript code, and scoped CSS in the same file.
The tools around Vue are great. There is an official CLI to build and develop Vue applications, and there is a developer tool extension for Chrome and Firefox to help debug. In sharp contrast to React, Vue provides an official package for routing and state management, which provides a pleasant standardization approach. There are also a wide range of third-party tools, as well as Vue-based frameworks such as Nuxt.js and Gridsome (Vue's response to React's Next.js and Gatsby).
The barrier to entry to using Vue is low, partly because it uses an incremental approach to building applications, partly because it is based on HTML, CSS, and JavaScript—techniques that should be familiar to any developer.
Vue is an excellent choice for applications of all sizes. It is suitable for developers with less experience, as well as those who prefer to get more structure and guidance from the framework.
Svelte converts your application into ideal JavaScript code when building, rather than interpreting your application code at runtime. This means you don't pay performance for the framework's abstraction and you won't be penalized when the application first loads.In other words, it avoids the concept of virtual DOM, but compiles your code into small, plain JavaScript modules when it is built that update the DOM when your application state changes. As you can imagine, this makes the application faster and takes up less space. Svelte restores the raw processing state management and provides responsiveness out of the box.
Unfortunately, the tool is a bit of a headache right now. Initially, Sapper (an application framework built on top of Svelte) was used to build Svelte applications with predefined structures and equip them with some more advanced features such as routing and server-side rendering. However, in November 2020, Svelte’s creators announced that version 1.0 of Sapper will never be released, and that SvelteKit is now the only recommended way to start building applications with Svelte. Browser developer tools extensions for Chrome and Firefox, as well as a variety of third-party modules, although far less than a more mature framework.
While Svelte’s learning curve is very low, its community remains small and has not yet gained the same appeal as the top three frameworks mentioned here. But companies like IBM and the New York Times are using it in production environments, and it is definitely a framework worth paying attention to in the months and years to come.
Svelte is not yet mature enough, so it is perfect for small projects. However, this is changing. SvelteKit is in the open beta phase and the community is growing. Although Svelte is still a newcomer at the moment, you should focus on this area...
It has been nearly a decade and dates back to React, Vue, Svelte and all other frameworks. The framework has never been at the forefront of the front-end hype wave, but it silently enables the team to release products stably and continuously – including Qonto and CLARK, both of which are the top 50 fintech companies in Europe in 2020. 🎜>Similar to Angular, Ember takes a more comprehensive approach to application development and provides everything you need to build modern front-end JavaScript applications. This includes routing solutions, data layers, and a fully-featured modern testing tool built into every application by default. It follows a six-week release cycle (when a new minor release is released) and is committed to stability. This could be a real advantage for developers who can't continually rewrite applications to avoid being left behind by faster-growing frameworks.
A wide range of tools emerged around Ember, from the Ember CLI (the official way to create, build, test and serve Ember applications) to the Ember Inspector (the officially supported browser add-on that enables you to check in your application the Ember object). There are also some third-party libraries available, and the CLI provides a common format (i.e. Ember Addons) to distribute them.
Ember's community is not as big as those of React, but its members are very active and have a forum and a Discord server where you can seek help with code issues. Ember is the most opinionated framework listed here, using the "convention over configuration" approach. This plus developers need to be familiar with more advanced concepts—such as serializers and adapters—to make their learning curve moderate to steep.
Ember may not be suitable for beginners or small projects. It has a lot of moving parts and doesn't offer much flexibility in how to build things. But it does shine when building rich, complex front-end applications with the team.
This is my comparison of the five most popular front-end frameworks on the market today. While this is not an exhaustive look at each framework’s functionality, I hope it gives you an idea of which major competitors might be right for your next project, or which frameworks are worth your further exploration.
If you have any questions or comments, why not join the SitePoint forum for discussion?
When choosing a front-end framework, you need to consider factors such as learning curve, community support, documentation, flexibility, and performance. If you are not familiar with front-end development, the learning curve is important. Some frameworks are easier to learn than others. Community support is essential to get help when you encounter problems. Large, active communities often mean more resources and tutorials. Good documentation can make the learning process smoother. Flexibility refers to the ability of the framework to adapt to different project needs. Finally, performance affects the speed and user experience of the application.
Angular is a powerful and feature-rich framework developed by Google. It is known for its bidirectional data binding, dependency injection and modular architecture. However, its learning curve is steep compared to other frameworks. It is perfect for large and complex applications.
React is developed by Facebook and is known for its virtual DOM, which improves performance by minimizing direct operations on the actual DOM. It is component-based, which promotes reusability and maintainability. It also has a huge community and a large library.
Vue is a progressive framework, which means you can adopt it step by step. It is easy to learn and has a simpler grammar than Angular and React. It also has a virtual DOM and component-based architecture. It is perfect for small and medium-sized projects.
Bidirectional data binding in Angular means that when the data in the model changes, the view reflects this change and vice versa. This synchronization between the model and the view simplifies the code and improves readability.
The virtual DOM is a lightweight copy of the actual DOM. When a change occurs, the virtual DOM is first changed. The difference algorithm then compares the new virtual DOM to the old virtual DOM, and only actual changes are updated in the real DOM. This process improves performance.
Angular's modular architecture organizes code into modules, each module responsible for a specific function. This separation of concerns makes the code easier to maintain and test. It also promotes reusability and scalability of the code.
Component-based architecture breaks down the UI into independent reusable components. Each component has its own logic and controls part of the UI. This approach promotes reusability, maintainability, and testability of the code.
Large and active communities can provide valuable resources, tutorials, and help to get help when you encounter problems. It also shows the popularity and service life of the frame. Angular, React, and Vue all have strong community support.
Performance directly affects the speed of the application. Slow applications can frustrate users and lead to higher bounce rates. Therefore, choosing a high-performance framework can enhance the user experience.
The above is the detailed content of The 5 Most Popular Front-end Frameworks Compared. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
