How to pick JavaScript framework

05
Apr, 2018

by Filip

How to pick JavaScript framework

Deciding on a JavaScript framework for your web application can be very hard. There are hundreds of JavaScript frameworks on the market but before we pick one of them, there is a question that needs to be answered:

  • Do we already have produc
  • Are we starting from scratch

If we have product

So if we have product then we need to decide how to upgrade the product in iterations to use some of the modern JavaScript frameworks. We need to see if it is compatible and possible to apply any of these frameworks to our current state and what are the benefits of adding a new framework to our app. We also need to see how many developers we have in the company that already know that framework because if you don’t have enough developers who know the desired framework you shouldn’t start the rewrite because developers are going to create a lot of mistakes and the product won’t have all the benefits that the framework has to offer. Another thing that we should do is estimate how much time we need for the rewrite. After all these questions are answered we can jump into the technical things.


If we are starting from scratch

If we are starting from scratch then we need to make a clear decision as to whether we need a single-page-application (SPA) or if we would rather take a multi-page approach. We need to see how many developers we have that know desired framework and what is the best fit for our product.


General technical details

Before we pick any framework there is a few technical things that we need to know about them:

  • Is it a good fit for our product ?
  • Is it open source ?
  • If it is open source, how is the community ?
  • Does the framework have long term is support ?
  • Framework performance
  • Learning curve
  • Number and quality of web components

If we analyze these things carefully then we can reduce our choice to three strongest frameworks: React, Angular, Vue. All of the three frameworks are open source frameworks and their source code can be checked out on github.


React vs Angular vs Vue

History

React is view library for building user interfaces. Initially released in March 2013, React was developed and is maintained by Facebook, which uses React components on several pages. Currently React is used far more than Angular.
Angular is a TypeScript-based JavaScript framework. Developed and maintained by Google. Angular was introduced in September 2016 as version 2. the newest major release is version 6.
Vue is one of the most rapidly growing JS frameworks in 2016. Vue describes itself as a progressive framework for building user interfaces. It was first released in February 2014 by Evan You.


Core

If we look at the github repositories of those three frameworks we can see that React is the most popular one and has the biggest community support. We must also have in mind that React is oldest framework in this list(we consider only angular 2+).





Performance comparison

There is a big difference in size between the three frameworks: Angular is 143k, React is 43k and Vue is 23k. The difference in size is because Angular is framework and React and Vue are libraries.

Source: Stefankrause
All these frameworks are pretty close to each other but Vue has great performance and the deepest memory allocation.

Components

Components are very important part of every framework, it’s important that we have all kind of components like datepicker, multiselectlist, etc… The more components a framework has, we are going to lose less time developing something that other frameworks might have. So before choosing any framework check the components market for your product and check what you need for your product. All three frameworks are component based frameworks so in this moment if we compare them, React is in best position it has the biggest support with all kind of components. Vue has the least amount of components.

Learning curve

There is definitely a steep learning curve for Angular, but it has comprehensive documentation. Even if you have a deep understanding of JavaScript you will need to learn what’s going on under the hood of the framework. Using React you’ll need to make a lot of decisions in regard to third party libraries. Vue is pretty easy to learn, for junior developers it is the easiest framework to learn. Using Vue the gap between junior and senior developers shrinks and they can collaborate more easily. Vue looks more like plain JavaScript while also introducing some new Ideas like components, one way data flow, etc… In Angular it is more natural to seperate style, layout and functionality in separate files, there are people who like this kind of separation but for React and Vue it is natural that it all goes in one file, so it’s a question what people like more and what is more natural for them. Mixing javascript and jsx can be confusing for people who are starting with React. When it comes to debugging, it’s a plus that React and Vue have less magic. The hunt for bugs is easier because there are fewer places to look and the stack traces have better distinctions between their own code and that of the libraries. Angular debugging is bit different, you often need to debug the internal workings of Angular.

Typescript vs ES6

React and Vue are focused on JavaScript ES6 and Angular is focused on TypeScript. This offers more consistency in related examples and open source projects. In case you are writing your code in TypeScript, you are not writing standard JavaScript anymore. Even though it’s growing, TypeScript still has a tiny user base compared to JavaScript.

Templates - JSX or HTML

JSX helps to stop thinking about HTML and JavaScript as separated logic that needs to be in separated files. JSX is syntax that gives you the power to have more readable and more controlled logic. This is mostly due to React’s approach that we should build components instead of templates. Components are composable, reusable and can be unit tested. JSX will be transpiled in to the JavaScript. One of the biggest advantage for developers is that they have everything in one place and compile-time checks work better. Angular doesn’t use JSX, angular uses enhanced HTML with their own language and keywords like “ngIf, ngFor, ngSwitch..”. React requires knowledge of JavaScript and angular forces you to learn their own syntax. When it comes to Vue it is natural to have templates, styles and scripts in one file. This means you get css support and easier use of preprocessors like SCSS.

State management

Application’s heart is its state, so every application has a state and if we don’t manage the state properly we going to get into trouble very quickly. As the application is grows the state gets more complex and hard to maintain, track, debug.. So we need to pick some tool, library or to create our own state management tool. Most popular libraries on market:

Redux:

  • Single source of truth
  • State is read only
  • Changes are made with pure functions

Redux is library that is often combined with React. State of the complete application is stored in an object tree within the single store. This helps with debugging the application and some functionalities are easier to implement. The state is read-only and can only be changed via actions to avoid race conditions. Reducers are written to specify how the states can be transformed by actions. Vue can make use of Redux but it offers Vuex as its own solution. A big difference between React and Angular is one-way vs two-way binding. Angular’s two-way-binding changes the model state when the UI element is updated. React only goes one way: it updates the model first and then it renders the UI element. Angular’s method is cleaner but React’s way results in a better data overview, because the data only flows in one direction.

So what to choose?

  • If you love TypeScript: Angular
  • If you love object oriented programming: Angular
  • If you need structure: Angular
  • If you like freedom: React
  • If you like big ecosystem: React
  • If you love JavaScript: React
  • If you like style, HTML and js in one file: Vue
  • If you want the easiest learning curve: Vue
  • If you want the most lightweight framework: Vue
  • If you are working alone or have a small team: Vue or React
  • If your app tends to get really large: Angular or React
  • If you want to use source code for mobile app: Angular or React