Pending the finalization of the specifications of Web components and their generalization to create reusable graphical interface components, a generalization that (if it actually occurs one day) will objectively take a few more years, JavaScript frameworks remain almost unavoidable in a business application, at least to give a frame, a structure to the developments. Except, maybe, if you have the chance to count in your ranks essentially JavaScript experts with the bottle, a situation which remains rather exceptional. In this article, we will give you a little guide to help you in your choices.

We’re talking about sustainability at five or ten years when considering a JavaScript framework is a challenge. The popularity of Backbone.js, in the face of the impossibility of the actors of the community to organize themselves seriously, declined after the departure of its principal craftsman. Angular, despite the possibility of upgrading versions, remains a complete rewrite of AngularJS bringing its share of many novelties that are not unanimous, the latest version of the framework is often considered “over-engineered” too sophisticated.

The choice of a JavaScript framework is, therefore, a delicate subject on which it is difficult to commit. We will limit ourselves voluntarily here to give you some advice to frame your reflection.

The choice

To select the framework on which to base the development of the flagship applications of your business, prefer to consider the following intrinsic and contextual factors:

  • the learning curve,
  • the efficiency, ability to develop quickly and simply,
  • the ease with which one can maintain one’s developments,
  • the  extensibility and the richness of its ecosystem,
  • the ability to integrate with other front technologies to enable a smooth transition,
  • the ability to integrate into an existing potentially eclectic technical environment,
  • the popularity and the liveliness of its community,
  • the quality of its documentation,
  • the performance.

The frameworks to study

Focus your thoughts on frameworks that have proven themselves and/or are on a real positive dynamic: on the one hand, the Angular and React.js behemoths pushed respectively by Google and Facebook and on the other the “alternative” solutions that are Ember.js and Vue.js

They can also be grouped according to two different philosophies:

  • Vue and React are often considered as libraries offering a hard core of functionalities related to the presentation layer, a kernel to which additional modules (for routing, management of the state of the components, etc.) can be added if necessary. you can choose and change at will relatively easily; they are therefore considered lighter (only what is strictly useful for the proper functioning of your application is required) and more flexible with the counterpart that you will have to make the effort to identify the modules in question when a need will arise (this also contributes to the quick start of Vue, see below). That said, Vue and React direct you to the most popular and reliable implementations of the most structuring libraries.
  • Angular and Ember are instead considered as all-in-one frameworks, which therefore potentially provide much more than you need in the immediate future or even in the future, but give you the assurance of compatibility. between all components.

Framework Analysis

Let’s now have a look at the criteria listed above on the four selected frameworks.

The learning curve

The Vue.js learning curve is clearly easier to follow than other proposed frameworks; Vue tends to use just JavaScript by adding a few ideas, while React, Angular or Ember impose adapting pruned practices of JavaScript programming to a new way of doing particular to the framework.

 

Maintenance

Regarding the ease with which one can maintain the developments:

  • Ember imposes a convention-over-configuration approach with a strong structuring of the developed code and a division into several files with a clearly defined role (a component, a router, a controller, etc.) as well as naming conventions: all the projects Ember-based, with the same organization and conventions, any developer familiar with Ember will be able to adapt quickly to any project. Vue.js, through the use of Webpack, encourages to structure a project and allows to manage a single file by component, regrouping its graphic representation, its logic, and its style; but no element constructing the application is subject to a mandatory framework. It’s the same for Angular (despite the notion of modules for example) and React that do not impose a particular rule. The simplicity of View syntax nevertheless gives it a head start on its ability to be easily maintainable.
  • Although Angular’s process has been slow to stabilize on this topic, the versioning of all these frameworks is now based on the Semantic Versioning (SemVer) specification, which gives a clearer visibility on the impacts of a new version of a framework; corrective maintenance and security of an N-1 version are also provided over several months after the official release of the N version.
  • In general, the advantage of “all-in-one” solutions is that the integration of all the components will be done in a natural and homogeneous way, without having to manage the compatibility of their different versions, which is not necessarily necessary. the case of “libraries” for which the additional components can only work for specific versions of the main library.
  • Also note that whatever the solution used, even if it imposes an important framework, a regular code review is a necessary step to guarantee the quality of the finished product.

The ecosystem

About the extensibility and richness of the ecosystem:

  • All these solutions offer plugins for web browsers to facilitate developments.
  • The technical libraries are in abundance for React as for Vue, which may seem off-putting at first; However, we must relativize and understand that once added the two or three essential libraries (well documented, well maintained and easily integrated), you will generally cover 90% of your application needs. The remaining 10% being covered by additional libraries that you will also essentially add to your “all in one” frameworks (like Lodash to manipulate your data structures).
  • The “ready-made” unit components are multiplying, but except for a very punctual need, prefer the component libraries if you want to have already functional and uniform components. Angular (with Bootstrap in particular) has mature libraries. React.js and Ember.js seem a little more limited at this level, but we can take a look at Material UI (for React) or Semantic UI (for both). The libraries of Vue.js suffered a time of a certain lack of stability (the framework in its version 2 having only a little more than a year and a half) but some are very promising and already rich and well documented, like Vuetify (the port of Bootstrap in Vue.js has taken its time, but also begins to propose interesting things).
  • If you want to create mobile applications, React Native gives you the ability to create mobile components based on the same syntax as React, a component that can be used in the browser that can also be used in a mobile application; its counterpart Vue.js, Weex, is not yet available in a stable version but is actively supported by Alibaba.

