Comparing Front-end Frameworks: React vs Vue vs Angular

The world of technology is a pulsing cycle. You'll have a period of expansion, where new technology is developed, and multiple different spin-offs, iterations, and variations appear until the market seems saturated with options. It becomes challenging to know which to pick. Then, as that technology ages, the expansion begins with the next iteration. Next, as people gain experience using these options and comparing them, some become the clear winners. Some will fold, some will be purchased and rolled into others, and the market consolidates with the most effective options.

We're in the middle of this cycle with development. Right now, there are three clear favorites for the core technology everyone uses for their web app development. Those three are the front-end frameworks of Vue, Angular, and React.

All three of these frameworks are iterations on JavaScript, and they all work in slightly different ways, but they're all compelling and can all be used to make well-functioning apps.

What Are Front-End Frameworks?

You can split an app's functionality between the front-end and back-end in development. Front-end is the stuff a user sees and interacts with - it's your dashboard, newsfeed, user profile, etc. The back end is the server-side databases and infrastructure that hosts and runs the front-end code. Angular, Vue and React are all frameworks for front-end development.

Front-end frameworks are like shortcuts and cheat sheets. You could code up an entire front end in JavaScript, raw. After all, JavaScript, HTML, and CSS combined are present virtually everywhere on the internet.

In a way, you can think of it as a recipe. Imagine you want to make a pizza. You're given wheat and a millstone, meat and casings, spices, seeds; you have to grind your flour, make your sausage, grow your vegetables. It's a ton of work to make a pizza that is likely to be delicious, though you'll probably encounter missteps along the way.

Now imagine you're making that same pizza, but you're given pizza dough, pepperoni, and vegetables. You still have to prepare the ingredients, but it's much faster to assemble. And while the from-scratch pizza might be tastier, it also has a lot more points of failure along the way.

This process is the difference between using a framework and not using one. Not using a framework takes more time and has more places it can go wrong, and while you may be able to produce a faster, more effective result than you would with a framework, it will take a lot more work to do, and there's always the chance that you won't. Indeed, most users won't even notice the difference.

It's no wonder that frameworks are so popular.

All three frameworks – Angular, React, and Vue – are similar in that they're essentially component libraries. They're packages of dough, sauce, cheese, veggies, and so on, everything you need to make a pizza. The difference is one of them might give you dough and sauce while another gives you the ingredients to make the dough, or one might give you a specific selection of toppings while another gives you a different set of choices.

It's those differences that are important when choosing a framework. So, what are they? React is a library of UI elements, Vue is a progressive framework, and Angular is a complete front-end framework. What does all that mean?

Differences in Architecture

The structure of the three frameworks varies significantly.

To start, React is a library of elements and building blocks. It doesn't enforce structure (and is thus not technically even a framework, but since it's used in more or less the same way, we're keeping it in the comparison), so it's very flexible. You can think of it kind of like having a giant pile of Lego bricks to play with. You don't have to engineer a wheel when the wheel is right there to use, but you do have to build the car.

Vue is also technically not a traditional framework because it focuses solely on the view layer of app development. It's made to allow you to develop small, individual components per your specifications. A single Vue element can be a module of HTML and CSS that works the same way and can be re-used throughout your code. Vue can also be extended using official and unofficial expansion packages, like Vue Router, to be more like a traditional framework.

Angular is a more traditional framework. It allows you to build components from a combination of a template, a class (that defines how the module functions), and metadata that specifies how it looks and acts. You define the components; then you create services to use those components to develop the front end you're designing.

Differences in Popularity and History

Each of the three frameworks has a distinct origin.

However, they're all interlinked due to all being part of the same overall environment (the internet), and developers all talk to each other and socialize.

• Angular was developed in 2010 by Google. However, what we think of as Angular today is now called Angular 2. Angular 1, currently called AngularJS, was deprecated in 2016. Most people, when talking about Angular, are referring to Angular 2. Or, well, Angular 13 (the most recent stable release) or whatever it's up to now.
• React came out in 2013 and was developed by Facebook, primarily to power their architecture and content (Facebook, Instagram, WhatsApp, and all their components) but was released for public use as a framework anyone could use.
• Vue is the youngest of the lot by a year. It was developed by an ex-Google employee and released in 2014, just a year after React. In a way, it's sort of like the indie offering trying to compete in the space dominated by Facebook and Google and is supported by a Patreon and independent funding.

All three frameworks are open source under the MIT license. If you're curious what that means, you can read a summary here.

It can be challenging to determine how popular each framework is. The most common way of estimating it is by looking at the number of stars the framework has on Github. As of this writing, they are:

