How to choose a JavaScript framework?

Developers are often biased about their technology choices. At the beginning of the year, I was about to start working on a new product and my team could choose any tech stack. I did not want to be one of these biased developers who chose the framework they liked. I wanted to make an informed and educated decision. I already had experience with React and AngularJS. I had a good knowledge of Angular and experience with TypeScript. But what about Vue, the framework that most JavaScript developers wanted to learn according to State of JavaScript 2017 survey?

A friend of mine likes saying that JavaScript Frameworks are like weeds: everyday a new framework gets released. It does feel like this, doesn’t it? I was quite skeptical about Vue when it was released, and to be honest, I was quite skeptical about Vue a long time after it got released. Did we really need another JavaScript framework? I did not really think so. But I had some free time on my hands and decided to use it to learn Vue so that I could make an informed decision about which framework to choose.

History Lesson AngularJS was started as a side project at Google around 2009. Later it was open-sourced and v1.0 was officially released in 2011.

React was developed at Facebook. It was open-sourced at JSConf US in May 2013.

Vue was created by Evan You after working for Google using AngularJS in a number of projects. He wanted to extract what he really liked about AngularJS and build something lightweight. Vue was originally released in February 2014.

Angular 2.0 was announced at the ng-Europe conference in September 2014. The drastic changes in the 2.0 version created considerable controversy among developers. The final version was released in September 2016.

Side note: AngularJS and Angular 2.0, which was later simply called Angular are two different frameworks. The naming really caused a lot of confusion. I believe that the Angular team would have been better off choosing a different name.

In December 2016 Angular 4 was announced, skipping version 3 to avoid a confusion due to the misalignment of the router package's version, which was already distributed as v3.3.0. The final version was released in March 2017.

Nowadays, developers are looking for smaller, faster, and simpler technologies. All three frameworks (Angular, React and Vue) are doing lots of work in this direction. You can expect pretty good performance from these frameworks. Performance benchmarks show similar performance.

In April 2017, Facebook announced React Fiber, a new core algorithm of React. It was released in September 2017.

Angular 5 was released in November 2017. Key improvements in Angular 5 included support for progressive web apps, and a build optimizer.

Google pledged to do twice-a-year upgrades. Angular 6 was released in April 2018. Angular 7 will be released September/October 2018.

In the beginning of 2018, a schedule was announced for phasing-out AngularJS: after releasing 1.7.0, the active development on AngularJS will continue until the end of June 2018. Afterwards, 1.7 will be supported till  June, 2021 as long-term support.

The bottom line is that these three frameworks, React, Vue and Angular, are quite mature. And it is likely they’ll be around for a while.

Key Concepts React use the Virtual DOM pattern. React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently.

React is all about components. Your React codebase is basically just one large pile of big components that call smaller components. Props are how components talk to each other; they are the data, which is passed to the child component from the parent component. It’s important to note that React’s data flow is unidirectional: data can only go from parent components to their children, not the other way around.

The component approach means that both HTML and JavaScript code live in the same file. React’s way to achieve this is the JSX language. It allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects.

To build an Angular application you define a set of components for every UI element, screen, and route. An application will always have a root component that contains all other components. Components have well-defined inputs and outputs, and lifecycle.

The idea behind dependency injection is that if you have a component that depends on a service, you do not create that service yourself. Instead, you request one in the constructor, and the framework will provide you one. This allows you to depend on interfaces, not concrete types. This results in more decoupled code and improves testability.

Property bindings makes Angular applications interactive.

Vue also makes use of the Virtual DOM like React.

In Vue.js the state of the DOM is just a reflection of the data state. You connect the two together by creating "ViewModel" objects. When you change the data, the DOM updates automatically.

You create small, decoupled units so that they are easier to understand and maintain. In Vue the components are ViewModels with pre-defined behaviours. The UI is a tree of components.

In Vue the HTML, JS and CSS for each component live in the same file. Some hate the single-file components, some people love them. I personally think that they are very handy and can make you more productive as it reduces context switch.

Ecosystems This table that shows the libraries you may be familiar with in React or Angular or Vue alongside their equivalent in the other frameworks:

It is important to note here that Angular is somewhat more prescriptive. Some developers do not like this and prefer to have freedom choosing the tools they use. It is more of a personal preference.

Lessons Learned I had the idea to build a small app with all three frameworks and compare them. And so I did. But it was completely unnecessary because of TodoMVC; a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript frameworks of today.

TodoMVC is supposed to help you select an MV* framework. But the Todo app is way too simple.

If you are new to web development and you are learning a new framework, the TodoMVC is probably a good start.

But if you are experienced and would like to build real-world, more complex applications there are better alternatives.

Some better alternatives are RealWorld and HNPWA.

RealWorld allows you to choose any frontend (React, Angular, Vue and even more) and any backend (Node, Scala etc) and see how they power a real-world full-stack medium.com clone.

HNPWA A collection of unofficial Hacker News clients built with a number of popular JavaScript frameworks. Each implementation is a complete Progressive Web App that utilises different progressive technologies.

Lesson #1 The Todo App is too simple. Use RealWorld or HNPWA to see what a real-world application would look like. Play with them, build on them and learn.

Lesson #2 Documentation is very important. Good documentation helps you to get started quickly. Vue really excels at documentation. This is one of the reasons why it is so easy to get started with Vue.

React and Angular also have good documentation. Still not as good as Vue in my opinion.

The main problem with the Angular documentation is that often you will stumble upon documentation about AngularJS instead and it can be very confusing and frustrating. That is why I said earlier that the Angular team would have been better off if they had chosen a different name for Angular.

Lesson #3 Community is important. When documentation fails, you learn that community is also very important. You want to be sure that it will be easy to get help if you get stuck and cannot find information in the documentation. You want to choose a framework whose corresponding communities are extensive and helpful; communities where you can discuss best practices and get solid advice.

Ultimately, you need to answer the following question: *Would it be easy to hire more developers who are experts or willing to work with and learn this framework?

***Other questions worth asking when choosing a JavaScript framework

**How high is the “Bus Factor?” The “Bus Factor” is a number equal to the number of team members who, if run over by a bus, would adversely affect a project. To put it more simply: Can other people continue working on your projects if you are hit by a bus tomorrow?

Remember that talent is hard to hire. You need to know how easy it is to find developers for each of the frameworks. Also, what does the learning curve look like for each framework? Again, I think that Vue really excels here. It has the lowest learning curve of the three.

What does the product roadmap look like? Is it just a prototype? Choose whatever, learn something new.

Would it have a single function that would never change? Do you have to ship it quickly? Choose whatever you are most familiar with.

Is your product business critical? Probably it is a good decision to be more conservative in your choice.

Is the product going to evolve, have new features, etc.? It should be scalable in that case.

Wrap Up There is a point in your programming career when you realise that there isn’t a best framework. All the frameworks solve the same problems but in different ways. Is it a good thing that there are so many alternatives? Yes. In my opinion, the competition between Angular, Vue, React, and the other frameworks out there is very healthy. It brings a lot of innovation and improvements in the entire JavaScript ecosystem. We all benefit from that no matter which framework we work with.

We are developers. We like fighting about all sorts of important things like tabs versus spaces, trailing commas, etc. Joking aside, it is somehow in our blood to fight about silly things. I feel that we should appreciate the improvements all these JavaScript frameworks bring. Because there isn’t a best framework.

Don’t ask what the best framework is, ask what the most suitable framework for your product and your team is.

* Work with open minds like Lora. Have a look at the Zalando jobs site.*