Overview

Picking a Javascript framework for your applications front end is hard and there is so much on the line so how do you pick? The answer like everything in software development is “it depends”. Fortunately though I think it mainly depends on a few small factors. Let’s look at them.

TLDR: SPOILER ALERT… we like React because it
– puts Javascript first
– has a very active and innovative community
– provides some great opinionated options for managing complex data
– has fantastic development tooling
– allows for really amazing automated testing
but that doesn’t mean it’s always the best choice

The Frameworks

We are going to only look at the big 3 frameworks in this post.

• Angular
• VUE
• React

Who’s Backing the Framework?

If you want to make sure that your framework is backed by a big corporation with deep pockets then Angular or React should be your choice. Angular is backed by Google and React is backed by Facebook.

Who’s Using This Framework?

If you want to use what most of the big well known sites are using then you should use React as lion share of large sites are not only written in React but have been rewritten to use React. This means a lot of really smart folks who are building the most successful sites out convinced their managers to rewrite their mission critical assets to React at great expense.

See a list of well know sites here: https://medium.com/@coderacademy/32-sites-built-with-reactjs-172e3a4bed81

How Many Choices Will I Have To Make?

If your not wanting to have to build up an app with a lot of different small libraries then Angular is the clear winner as it offers a one stop shop for all your modern web needs.

However, I feel this is a disadvantage unless you are working at a company that requires legal department approval for all frameworks that you use which I have encountered with some of my clients. The friction caused by having to approve each open source tool used in a modern web applications would be prohibitive for using Vue or React. On the flip side if you don’t have a legal department putting these kinds of demand on your tools then the flexibility of Vue and React’s micro-framework approaches will be a huge strategic advantage for you as you will be able to customize your app to your needs and you will not have to wait for major framework releases for new features and will generally have a faster innovation cycle.

But What Will My Developers Be Most Productive In?

Developer alignment is probably the most important factor. Your team will be most productive in the tool that suites their preferences and values.

NOTE: As a manager or stake holder you want to make sure that your regional labor markets can support your projects goals and budget. Less popular frameworks might not have as many quality candidates but on the flip side more popular frameworks might have a lot of quality candidates but at a higher price tag. Take time to consider your market when evaluating your strategy.

My Team Loves C# and Java and Isn’t Crazy About Javascript

If your developers come from statically typed backgrounds like Java or C# their skill sets and values will likely align more with the current Angular offering especially if they find Javascript to be annoying (not judging, I used to hate Javascript too…). Angular is Typescript first and just “feels” more like the server rendered approaches that are found in C# and Java’s server rendered frameworks like ASP.Net.

My Team Loves Javascript

If your developers are Javascript ninjas or if they have interest in learning it then React is going to be something they will love as it puts Javascript first.

NOTE: this is the key factor in our decision to use React. We love Javascript and Javascript loves React!

React Is Javascript First

Corey House made this points as well as anyone can so I’ll just quote him here:

Here it is. This is the fundamental difference between React and Angular. Unfortunately, Angular 2 remains HTML-centric rather than JavaScript-centric. Angular 2 failed to solve its most fundamental design problem:

Angular 2 continues to put “JS” into HTML. React puts “HTML” into JS.

I can’t emphasize the impact of this schism enough. It fundamentally impacts the development experience. Angular’s HTML-centric design remains its greatest weakness. As I cover in “JSX: The Other Side of the Coin”, JavaScript is far more powerful than HTML. Thus, it’s more logical to enhance JavaScript to support markup than to enhance HTML to support logic. HTML and JavaScript need to be glued together somehow, and React’s JavaScript-centric approach is fundamentally superior to Angular, Ember, and Knockout’s HTML-centric approach.

source: https://medium.freecodecamp.org/angular-2-versus-react-there-will-be-blood-66595faafd51

NOTE: Corey’s article above is a few years old and predates Vue. However, the concept is still as valid today as it was a few years ago and Vue is also HTML centric and would have this same “fundamental design flaw” described above.

Can We See an Example…

The easiest way to codify this is with a simple example of writing out some To Do’s. To do this in Vue we would write some code like shown below.

