React vs. Vue vs. Angular: which JavaScript framework is best?
Sooner or later in your front-end development career you’ll find yourself at a common crossroads: should I use a JavaScript framework for my project, and if so, which one?
It’s a familiar scenario to a lot of front-end devs out there, and each developer you talk to will likely give you a different answer.
The truth is, there are many JavaScript libraries, frameworks, tools, projects, and platforms that help developers to build user interfaces, solve front end problems, and ship excellent products faster.
When it comes to building user interfaces, the most popular libraries are Angular, Vue JS, and React JS.
All three are concerned with empowering developers to build complex user interfaces in a modular way. They encourage breaking down of complex user interfaces into components or modules and reusing these building blocks to construct different areas of the app or website as needed.
How popular are React, Vue, and Angular?#
Let’s take a look at a Google trends search that covers the past three years from late 2017 through to the middle of 2020.
(Search trends for React (blue), Angular (yellow), and Vue (red) from late 2017 to mid-2020)
Looking at the search data from Google Trends, you can see that Vue has been slowly, but steadily, gaining interest over the past few years. React has increased dramatically, whilst Angular has declined slightly over the same time frame.
Which framework is being used the most?#
A lot of enterprise development houses trust their application development to Angular because of its robust credentials and holistic approach to wiring up different parts of modern application development — things like app navigation, two-way data binding, data handling with APIs, and more.
Vue is becoming more popular as time goes on, yet interest in React remains consistently strong with new students rushing to learn Facebook’s slick UI library.
Indeed I’m a big React fan myself and have even written a beginners course on React that covers everything you need to get started building realistic apps.
It’s also worth noting that jobs requiring React and React Native (React’s mobile-focused offering) are plentiful and this, in part, is responsible for fuelling the huge rise in React’s popularity.
But which one really is the best JavaScript framework? And if you’re interested in learning a framework, exactly which one should you invest in?
Let’s explore each framework’s background and walk through the pros and cons to help us decide.
Vue#
Vue JS came onto the scene around 2014 and was developed by a former Google employee Evan Yu. Vue is a progressive JavaScript framework, similar to React, and has a rich ecosystem of additional libraries and plug-ins to enable additional functionality.
Benefits include:#
Empowered HTML - Vue has a lot of crossover with Angular in the way that it decorates HTML blocks within its components
Detailed documentation - One of the best features of Vue is the hugely detailed and informative documentation that helps developers at either end of the experience scale quickly get up and running
Ease of integration - Whether you’re building single-page applications (SPA’s) or more complex applications, Vue’s smaller, interactive parts mean it can be integrated into existing infrastructure without affecting the wider system
Large scaling - Vue can be used to develop pretty large, reusable templates to power very complex apps
Small code footprint - Vue weighs in at around 20KB keeping its size small, but also aiding in increasing its speed and performance
Small learning curve
Drawbacks:#
Lack of support and resources - Whilst rising in interest and boasting a loyal and growing community, Vue has the smallest market share and so naturally has more limited resources and solutions out there for budding developers or those seeking answers
Angular#
Angular (formerly Angular JS, which is a very different beast), is a fully-fledged framework released back in 2009. It boasts a very mature framework that handles everything you need to build rich, data-driven user interfaces right out of the box. It offers an MVVM (Model, View, View Modal) approach to development structure that separates the working parts into their respective areas of responsibility.
Benefits of Angular:#
MVVM structure - This allows developers to work on the same area of the app without stepping on colleagues’ toes. However, the MVVM approach is not as intuitive to those starting out or those unfamiliar with this particular project structure
Two-way data-binding - This enables singular behavior within the app, reducing the risk for errors
Dependency injection of the required features that the current components depend on
Deep coupling with Typescript - Including excellent Typescript support
Very detailed documentation and guides
Mature ecosystem - Similar to the documentation, Angular is widely used and has a large ecosystem of resources, guides, help, and advice for just about any situation you’ll come across
Opinionated approach - Even down to the structure and architecture to make sure your project can scale well
Drawbacks:#
Angular is very complex and has an equally steep learning curve which is a big barrier to entry, especially for new developers
Migration is often a problem when moving from older versions to new
Deep coupling with Typescript > yes, this is also a benefit, but Typescript is not widely adopted by new developers and adds yet another few degrees to an already steep learning curve
React#
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. React was developed by Facebook and released to the open-source community in May of 2013).
React allows us to break down our complex user interfaces into smaller, bite-sized pieces of functionality that operate on their own managing their own 'state', given some sort of input data, you'll see referred to as 'props'.
Benefits of React#
React is very declarative in nature, meaning you can describe what you’d like your interfaces to do — via JSX — and worry less about how this will be achieved.
It’s unopinionated - React brings with it very few boundaries, constraints, and rules, so you’re free to build your apps exactly how you like.
React is quite close to modern, vanilla JavaScript - There aren’t too many quirks and prescriptive so React remains very close to ‘standard’ JS which helps with a natural follow-on for newcomers.
Very shallow learning curve - Sure, React has some constraints and a couple of rules, but if you’re familiar with HTML and modern JavaScript then you should be able to pick up React and start using it really quickly.
Huge resource base - There are tons of articles, guides, courses, videos, and content out there to help you when you get stuck.
Drawbacks#
It’s unopinionated - The lack of opinions is great in one respect, but it also means you’re left to find your own way when it comes to things like app navigation, global state management, and external data fetching and handling.
The concept of state, props, and moving data around can be confusing for newcomers, as can writing JavaScript classes for components (although you can write function-based components and avoid classes altogether too!).
But which one is best?#
This is a duplicitous question as it pits each framework against one another and it really boils down to opinions and preference. There are many solid reasons to choose any of these three frameworks, or indeed, none at all.
Remember, that any library, framework, platform, language, design, pattern, whatever, are all just tools.
In the same way that you wouldn’t use a hammer to unscrew a bolt, sometimes it’s about finding the right tool for the job. When you have a choice of hammers, then it can be a simple as ‘I prefer this one over that one’. And it’s just as easy to write bad code in a good library.
That said, React is a popular choice for a reason and is a great option for those beginners looking to get their feet wet with their first big library or framework.