It's fascinating to think about why one thing becomes more popular than another. Sometimes the reasons are clear, other times not so much. This is a particularly interesting question in the case of Angular and React. Angular, if we can refer to it as a single thing, used to be the most popular front end JavaScript framework by a wide margin. What happened?

Although I realize React is a library rather than a full framework, I’ll use “framework” as a shorthand for both throughout the article.

Let's begin by reviewing a bit of history...

History

In 2013, the undisputed leader among front end JavaScript frameworks was AngularJS. It was immensely popular and led to an explosion in single page application (SPA) development. The most notable feature of Angular was perhaps two-way data binding. It made things much easier for developers and was sometimes touted as the “killer feature”.

In May of 2013, a new framework was introduced at JSConf US. It was called React and was created by Facebook engineer, Jordan Walke. It ended up changing everything.

Instead of two-way data binding, React emphasized unidirectional data flow. The React approach said that two-way data binding didn’t scale well and created applications that were difficult to understand. It also introduced things like JSX and the virtual DOM. These were seen as both innovative and controversial at the time, but have since been widely accepted. React’s influence since its introduction is hard to overstate.

In September of 2014, at the ng-Europe conference, the Angular team announced what would be known as Angular 2.

Is was a drastic change that left many developers angry. One of the main sources of complaint was the lack of a migration path. Here’s a comment typical from this period:

I work for a moderately large company (2,000 people) and were rolling out a new web experience to replace all our old text based systems this weekend. I've backed angular the whole way and its been lovely to work with - the entire UI is written in it. This news is incredibly unfortunate, inconvenient and potentially expensive.

The old systems have been running for over 15 years without breaking version to version, and even survived a Solaris to Linux migration. Meanwhile I can't even get a year out of an app before it's superseded with no migration path. Unreal.

Even the naming was controversial and seen as a marketing ploy:

The problem is that Angular 2 is completely different framework, and suggesting the roadmap for upgrading existing AngularJS apps to Angular 2 is no different than suggesting a roadmap for upgrading an app from Ember or React to Angular 2.

To be sure, there were other perceived problems with AngularJS. It shouldn't be surprising then that there were people — particularly those working on large applications — that applauded the changes introduced in Angular 2. The new direction took some inspiration from React, most notably, unidirectional data flow. However, it was very different in other areas, as we will see.

Nevertheless, the decision damaged the popularity of the project and earned it a reputation (at least in the short run) for instability. By agreeing with React’s assessment of two-way data binding, the Angular team simultaneously validated the soundness of React and cast AngularJS as a flawed framework that was best left behind.

In the period between the announcement of Angular 2 and its release in 2016, React flourished while many in the Angular community decided what to do next. Some left and didn't come back.

Opinionated vs Flexible

Here we land squarely in the framework vs library discussion. It’s true that React is only a UI library. It doesn’t prescribe routing, state management, data fetching or even language choice. Angular, on the other hand, does make decisions about these things. As Stephen Fluin, Developer Advocate on the Angular team writes:

Angular is opinionated, giving developers defaults for things like network connectivity, state management, language choice, build toolchain. These defaults are continually tested and validated with each other to ensure that the Angular platform moves forward at a steady and reliable pace.

Instead of providing defaults, React has left these things to the community. As a result, a vibrant and diverse ecosystem has sprung up. It provides a great deal of flexibility for how you architect your React applications and how you adapt React to best suit your team. But it has trade-offs.

Too much choice can be overwhelming. People that are new to React often comment on this difficulty. On balance, however, the flexibility that React provides has been an asset and contributed to its popularity. As we’ll see next, there is one opinionated decision made by the Angular team that has hindered its adoption perhaps more than any other.

TypeScript

TypeScript is a compile-to-JavaScript language that is influenced by the Java and C# languages. One of its most notable, and popular, features is static typing. One of the big decisions with Angular 2 was the adoption of TypeScript as the language it would use for development.

Many people love TypeScript, and in fact use Angular because they love the familiarity it offers to those coming from a Java or C# background (very common in Angular). They also view it as technically superior. However, for many other developers, TypeScript is a barrier to entry. It feels like yet-another-thing to learn in an already overwhelming and quickly evolving JavaScript ecosystem.

With React, flexibility is again an asset. Although not standard practice, you can use TypeScript for building React applications, and it’s a choice that is becoming more popular. Another option for static typing in React is Flow, which is also a library from Facebook. However, the focus on plain old JavaScript makes React more approachable and contributes to its popularity over Angular.

