React vs. Vue vs. Angular

Front‑end development has a bit of a reputation for being a very fast‑moving industry. It's probably fair to even go a step further than that and say that it feels like there's an all‑new "next best thing" almost every week and that ‑ for the most part ‑ those "next best thing"s don't stick; either getting surpassed and replaced very quickly, or otherwise getting condemned into middle‑management buzzword purgatory.

As more talented front‑end developers working on the cutting‑edge start to do more and more things, the expectations of what the average front‑end developer should know and be able to do rises as well.

Whilst it is great to see the amazing things that can now be done entirely within the client side (especially if you have a lot of free time on your hands), the actual set‑up and start up of any new project can be a considerable time sink, especially when building complex functionality or web apps.

That's where frameworks come into their own.

There are plenty of front‑end frameworks, and each one is best suited to specific tasks and purposes. In 2019, it was estimated that there were around 25 JS frameworks in common use. Of these dozens of different frameworks, it would be very difficult to argue that three of the biggest and most popular are React, Angular and Vue.

But which of the three biggest frameworks should you use? I've worked extensively with all three, so I have my own very personal opinions (not least impacted by the projects I chose to contribute to and their underlying technologies), but let's take a deeper look at each one, and I can highlight some use cases that would be best suited to each one.

First up: React.

Where Did It Come from?

Facebook, unfortunately.

Popping up in 2011 thanks to the very talented Jordan Walke, React started out as what Walke had named FaxJS (which can still be seen on GitHub today), and which found itself being rolled out on the Facebook News Feed as its first release ‑‑ a big early‑adoption for any framework.

2012 was a big year for React as well, as it was adopted by Facebook and used in their new acquisition: Instagram. On top of that, it became an integral part of how Facebook managed their ad functionality, which put it in front of the higher‑ups within the organisation.

From there, it continued to gain ground. React.js conferences started being held over the following four years, and it began to build a name for itself even with managers and salespeople who had no idea what it really was. This was great for React but probably less‑great for the developers being asked to integrate it into places that it didn't really belong.

Big Users?

Facebook... unfortunately. I don't have the opportunity to use this same joke for a third time, so here's another link to Facebook wrongdoing. Suffice it to say: if you still use Facebook, it may well be time to consider moving on.

Other than Facebook, Stackshare estimates that there are almost 10,000 companies out there that make use of React for their business. Some of the big names include Twitter, Netflix, Shopify, and Airbnb; React is a serious framework, having been adopted and is being used by seriously big companies.

Where are Its Strengths?

The Virtual DOM

This is the big one; the main benefit of ReactJS over building without a framework, or building with a framework that doesn't use the Virtual DOM. The Virtual DOM allows for quick and specific updates of only the elements that need to change.

If you've got a counter on your page ticking up every second, React can update just that specific element rather than the entire DOM, meaning that bits and pieces of your UI can update independently of each other and do so without slowing down the entire application or website.

Reusability and Reliability

React is probably the most economical of the frameworks I'm discussing today. A constant and reliable data flow means that you never really get lost in confusing components and update directions, instead knowing that parent elements will always update child elements and pass data downwards to them.

Another key element to React's developer friendliness is the reusability of its components. If you build in the right way, you will be able to cut down your build time by simply using and reusing small, modular pieces in different places in your UI and with different data flowing into them.

How About Its Weaknesses?

Your SEO Might Take a Hit Unless You Specifically Consider It.

Historically, the way that React renders hasn't worked particularly well when it comes to search engine optimisation, particularly in feeding the right content to search engine spiders. Way back in 2008, I was facing a very similar problem whilst building similar rich, interactive web applications in Adobe Flash.

Much like then, it is more a case of allowing time for search engines to catch up with emerging ways of delivering websites than anything else. This is improving very quickly, but in simplest terms, because with React, the pages are rendered via JavaScript rather than in static HTML markup, the spiders search engines use to render your page may not necessarily see the content at all, resulting in blank sites.

Thankfully, Google and others have moved very quickly in improving their indexing of JavaScript content, and there are a number of widely used solutions for this issue; it's just that you will have to include them and be aware of them on top of the rest of your development.

JSX and the Overlap of Languages

If you're a developer who cares about separating their data, structural, and presentational layers, you might have a few complaints about JSX. It's a heavy mix of JavaScript and HTML, at its most basic level, relying on the render function to spit out HTML.

