Steel Framework
Sep 19 2018 03:26pm | | Share

React vs Angular vs Vue 2018

By Chad Upton

Just over two years ago I wrote a similar blog post comparing front-end JavaScript frameworks and a lot has changed since then, so now it's time to do a follow up. Back then, Angular 2 was only in beta and now Angular is at version 6!

 

Some of the other popular options have fallen out of popularity and others that barely existed back then have gained mass appeal in record speed. Last time, Backbone and Ember were among the top four and now we rarely come across them at all.

 

It's no surprise that JavaScript frameworks are hard to keep up with, so I'll breakdown the popular options as simply as possible and you can investigate further if there are any particular details you want to know more about. Just like before, I use the term "frameworks" loosely since it is a middle ground between “platform” and “library”, words that better describe some of the options discussed below. Now, let’s explore the current state of major JavaScript frameworks.

 

In no particular order, the top three most popular frameworks right now are:

 

  • Angular
  • React
  • Vue.js

 

It's hard to say exactly how popular each one of these is, but if we go strictly by npm package downloads (chart below) then React is downloaded about 45% more than Angular and Angular is downloaded about 280% more than Vue.js. So, Angular and React are far ahead of all others in popularity.

framework chart

The other interesting thing is that Angular is still searched about 25% more than React, although that is likely because Angular has been around longer and there are a lot of existing applications that are still in development. Also, it's probably worth mentioning that npm package downloads may not be an accurate way of evaluating popularity since the number of fresh builds that are done each day could significantly skew the numbers. Hopefully, most of those discrepancies are a wash given size of the dataset.

 

Also, popularity doesn't necessarily mean a framework is right for you or your project; however, it does mean a lot of people have tried them and liked them and there are a lot of those people creating conversations, videos, and examples for you to reference. Popular is a strong signal that the framework won’t get in the way of your project’s success, but it's no guarantee and there are edge cases where they might not be the right choice. Let’s look at the first of the top three.

 

Angular

 

Angular is written by the Angular Team at Google and has contributors from the open source community as well. If you're new to Angular, it is a full featured framework with: reusable components, routing, internationalization, dependency injection, data-binding, mobile touch events, templates, server-side rendering, and much more.

 

The latest version is Angular 6 which was released May 4, 2018. That's only 4 months ago so it seems pretty current, but Angular 7 is due within the next couple months! Not to worry, although major Angular version updates are common they're usually very easy to adopt. The Angular team is very good about announcing upcoming releases, usually about every 6 months now. They also make the upgrade path as easy as possible and document breaking changes when applicable. Since browsers are always updating, this is great because you can quickly adopt framework bug fixes and add new capabilities to your development process through regular updates.

 

It's also worth pointing out that Angular is often thought of in two different contexts:

 

AngularJS - the very first version of Angular

Angular 2(+) - the complete rewrite and all of the iterations since then (4,5,6)

 

AngularJS code is very different from Angular 2 code; in fact, Angular 2 code is much closer to Angular 6 code than AngularJS code. If you’re starting a new Angular project, stay clear of any AngularJS code samples and stick to Angular 2(+).

 

Angular also has a command line interface (CLI) that is built and maintained by Google. This is a great tool for generating nearly every common type of entity you'll need to create and it also adds the necessary test files and imports for those entities. Additionally, it includes the compiler, bundler and a web server for quickly building and running your application. It can also watch for file changes, rebuild and then automatically refresh your application in the browser.

 

Using the CLI is a great way to speed up development, not just because it creates much of the skeleton for you and takes care of the build, but also because it ensures your elements are referenced properly to prevent runtime errors and get you up and running swiftly. The CLI also adds most of the polyfills you may need. Some are enabled by default, other are commented out and you can simply uncomment them if needed.

 

A typical view has a template file (HTML) and a class file (TypeScript/JavaScript) associated with it. The class contains the business logic, data and behaviors of the template, which are achieved with class code and may inject many other classes, objects, services, etc.

 

