There’s a large number of front-end frameworks available today, each with different strengths and weaknesses. This makes it tricky to decide which one you should invest your time in learning, or which is most suitable for your next project.
How Did I Measure Popularity?
- React: 80%
- Angular: 56%
- Vue.js: 49%
- Svelte: 15%
- Preact : 13%
I’ve also taken into account “framework awareness” from the same survey:
- React: 100%
- Angular: 100%
- Vue.js: 99%
- Ember: 88%
- Svelte: 86%
There are, of course, many other metrics one could draw upon, such as job availability, GitHub stars, npm downloads, GitHub “Used by”, and so on. If you’d like an overview of some of these (for the big three, at least), please consult this GitHub Gist.
For an interactive view of how the frameworks stack up against each other, you can consult this graph from npmtrends.
How Are We Defining Front-end Framework?
The elephant in the room is that the most popular framework on the list (React) defines itself as a “library”.
I don’t want to go too deep down this rabbit hole, as there are complete articles dedicated to explaining the difference between frameworks and libraries. For the purposes of this article, I’ll use the following definition provided by Martin Fowler:
A library is essentially a set of functions that you can call, these days usually organized into classes. Each call does some work and returns control to the client.
A framework embodies some abstract design, with more behavior built in. In order to use it you need to insert your behavior into various places in the framework either by subclassing or by plugging in your own classes. The framework’s code then calls your code at these points.
In my opinion, React conforms more to the behavior of a framework than a library. And while it technically isn’t one, developers normally adopt a number of tools and packages from its ecosystem to make it function as such.
- Website: https://reactjs.org/
- GitHub: https://github.com/facebook/react/
Developer tooling is good. The React team has built and maintains a CLI (Create React App) to quickly and easily scaffold out a new project, as well as a developer tools extension for both Chrome and Firefox. There are very many third-party packages available to accomplish a wide array of tasks (such as routing, dealing with forms, and animation), as well as several React-based frameworks, such as Next.js and Gatsby.
React subscribes to a “Learn once, write anywhere” philosophy. It can power mobile apps using React Native, and it can render on the server using Node. This means excellent SEO support, which will only get better as something called server components makes its way down the pipeline.
One of the main criticisms of React is that it is too unopinionated: it’s only concerned with the view layer of your application and leaves everything else to the developer. Some people like the freedom this offers, but others — especially new developers — can become overwhelmed by the unstructured approach to coding a React app this encourages.
React has a moderate learning curve. It encourages the use of various functional programming paradigms (such as immutability and pure functions), meaning that developers would do well to have a basic grasp of these concepts before attempting to build anything serious.
If you’re comfortable with React’s unopinionated approach and the fact that it leaves a sizable part of the development process to the developer, then it’s an excellent choice for data-driven apps of any size.
- Website: https://angular.io/
- GitHub: https://github.com/angular/angular/
Angular is Google’s offering in the front-end framework space. It started life in 2010 as AngularJS (or Angular 1) and was an immediate hit, primarily because it was the first framework that enabled developers to build what we now refer to as single-page applications.
As for Angular, it’s something of a heavyweight in the front-end framework world. It’s used by companies such as Google and Microsoft in production, so is definitely well battle tested. There are also many resources available online (such as the excellent Tour of Heroes tutorial) and there are a good number of Angular-related questions on Stack Overflow.
Unlike React, which only handles the view layer, Angular offers a complete solution for building single-page client applications. Angular components can implement a two-way data binding, which allows them to listen for events and update values simultaneously between parent and child components. Templates are chunks of HTML that permit the use of special syntax to leverage many of Angular’s features. TypeScript is the primary language for Angular development, making the framework particularly suited to enterprise-grade applications.
Tooling is good. Angular offers a highly polished CLI to initialize, develop, scaffold, and maintain Angular applications. There are also Chrome and Firefox Dev Tools extensions available for debugging Angular applications. Out of the box, Angular has a solution for handling many common tasks, such as forms and routing, but there’s still a rich ecosystem of third-party libraries.
In my opinion, Angular has the steepest learning curve of all the frameworks listed here. Developers will need to be familiar with TypeScript, as well as concepts like decorators and dependency injection, to be able to work effectively with the framework. For this reason, it’s not a good choice for new developers. Rather, it lends itself more to building large-scale apps as part of a team.
If you’d like a full rundown of the differences between React and Angular, please see “React vs Angular: An In-depth Comparison”.
Please note that these stats are for Vue v2. Version 3 is available, but has to be installed as
- Website: https://vuejs.org/
- GitHub: https://github.com/vuejs/vue
Third on our list is Vue.js, a Model–view–viewmodel (MVVM) front-end framework used for building user interfaces and single-page applications. It was written by Evan You and saw its first release in 2014. Vue has a very dedicated following of developers (it has more GitHub stars than React, for example), which is possibly due to the fact that it slotted so nicely into the gap left by AngularJS when this was rewritten to become Angular.
Vue is developed and maintained by a core team of some twenty developers, and although it’s not directly backed by one of the internet giants, it’s used in production by companies such as Alibaba, Gitlab and Adobe. Vue has arguably the best documentation of any of the frameworks on the list, and its forums are a great resource for getting help with coding issues. Vue is also popular in the PHP world and ships as part of the Laravel framework.
Tooling around Vue is superb. There’s an official CLI to scaffold and develop Vue apps, and there’s a devtools extension available for both Chrome and Firefox to aid in debugging. In sharp contrast to React, Vue offers official packages for routing and state management, which presents a pleasingly standardized way of doing things. There’s also a wide range of third-party tools, as well as frameworks based upon Vue, such as Nuxt.js and Gridsome (Vue’s answer to React’s Next.js and Gatsby).
Vue is an excellent choice for apps of all sizes. It’s suitable for less experienced devs, as well as those that prefer a little more structure and guidance from their framework.
Continue reading The 5 Most Popular Front-end Frameworks Compared on SitePoint.