Paradigms

A paradigm is a model or pattern. In JavaScript, there are a number of popular paradigms including object-oriented programming (OOP) and functional programming (FP). Paradigms are more important than is sometimes recognized. They help form mental models for solving problems. Becoming well-versed in the principles of a given paradigm can help accelerate development by providing mental shortcuts for solving the challenges that arise while building applications. They can also help produce higher quality software.

Angular is decidedly on the OOP end of things. TypeScript is a great example of this. It allows developers that come from a background with C# and Java to transition more easily to writing front end applications in JavaScript.

Although not a purely FP framework, React firmly has its roots in the functional paradigm. We see this clearly illustrated in an account of the early development of React:

Through his FaxJS experiment, Jordan became convinced that functional APIs — which discouraged mutation — offered a better, more scalable way to build user interfaces. He imported his library into Facebook’s codebase in March of 2012 and renamed it “FBolt”, signifying an extension of Bolt where components are written in a functional programming style…We could test the waters of this new functional paradigm, without having to go all in. We started with the components that were clearly best expressed functionally and then we would later continue to push the boundaries of what we could express as functions.

Realizing that FBolt wouldn’t be a great name for the library when used on its own, Jordan Walke and Tom Occhino decided on a new name: “React.”

When coupled with Redux (which was inspired by the functional language Elm), a React application takes on a distinctly FP character. But how does this affect popularity?

Currently, I'm not sure it does, but in the future, it might. Functional programming has undoubtedly become much more popular as a result of React, and in my experience, many developers who have adopted FP reflect the comments of this developer:

I had no real clue about functional programming prior to React. I always did OOP before. Once I got in touch with React, I got interested in FP. Then I read the “Mostly Adequate Guide to Functional Programming" and it was kind of an revelation for me.

I still do OOP, and I'm far, far away from being an FP expert, but I think if I'd take the effort to learn a real FP language then I probably wouldn't want to go back to OOP, and that's something I fear :) I've read a few blog posts from people who stated that learning FP kind of made them "unemployable", because they suddenly saw all the problems and annoyances that OOP brings with it (unfortunately I can't find the link anymore).

This quote regarding OOP by Joe Armstrong, the creator of Erlang, is quite fitting: "You wanted a banana, but what you got was a gorilla holding the banana, and the entire jungle.”

The quote above makes me wonder how many developers that have been exposed to FP are now reluctant to go back to an OOP style. As the years go by and more new developers begin their careers with React, how many will grow averse to OOP?

I don't have a good answer to that question, but I think paradigms are something to consider when evaluating which framework is right for your team. I have seen people who come from an OOP background struggle with working on a React + Redux application. There is unfamiliar syntax and concepts. The lack of familiarity can slow initial development and lead to frustration. I'm sure the reverse is true as well.

For most people, a programming paradigm isn’t a definitive consideration when selecting a framework. It’s a notable difference, and to some developers, it’s one that matters. It will be interesting to see how this plays out in the coming years.

The Future

What does the future hold for these two frameworks? In short, the future is bright for both React and Angular. React continues to surge in popularity and has become the default starting place for many new developers.

Although Angular continues to see increased growth in usage, it’s falling further behind React. Another factor for both frameworks is the rise of Vue. It’s growing at a very fast rate and has a good chance of unseating Angular as the second most popular framework by the end of the year.

Graph of JavaScript framework downloads 2017

At this point, Vue presents a bigger problem for Angular’s future growth than React. Vue is sometimes called a “post-AngularJS framework”. This is meant to indicate similarities with AngularJS — things like templates — but without the perceived demerits. Like Angular, Vue has a more OOP approach, but is far easier to learn. This ease-of-use makes it an attractive alternative to React for new developers.

But there is a final question we need to consider — does it even matter which framework is the most popular? Maybe a little.

Understanding what makes a framework attractive to other developers can help you decide if it’s right for you and your team. It might also be important to new developers who want to make sure the tool they are learning will help them land a job, both now and in the future. That said, learning more than one framework has value. Being open to what the various frameworks — not just React and Angular — have to offer can be a rich learning opportunity.

If you’ve enjoyed this post, sign up for my weekly newsletter. I curate the best JavaScript writing from around the web and deliver it to readers every Thursday. The sign up form is right below this article.

Until next time, happy coding…