• React has 183k stars.
• Vue has 194k stars.
• Angular has 80k stars.

While this seems dramatically lower, remember that Angular was forked; AngularJS has 60k stars of its own. Both are still in active use and are maintained, though they have fewer stars than their competitors even combined.

Of course, they're all popular enough to have significant communities, plenty of ongoing support, and a broad ecosystem of tools you can use to expand functionality or make it easier to develop in the framework.

The Pros and Cons of Angular

Starting with Angular, let's talk about the pros and cons of using each framework.

Pro: MVC structure. Angular divides your front end into a model, a view, and a controller, with a firm set of best practices for each component. This framework allows you to develop well-structured code and makes it easier to troubleshoot, edit, and fix.

Pro: HTML templates. Angular uses HTML for most of its templates, making them easy to read, code, and edit as necessary.

Pro: Two-way data binding. This data structure gets into the weeds with technical details we don't need to get into here. Suffice it to say that it's a practical and fast-operating structure for small and simple applications. However, it might falter or slow down operations compared to one-way data binding on more extensive and complex apps.

Pro: Popularity. Angular is one of the more popular frameworks out there. There are many additional structures and tools, features, pre-made modules, and templates you can use as developed and supported by the community. You can also most assuredly find assistance with any problem you're having somewhere in one of their large community hubs.

Con: No default shadow DOM. Shadow DOMs are a way to encapsulate sub-elements of DOMs (don't worry if you don't quite get this) that, to simplify, basically means that you can use a template that would have CSS applied equally across every usage and segment off particular sub-uses of it to have their styling. It's a great way to use a template/module-based framework without the drawback of needing versatile styling for templates. Angular supports it but doesn't use it by default, so you need to emulate it.

Con: Typescript foundation. Typescript is a Microsoft-developed spin-off of JavaScript, with differences in syntax and support beyond what JavaScript can do. If you're familiar with JavaScript, you can still use Angular, but you're limiting yourself. You'll need to learn Typescript to use Angular's features fully.

Con: it can be slow. Angular re-renders entire DOMs when they change, which is slower than the virtual DOM element rendering that other frameworks support.

The Pros and Cons of React

How does React compare?

Pro: Virtual DOMs. Virtual DOMs, as mentioned above, are a way that the framework emulates DOMs without formalizing them. This process allows React apps to change the contents of a given DOM without having to re-render the entire DOM, which is much faster and less resource-intensive for apps that change frequently.

Pro: Simplified code base. Since React uses pure functions rather than components, you can create a simplified codebase. This feature is especially relevant if you want to, say, use a single element from a complex component. In Angular, you can't use that function in React.

Pro: Popularity. Much like Angular, React is extremely popular and is well-supported by the community.

Con: You need another tech framework to use it. Since React is a library and not a complete framework, you generally still need to use other libraries and components to make a fully-robust app.

Con: JXS foundation. JSX is a sort of hybrid of JavaScript and XML. Angular uses Typescript, and React uses JSX. Again, to get the most out of the framework, you'll need to learn a spin-off of JavaScript.

Con: Tricky to learn. React is flexible and requires you to develop your app structure from the ground up. It also requires you to discover other tools and modules to make something practical. It's a steep learning curve.

The Pros and Cons of Vue

Alright, how does Vue stand up to the other two?

Pro: MVC structure. Just like Angular, Vue uses the MVC structure, allowing you to create well-defined and well-structured code from the outset.

Pro: Small size. Vue is a single framework you load just like Angular, but it's smaller and lighter-weight than Angular. Of course, this can also be a con because you need to add additional modules and scripts if you want to expand its functionality.

Pro: Pure JavaScript. Unlike the other two, you don't need to learn a weird spin-off of JavaScript to use the framework. All you need is that JS knowledge.

Pro: Easy to get started. The learning curve for Vue is much shallower than the other two, so it's a lot easier to pick up and run with.

Con: Smaller community. Vue is the newcomer and doesn't have megacorp backing, so the community is smaller. That said, it's still just JavaScript, so there's still a ton of support out there, and you are still highly likely to be able to find a good community.

Con: Chinese support. Vue is extremely popular in China, so many third-party modules you might want to pick up and use are developed, supported, and only documented in Chinese. Reading and understanding the documentation can be frustrating if you don't know Chinese.

Which Framework is Best?

There's no precise answer to this question. All three frameworks are popular and valuable in unique ways, so it all comes down to what you want to do and how you want to do it.

To thoroughly discuss that, why not give us a call? We're the experts on making your ideas into fully-realized apps, and we can help you figure out what direction to take your project.