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.
Let’s now have a look at the criteria listed above on the four selected frameworks.
The learning curve
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.
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.
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).
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.
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.
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
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;
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.