Integration capabilities

On the possibility of integrating with other front technologies to allow a smooth transition:

  • Angular is clearly reserved for the construction of (large) SPA applications and even if it is theoretically possible to integrate it with web applications using another framework, it is to be avoided; it is the same for Ember.
  • Conversely, Vue.js and React.js offer this possibility to easily integrate with any web application since it is enough to import the library (very light) corresponding.
  • Regarding the ability of frameworks to support web components, and more specifically the Custom Elements specification considered as one of the most important since it allows to define new types of HTML elements, it turns out that not all of them offer today the same level of compatibility: Angular, Vue.js, and Ember.js (through Glimmer.js) fully respect the defined norm but this is not the case for React.js.

At the level of the framework integration capabilities in a potentially eclectic existing technical environment, Ember.js is the most interesting solution because of its extension Ember Data, a store centralizing the application models (in the manner of Flux / Redux / Vuex) and based on the implementation of the Adapt pattern. It allows any Ember application to be easily interfaced with any backend (ref, ref), not just with the classic REST web services (which can be easily invoked regardless of the solution).

Popularity

In production :

  • React.js is used by Facebook, Airbnb, Netflix, Paypal or Twitter.
  • Ember.js by LinkedIn, Groupon, Yahoo, Kickstarter, Trainline (ex-Captain Train).
  • Vue.js is used by Alibaba, Nintendo, Gitlab, Expedia.
  • Angular by Google, Ryanair, Bose or Rockstar Games.

Note that we are seeing more and more AngularJS / Angular replacements by Vue.js or by React.js.

Unlike Angular and React.js, Ember.js and Vue.js are not officially supported by large entities. But as these frameworks are used by major companies, it is easy to imagine that even if their main craftsmen came to take leave, the relay would be assured. This is already the case today since Ember’s first committers are employed by LinkedIn while Alibaba is actually part of the Weex developments. But it is especially the current debate around the JavaScript framework which will be integrated with WordPress which can bring Vue.js, in competition with React.js, into another dimension, especially if it does not. It’s not just integrated into the core of the blog engine but also “imposed” as an official solution for the development of additional modules.

The documentation

The quality of the documentation is undeniable for all the solutions considered; one can, however, give a slight advantage to the “framework all in one” oriented solutions since they guarantee in fact a centralized documentation and of homogeneous quality; and among the solutions of this category Angular stands out because where the documentation of Ember is limited to illustrate the different concepts on simple cases, that of its competitor brings more detailed and closer examples of the complexity of the cases actually encountered on a daily basis.

The performances

Ember’s performance is still significantly behind that of its competitors, which are held in a handkerchief although Vue.js manages to emerge slightly, thanks to the implementation of its virtual DOM, optimized compared to that of React since that of Vue allows to refresh only the components affected by a modification, not all their subcomponents as with its competitor.

The required level

Let’s be honest: whatever the framework is, all require some knowledge of JavaScript, especially synchronous/asynchronous concepts and the concept of events. However, not all of them require the same level of expertise. React.js, in essence, is the most demanding solution and is clearly aimed at an experienced population, comfortable with JavaScript (even HTML templating passes by JavaScript code). Angular and Ember.js are a little more easily accessible by an audience familiar with object-oriented languages (the use of TypeScript, possible in all the evoked solutions, also strengthens this ease of access) but still constitute a small revolution for those who are not really familiar with JavaScript. Vue.js is finally the most affordable solution regardless of the experience of developers in JavaScript thanks to its simple syntax or because it combines two approaches to implement the graphical structure of a component, or via the write rendering functions written in JavaScript (equivalent to those of React.js) or via HTML templating (compiled transparently according to JavaScript rendering).

To conclude…

Start with Vue.js, easy to access for all developer populations, JavaScript experts or not. You will avoid the heaviness of the “all-in-one frameworks”, will quickly know if the solution is adapted or not to your context, and will have the possibility of easily integrating it with other technologies if necessary. The initial investment is low, it is also the first solution to consider if you say “no matter the framework: the web components are the target and we will switch over when the time comes”.

If Vue.js turns out not to meet your needs then test Ember.js or React.js:

  • Ember.js if high performance is not a priority and/or you do not have the ability to provide sufficient code review to ensure a quality product;
  • React.js if performance is a priority and/or you want to make mobile apps and/or your development teams have a good command of JavaScript.

Finally, book Angular if you want to implement only SPA (even if the other solutions studied can also meet this type of need, particularly Vue.js and React.js) and you adhere to the philosophy of the tool.

Finally, note that regardless of the selected framework, it remains fundamental to “think component” to allow reusability, promote independence and industrialization of developments, facilitate future developments.