<ul>
  <li v-for="todo in todos">
    {{ todo.message }}
  </li>
</ul>

Compare this to doing the same thing in React as shown below.

<ul>
  {todos.map(todo => <li>{todo.description}</li>)}
</ul>

The big benefit here is that if you know Javascript you already know how to take an array and map it to something else. While in Vue we have to go and look up what the special v-for attribute syntax is. And there’s no additional value we get out of learning this special attribute syntax while if we write some backend code in Node JS learning Javascript’s map function will come in handy.

Now let’s say we only want to show To Do’s that aren’t completed. Well if we already know Javascript then we would know that we can easily filter our arrays as shown below.

<ul>
  {todos.filter(todo => !todo.completed).map(todo => <li>{todo.description}</li>)}
</ul>

And boom we have filtered our To Dos. So how do we do this in Vue? Well first let’s go look in the documentation… 🙁

What About Some Cool Developer Tooling?

React and Redux offer some amazing tooling. See this post for details: https://vicesoftware.com/how-react-redux-enables-high-development-velocity/ 

What about testing?

React’s virtual DOM and supporting library’s like Enzyme by AirBnB or Kent Dodd from PayPal’s React Testing Library will allow you to do some really amazing things with your tests. You can see why we love it in our case studies and testing series.

What About My Grid?

Any experienced UI developer will know that the worst thing about the bleeding edge is availability of good component libraries like Kendo UI. For this the longer your framework has been out, the better your support and alignment will be. Angular is going to be great here as they have been a top framework the longest and on the vendors road maps the longest. Vue will be the weakest here and React will land right in the middle. As of this writing I’m patiently waiting for the latest update to the Kendo Grid’s newly released library that was writing from the ground up in React. They have had an offering for a while that wrapped their older JQuery libraries in React wrapper components but it left a lot to be desired as the way that JQuery and React deal with data are so different. You will definitely want to vet your 3rd party libraries if you have complex reporting requirements or need some very specific things from specific vendors and I’d expect that Angular would currently have the strongest offering.

What About Mobile?

If you need mobile apps too then React is the current winner. React Native allows for sharing code across Web, IoS and Android (up to 70% reuse across all 3) and more importantly it allows using one team for all your front end apps. Now you maybe thinking that Angular has Ionic and Vue has Native Script, but they are both far behind React. Ionic is a web view technology so it runs in an embedded browser which makes it way slower than React Native and Native Script is still really new and doesn’t have the community or tooling yet that is needed to really be successful on a multi-target front end effort. The hardest part is always the hardware integrations and those things take time to get good community support.

What Else Should I Consider?

I feel another compelling reason to consider React is that it has an extremely active community that has consistently been a leader in innovation on the front end over the last few years and introduced all the concepts that I feel are the most important and exciting in front end tooling including:

1. Virtual DOM
   – Allows avoiding DOM thrashing that was rampant in 2 way data bound frameworks like Angular 1.x
   – Allows great testing as you can use a JS based DOM in unit tests (see our testing blog posts for details)
2. Immutable Data Models
   – Allows fast dirty checks O(1)
   – Redux uses this to avoid re-rendering views when their models aren’t dirty
   – Allows for amazing developer tooling and productivity. See this post for more details: https://vicesoftware.com/how-react-redux-enables-high-development-velocity/
3. One Way Data Flows
   – Keeps your data easy to reason about
   – Facebook came up with this approach after not being able to get their notification count to work correctly for several years. Your team is not smarter than Facebook’s, this is a real problem for complex systems.
   – Allows for
4. Component First Based Approach
   – Angular’s directives were so hard to write that no one used them. When React came out with it’s approach which was optimized for components everyone else copied it and for good reason as it’s way easier to build your application out of small re-suable components than larger more coupled ones.

These are only my favorite ones but there are plenty of others out there. And note that all of these have been copied by other frameworks in one way or another.

This seems a Little Biased

And it is. And that’s because we love React and we hope you will too! But if your team prefer HTML to Javascript or if your labor market or budget isn’t aligning correctly or if your legal department is making you have to approve every open source library you use then Vue and Angular can be great fits for your projects too.