Intive-FDV Blog

2019 Top Three Frontend Frameworks: Here Are the Nominees

From the most used and scalable tools to less popular ones, we have reviewed front-end tools and chosen the top three: React, Angular and… Wait for it!

First, Meet React

  • React isn’t a framework.
  • It is!
  • No, it isn’t!

React’s accelerated growth and its powerful development ecosystem continue to spark debate among professionals. But is React indeed a framework? No, it’s a library created by Facebook in 2013 for managing UI.

One of its greatest advantages is that it allows to create components that can be reused in other parts of the application, by which there’s no need to duplicate the code. Also, it has an easy learning curve. A programmer with basic knowledge of HTML and Javascript will be able to easily start creating components. In addition, it has a command-line interface (CLI) feature, or “Create-React-App”, which starts a development environment in the console with just a few lines of command, to avoid spending a lot of time struggling with configurations. On the other hand, and based on the architecture pattern MVC, React aims to manage views.

  • Fine, but then who’s in charge of the application’s logic, of managing the data?
  • That’s where Redux comes on the scene.

React-Redux is the best-known most used library for this, since it saves the entire state of the application in one object. In that way, it’s possible to forward data between components even when they have the same hierarchy, something that wasn’t possible simply with React. Nevertheless, there are other libraries compatible with React, such as React-Router for managing the application routes or Axios for managing endpoints.

React’s Github repository is huge: there are 127,000 stars, 1299 contributors and 153 pull requests, in addition to 482 open issues.

Now, Meet Angular

This all-in-one framework was developed by Google and launched in September 2016. It has built-in routing and HTTP requests handling features, thanks to which there’s no need to use third-party libraries. However, Angular’s latest releases include Typescript, which hinders the learning curve for developers who aren’t familiar with this language.

Like React, Angular uses components for UI, which defines screen views by associating an HTML template to the application’s logic and data. Such components can use services to obtain data from an API we want to connect to our application.

As an all-in-one framework, for most cases Angular doesn’t require other libraries for creating an application. Nevertheless, there’s a long list of UI libraries that can be used just the same, among which we find Material, NGX Bootstrap and Prime NG. Angular also features a solid CLI, which makes it easy to create projects with the framework already configured, develop components with a line of commands, and execute tests, just to name a few options.

It’s important to differentiate between Angular 2 or later (the last version up to know is number 7) and AngularJS (versions 1-1.7.x), which is currently in LTS and is completely different from the newer versions.

In Github, Angular has 2,366 open issues (many of them are old, apparently due to lack of cleanup), more than 47,000 stars, 376 pull requests, and over 911 contributors.

The Award for Revelation Goes to…

In February 2014 Evan You, former employee at Google, released Vue.JS, his own version of a framework based on Angular 1. This powerful tool is gaining increasing acceptance in the front-end world.

Vue.JS claims to be a progressive framework: as the application grows and becomes more complex, we can use new libraries to adapt it to our needs. Vue.JS includes Vue-Router for managing the application’s routes and Vuex for cases when it’s necessary to centrally manage the state of the application, similar to the role of Redux in React. Like React and Angular, Vue.JS also uses a hierarchy of components for UI display.

In Vue’s official page at Github, there’s a list called awesome-vue including many libraries and components created by the community, highly useful when you need to look for utilities for a functionality you want to develop. Another advantage of this framework is that you can use the language you want to develop in: HTML, JSX, CSS, SASS, LESS, Typescript and Javascript, although it’s better to agree on one as a team, in order to avoid inconsistencies.

Considering all three Github repositories (Vue, Vue-router and Vuex), Vue.JS has more than 170,000 stars, over 150 pull requests and 320 open issues, with an average of 200 contributors each.

And the Winner Is…?

Of these tools, probably the hardest to learn at the beginning is Angular because it includes Typescript, especially if you’re only familiar with Java. However, it’s very useful for creating highly scalable applications. React and Vue.JS are the easiest to learn; complexity increases when you add libraries like React-Redux and Vuex.

Choosing a framework depends on the software to develop and on the knowledge and preferences of the developers and the work team, especially on their strengths and weak points in dealing with certain technologies.

Matías Mastronardi

Matías Mastronardi is a Frontend developer in intive-FDV since December 2018. He is a student of the Technique in Software Development at the Universidad de la Punta in San Luis, Matías conducted several courses aimed at deepening his knowledge in React, Redux and Ionic 3. Entre his main hobbies are tennis, cycling and, of course, playing video games.

Matías Reines

Matías Reines is a Frontend developer at intive-FDV since April 2018. Computer Engineering student at the Universidad Argentina de la Empresa (UADE), Matías specializes in the development with AngularJS, React and Backbone. Playing video games and watching series are his main hobbies.

Add comment