main banner

Development

Selecting your JS front-end Framework or Library in 2020

Are you considering starting a new web project for your company, a client or personal business? With so many options out there, you may be wondering which would be the best for you, and what factors you should take into account.


As we say in the software development business, there is no one right answer and there are many different paths to get to the same point. However, depending on your need there may be more suitable, elegant and effective ways of achieving your goals and closing the year with successful projects. In this article, we present the most popular JavaScript options, their characteristics, features, and advantages. With this, we hope you can have more information for you to decide the optimal solution that suits your needs.

 

The 3 Most Popular Options

 

First off, let’s consider what the most popular options in the market are. Using some GitHub statistics, we can find that the 3 most popular front-end Javascript options (as of December 12, 2019) are React, Angular and Vue. The graph below shows the number of downloads from 2014 to 2019. A complete analysis can be found here.

 

Graphic #1

Number of downloads from 2014 to 2019.

 

Considering these options, let’s look at some features that could come handy when considering your library or framework of choice.

 

Development and Support 

 

React was built by none other than Facebook. This means that you have a big tech company, with a dedicated team working full-time improving and giving support to users. It must be mentioned that there have also been some contributions by the community of developers as well.

 

Angular 2+ is currently supported by the Angular team at Google. This means that you have another big tech company constantly supporting and improving features.

 

Vue, on the other hand, is a library that is currently supported by an international team of members. While there is no big tech company behind, they are very active supporting and improving features.

 

Developer Experience

 

According to The State of Javascript 2019 Satisfaction Survey, an analysis of current trends and technologies shows how developers feel about it. The survey consists of three questions: (1) Do you know about the technology in question? (2) Have you used it? (3) Would you use it again? The mix of answers to these questions plus the analysis of actual downloads yielded the following results.

 

Graphic #2

The state of Javascript 2019 overview.

 

The graph above is divided into 4 quadrants: 

 

Assess means that user satisfaction is high but not widely used. These are technologies worth keeping an eye on. Vue JS falls under this quadrant.


Avoid means that the technologies that fall under this category have low satisfaction rates and are not widely used. Items falling under this category are generally not recommended. 


Analyze means that these technologies are still widely used but do not have a high satisfaction rate. Angular 2+ currently falls under this category.


Adopt means that these technologies are highly appraised and have a high number of downloads. React currently is in this quadrant. These items are generally highly recommended.

 

Library vs Framework

Key differences


A library can be defined as a set of prewritten functions that can be invoked and are usually organized into classes. Each function can be invoked and the flow of control is returned to the client.

 

In contrast, a framework has a pre existing generic functionality that developers can selectively use for their purposes. A framework can make use of many different libraries. In contrast with a library, the key difference is IoC (Inversion of control), where basically the framework is the agent that uses your code, as opposed to using some third party helper code. 

 

Graphic #3

Illustration of IoC (Inversion of control).

 

Advantages and Trade-offs


Generally implementing a library over a framework (or vice versa) is not necessarily better or worse. But here are a few considerations that can help knowing what advantages and trade-offs you get when selecting either one.


Framework

Library

  1. Advantages

    • Clear opinions.

    • Less decision fatigue.

    • Less setup overhead.

    • More cross-team consistency.

  2. Trade-offs

    • Unused libraries (tend to be heavier).

    • Harder to integrate into existing apps.

  1. Advantages

    • Lightweight.

    • Sprinkle on existing apps.

    • Pick what you need.

    • Non-invasive.

  2. Trade-offs

    • More decision fatigue.

    • Harder for cross-team consistency.


React, Angular and Vue 


Angular is a framework to develop mobile and web applications. It provides core libraries such as routing, HTTP requests, form validations and much more. It offers a wide variety of libraries included in the framework making a lot of development tasks easier, less decision making and fewer third party libraries. Angular projects are very well structured. This facilitates scalability and maintainability for large apps. In contrast, that can also bring certain disadvantages because Angular has a very specific way of solving problems, so developers need to get used to solving problems ‘the Angular way’.

 

Vue is a progressive Javascript framework. Its core philosophy is to be versatile, approachable and performant. It offers some libraries for routing (Vue router) and for state management (Vuex). While many options are available, developers can use other libraries for the same purpose. The downside may be that there is some decision making for the implementation of a given solution.

 

React is a Javascript library for building user interfaces. The core philosophy has three characteristics: it is declarative, component-based, and once you learn it, you apply it everywhere. The declaration of components makes the code more predictable and easier to debug. It is highly flexible and it only requires knowledge of Javascript as it does not have special syntax for component declarations. On the downside, React does not offer routing, forms or other libraries that Angular or Vue users may be used to. This means that there are many decisions to be taken (e.g. how I am going to handle routing or HTTP requests). For some developers, JSX syntax may be somewhat strange.

 

Integrating technology into existing systems

 

Say that you have an existing website or a CMS and you would like to add some widgets for better user experience. 


Generally, Vue JS would be the easiest way to go since you would only need to add the CDN or download a ZIP file and you would be ready to use it anywhere in your project. For example:


Add CDN in a script tag.


<script src="https://cdn.jsdelivr.net/npm/vue"></script>


Create component


<div id="app">

{{ message }}

</div>


var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})


and that’s it. (For more information visit this link)

 

For React, it would be tricky without JSX. However, it is possible to include but it would require additional configuration. For example:

 

Add React and React DOM in script tags.


<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>


Create container


<div id="like_button_container"></div>


Add logic


const domContainer = document.querySelector('#like_button_container');

ReactDOM.render(e(LikeButton), domContainer);


In the example above. (For more information visit this link

 

Angular has a specific architecture and as such, you would not be able to use it outside of that scope. You could include AngularJS (which is not the same as Angular). However, this library has been deprecated and all the Angular team efforts are now focused on new versions of it. (The most recent version to the writing of this article is Angular 9). Angular’s purpose is to build large applications in a fast and scalable manner, whereas Vue and React focus on components.

 

Wrapping up

 

For this article, we analyzed 5 key points:


  • There is no right or wrong choice when it comes to using front-end technology.

  • React was the most used front-end library/framework in 2019 followed by Angular and Vue respectively.

  • In terms of experience, the community has shown more enthusiasm for React, followed by Vue and finally Angular.

  • Every technology has pros and cons. Depending on the goals, you would need to determine what advantages you need and what trade-offs you can leave behind.

  • Vue and React can be integrated into other applications seamlessly. However, Angular has a more complex architecture and cannot be used outside of that scope.


I have used all three, React, Angular and Vue, and have had a great experience with all of them. There is no one right or wrong solution. When choosing a framework or library, you should consider your needs and then know what every option has to offer. I hope you can have more tools to make the best decision for yourself and/or your company with this information.

 

Happy Coding!


Arturo E.

Amateur Musician, Combat Sports Enthusiast, Philosophy and history lover and a software engineer specialized in Javascript technologies.

Articles