It is recommended that you use the TypeScript language to write Angular application since it has some development and runtime advantages and it makes it easier to write in an object-oriented way (if that's important to you). TypeScript is a superset of ECMAScript 6, is backwards compatible with ECMAScript 5 and is a collaboration Between Microsoft and Google, although it was started by and is primarily maintained by Microsoft.

 

React

 

React is more of a library than a framework, but it's often compared to Angular when choosing a front-end framework. While Angular leans toward a more formal “Enterprise” Object Oriented Programming approach where the template code is in a separate file from the business logic, React favors separation of concern over separation of technology – the template code and business logic may be in the same file but they’re not inside of each other.

 

Developing in React tends to be a little more straightforward since there is less file switching with logic and layout in the same file and React is less rigid. Whereas Angular is more opinionated -- it is a complete framework that provides all the tools required to build a complete application, React focusses only on rendering the UI.

 

React is Component-Based and component logic is written in JavaScript, which will be preferred by the purists who prefer to keep logic and state out of the DOM. That said, the .js files will typically contain HTML because React offers an XML-like markup language, called JSX, that can be used to write components. JSX is optional, but highly recommended for readability and convenience; and, the learning curve is gradual enough for you and your electric scooter to climb without incident.

 

However, purists who want to separate technologies (HTML and JS) also have that option if desired. That's not the usual React paradigm though, in their words:

 

React embraces the fact that rendering logic is inherently coupled with other UI logic

 

This approach makes it very straight forward to build applications, especially with the help of JSX.

 

Like Angular, React also has a CLI that is built and maintained by its creator (Facebook). Like the Angular CLI, the npm package "create-react-app" will generate an application skeleton for you and it too includes the necessary glue to build, watch, rebuild and serve your application for speedy development. It also does live-reloading in the browser as you make changes to the code.

 

React is a little more open ended than Angular, with fewer prescribed solutions. For example, Angular includes a router while React does not. However, React's CLI documentation has brief instructions for installing the most popular React router... called "React Router", and many other answers to common questions like this. These libraries are not included by default, but the README that’s included with every new CLI project documents how to quickly add most of the common extras.

 

One feature that React’s team offers which neither Angular, Vue, nor most of the other teams offer is an in-house solution to building native mobile Apps. There are a number of ways to package any web app as a mobile apps for the app store, but that's not what this is. React Native lets you build React JavaScript apps that are cross compiled into real native apps that use the real native components. Essentially, you use the real native components but you use them in JavaScript, which makes native app development much more accessible to web developers who don't currently know Objective-C or Swift (iOS) and Java or Kotlin (Android).

 

Although some of the elements are different, once you understand the paradigm of building a React web app, you can apply that knowledge to building a React Native app just by learning the native components that you need. This is could be a huge swing in React’s favor if you mobile apps are on your roadmap.

 

Vue

 

I saved Vue for the last of the top three because Vue can seem more like Angular or more like React, depending on how you use it. In other words, you can incrementally adopt very little, or a lot, of Vue -- it can act as a small library or a featureful framework. It was created by a former Google engineer, Evan You, who also worked on Angular while at Google.

 

Like Angular and React, Vue applications are built by creating Vue components. These can be created with separate HTML/JS/CSS files or they can be created as "single file components" where all three files types are combined into one .vue file. If you like React's JSX, you can also use that with Vue by installing the appropriate babel plugin.

 

Speaking of files, Vue also has a CLI for getting a project started quickly. In fact, this is my favorite CLI of the top three because it has a fast mode where it sets up a project using the default settings in one step, and it has a manual mode where you can pick various options in a step-by-step wizard like interface, like whether you want to use Typescript or which test framework you’d like to use for unit or e2e testing (and many more options).

 

One of the coolest things is how easy it is to change the default settings. At the end of the manual setup, it simply asks you if you want to save your choices as the default settings for the next time you use it!

 

The project skeleton their CLI creates is also one of the nicest. The index page lists all of the plugins that were installed by the CLI and has all the essential links for beginners and reference links for experts. Needless to say, I was pleasantly surprised by Vue's CLI.

 

Other Notable Options

 

There are so many frameworks and libraries out there that this post could go on forever, so I’m not going to go into too much detail on this one. But, before I wrap up there is one more interesting one worth mentioning, partially because it is gaining some traction and that's probably because of its unique approach. That language is Elm. Yes, language. If your application is mission critical, it might be just what you need. That's because Elm is structured in a way to prevent runtime exceptions. That's a lofty promise, however Elm's compiler strictly enforces static type checking and all values in Elm are immutable. In other words, if it compiles then it shouldn't fail at runtime. Elm currently has more GitHub stars than Vue, so it will be a front-end language to keep an eye on in 2019.

 

Native Mobile Apps

 

I mentioned earlier that Angular and Vue don't have their own version of React Native (a homegrown way to build native apps from JavaScript). But, there is something called NativeScript, that actually predates React Native, and it achieves the same thing as React Native -- it allows you to build JavaScript based applications that get cross compiled to real native applications. NativeScript 2.0 offers direct support for Angular and Vue is also supported through a community developed plugin.

 

Size and Performance

 

The sizes of a basic app for each framework can vary widely and depends a lot on which components and libraries you include, not to mention the optimizations you perform during your build. But, a basic app from the top three are all within ~31kb of each other: React + MobX at 98KB, Vue at 100KB, Angular at 129KB. Considering what you get with each one, there's no big surprise here and if I can turn the phrase around, "You pay for what you get."

 

Performance is a similar scenario. There are minor deviations in recent versions of these top three front end options and the difference is not likely something you're going to notice with your naked eye -- they're all within ~200ms of each other in initial bootstrapping. React + MobX is slight ahead of Angular which is slightly ahead of Vue. If you want to include Elm, it's actually about 700ms faster than React + MobX, and there are a couple fringe frameworks that are another 400-500ms faster than Elm! If you pair Redux with React, then it's another ~200ms slower than Vue.

 

There's no breakout winner in size or performance so I wouldn't weigh these factors too heavily in your framework decision unless those tiny deltas are critical.

 

Personal Preference

 

There is a lot of passion around these top front-end frameworks – most people have a favorite and few can remain partial. So, how you think will probably play a large role in your decision to select a framework. The best way to do that is to play around with some code from each.

 

It can be a lot of work to get a sample up and running in each, but one option could be to use the CLI from each, or there’s a resource that could be very helpful. This GitHub repo has the same “real world” application built in all of the major frameworks for you to compare:

 

https://github.com/gothinkster/realworld

 

Conclusion

 

React and Vue are more flexible than Angular. React and Angular are a little faster than Vue. Of course, smaller and faster are generally better, but the difference is almost negligible in size and the performance won’t be noticeable to the naked eye in most cases.

 

Flexibility is likely where a large part of your technical decision will focus. Flexibility sounds nice and sometimes it is crucial, other times it's an area of decision making you’d rather skip. Although it’s not as flexible, there is a certain level of trust with Angular that all of the pieces have been built by the same team with the same roadmap in mind, so they're always going to work together.

 

In an enterprise application, that's a very important part of your decision since you're likely going to need a lot of features and the codebase is going to be around for a long time. That's not to rule out React, Vue or others, they can be good enterprise choices too. On the other hand, if you're building a small web component, Angular is probably not the right choice in a lot of cases.

 

In the end, you'll have to consider everything above in the context of your project to make the right decision. If you need help making that decision, please contact our consulting group. We’ve helped many Fortune 500 companies and large organizations build incredible web apps.