Even if you aren't particularly bothered about overlapping languages, it does feel a little bit weird at first to be writing your HTML in quotes, in a function, in a .js file...

How to Sell a Client on React

With the amount of hype and non‑tech recognition React now has, for the most part, it will fo the selling itself. Any client (or manager) who is vaguely in the tech space, or has worked with developers before, probably knows at least the name ‑‑ and with a quick show of the user list, it's not going to be a hard sell.

My favourite tech stack uses Gatsby (a static site generator), which in itself uses React. I tend to explain to potential clients that this combination results in a very performant, SEO‑friendly, and (as far as is possible) relatively future‑proof website, which should serve them well for many years. With the uptake that React has experienced, it is not hard to imagine it still being around even in a decade's time.

Up Next: Vue.

Where Does It Come from?

Vue was actually created as a bit of an offshoot of our next tech ‑ Angular ‑ in mid‑to‑late 2013; officially hitting the open‑source market in early 2014. Evan You, the developer behind Vue, says that he was working at Google when he ran into Angular. He found it helpful in a lot of ways but felt that it was heavier than it should be (and he was right).

He went on to extract the bits that he felt worked well in Angular, polish them up and put them together into a standalone framework, which he later named Vue.js. You can read a little more about his involvement with the development of Vue in this 2017 article from Between the Wires (now hosted on Freecodecamp).

Big Users?

Unsurprisingly, given that Vue (and Angular) both came out of the offices of Google, Google makes use of both of these techs in their work. I will come back to Angular shortly, but to offer a Vue‑specific use: Google uses it to handle their Career Platform and Job Board.

On top of that, high‑end fashion giant Louis Vuitton makes use of Vue for their website, and even Nintendo get into the game, utilising Vue on some of their regional sites and other parts of their online presence. I could talk to great length about these particular projects given that I worked on them both!

Strengths

One of the clearest upsides of Vue is explained intuitively by its history; it is tiny. Taking up a petite 18KB when zipped, it really does help you get your site together and then gets out of your way immediately. You are unlikely to experience any framework‑related slowdown whilst using Vue.

Vue also has fantastic docs. There's nothing more frustrating than a framework, CMS, library or other technology that offers some great benefits but leaves you high and dry when it comes to quickstarts or gaining a deeper insight into how the system works, especially when things go wrong. I'm looking at you Wufoo and your sparse, decade‑old documentation!

In this area Vue really stands out with clear, fast, and easy‑to‑use documentation.

Weaknesses

With it being a very cut‑down version of a featureful framework, there are a few drawbacks. That said, quite a lot of these relate to its young age and relative novelty to the landscape; while it does have a fantastic developer base and great resources, it is wholly outmatched by the more mature or widely‑used frameworks that it goes up against like React or Angular, and as such misses out on some of the benefits that come with that.

This means that plugins, integrations, and forums can be scarce at times, meaning that there are a lot more potential development dead ends that you might be running into if you're trying to develop something more complex or a little off the beaten path.

How to Sell a Client on This One

If you're looking to use Vue in a project, you will need to sell your client or manager on it. The way to do this is by framing it up against competing frameworks and showing that it is smaller, quicker and more lightweight.

Because of its lightweight nature, it's also pretty flexible; there might not be as wide a variety of prebuilt plugins as other frameworks, but Vue doesn't really lock itself into anything at all so if you have the skillset, you should be able to integrate anything you really need.

Last but Not Least: Angular.

Where Does It Come from?

Angular began its life as an internal tool created by Misko Hevery, a developer at Google, in 2010 ‑‑ making it the oldest of the frameworks I'm covering here today. He first put it together to speed up his development of web applications, and when he and a few others in his team realised that it was genuinely something worth taking further, Angular was released as a project for the development community to work on together, going open‑source.

Big Users?

Angular is used by some pretty big players. Gmail and Upwork both make use of it to handle user interactions on their web apps, and Microsoft Office uses it to handle the online portal and browser apps that come as part of their latest offerings.

Typically, Angular will form part of a MEAN stack, incorporating MongoDB to handle the database, Angular for the front‑end, Express.js as the server hosting the web app, and Node.js for the environment that the server runs on.

Strengths

Industry Support

Angular came from Google, and Google still supports and maintains it to this day. This means that not only does Angular enjoy contributions and support from the open‑source developer community, but also benefits from the support of the developers working for one of the biggest tech companies out there. Whether you like Google or not, it is not hard to see how that is a big benefit.

The Command‑Line Interface

The Angular CLI is an impressive tool. Right off the bat you can add external libraries, open documentation for keywords, build, deploy and run tests on your app (using Protractor). You can run linting, and unit tests ‑‑ basically anything you're going to need to do is available to you from the get‑go, which is extremely useful, especially in getting up and running quickly.

Weaknesses

The Ecosystem is a Bit of a Hot Mess.

Angular moves fast. Major updates are coming out all the time, which initially seems like a plus side, but it can definitely work against you; especially if you're unfamiliar with Angular. We're up to version 11.2.12 as the latest stable build at the time of writing, and if you'd started developing a project or trying to learn Angular on version 10.0.0, you are now way out of date, and that was only last year, and only four months after version 9.0.0 was released!

On top of that, you will find that certain parts of the ecosystem no longer function together in the way that they once did. For instance, if you go all the way back to version 7, you will find that Angular core and the CLI become aligned, meaning that they now needed to be the exact same version going forward to work. Prior to this change, you could run disparate versions of each together and have everything still work. For an even bigger rift, we can go further back; all the way to Angular 2.0.

When Angular 2.0 came out, the Angular versions before it was renamed to "AngularJS" and every following version has been "Just Angular". This can cause some confusion, at first, but isn't a major deal any more as those versions were long ago.

TypeScript

To work with Angular, you'll have to work in TypeScript. I like TypeScript and like working with it, but if you aren't familiar with it, there is a not inconsiderable time and resource investment to get up and running. If you're looking for a quick framework to get off the ground with, this might take Angular out of the running altogether.

How to Sell a Client on This One

Angular sticks out a little bit in this list because it behaves more like a platform than a framework in a lot of ways. If you develop with Angular, you're looking at a whole project, as opposed to React and Vue which can be integrated with other tools and systems, and often needs to be (for instance, React Helmet or Redux). Angular handles absolutely everything in‑house so to speak, and as such it forms a more complete package.

To pitch Angular to a client or a manager, push the holistic idea of development, coupled with the frequent and impressive maintenance from Google.

Use Cases

So now that I've covered each of the three in‑depth, let's think about some use cases in which each of these frameworks stands out ‑ this might answer any of the questions you've had while considering which one to choose, or give you some ammunition when you're trying to guide a client who has their heart set on a particular framework.

For React:

If you're looking to build a lightning‑fast Single Page Application, React is absolutely the way to go out of these frameworks. If your web app or site has a complex UI that can handle multiple different jobs at once or needs particular elements to update independently, definitely go for React.

It is less suited for smaller apps, and you might find yourself churning your wheels in getting React set up, routed, and the infrastructure together rather than developing your actual website if you use it on something small.

For Vue:

Vue takes the cake in lightweight, quick prototyping. If you're looking to get a small app off the ground quickly or develop a proof‑of‑concept before fleshing it out and moving to a bigger framework, you're not going to want to invest the setup in Angular, and you're going to want as small a framework as possible.

Vue beats out Angular and React for small, quick prototyping and small, simple apps. It's also useful for integration with an existing project because it's pretty agnostic and very flexible.

For Angular:

Angular is the go‑to for a fuller, beefier project. If you need to build something that works well on mobile and desktop and can handle heavy interactivity and present data in complex layouts, Angular is probably your weapon of choice.

It's definitely slower to get off the ground but that time investment at the start pays dividends down the road as development goes on because Angular handles it all internally and doesn't make much use of external libraries; once you've learnt it, you've learnt it.

The Wrap‑Up

Ultimately, the answer to the question "Should I use React, Vue, or Angular?" is "It depends, what're you trying to do?". As with so many other things in web development, the question is only answered with another question.

Hopefully, though, this look into the three big players in the front‑end framework world has helped clear some things up for you.

As a final note, I think it's important to point out that while getting familiar with each of these frameworks is a good look for your CV, and a potentially helpful move for your career, pushing yourself to master all three is unnecessary.

In the front‑end development world, it's very easy to feel like you're falling behind ‑‑ and to suffer from impostor syndrome because of that. Nobody needs to learn all of the frameworks and techniques available to them, and trying to do that will burn you out. Focus on one stack at a time if you can, because by the time you're done learning one, you never know what the landscape is going to look like.