Contestants
The war among frameworks is a hot topic in the JavaScript community, and it is one of many holy wars in the profession. Since the beginning, with jQuery, followed by AngularJS to modern frameworks, the war has been fierce.
Many has fallen in the path, like Backbone or Sencha, leaving corpses: tons of legacy code that has to maintained. Others survive, like jQuery, that surprisingly still have a large community. Others, like Angular, does not seem to lift off as expected or promised.
jQuery
It is possibly the oldest contestant alive. It was very popular because it fixed the interoperability between browsers, but applications were difficult to scale. Nowadays, jQuery is not one of the mainstream, and it is not the best choice for most of the projects.
AngularJS
It is already in LTS mode, and it has been retired in favour of its big brother. There is no doubt that it was a great leap forward in the framework ecosystem, and some of us still miss it. But, because it is not longer actively maintained, it is not longer a contestant.
Angular
It arrived to the world to compete with React. AngularJS was getting old, it had problems of performance, problems of robustness, and as React got better, many programmers looked to React with envious eyes. Angular modernized AngularJS to take advantage of the last improvements of ECMAScript 6, and tried to fulfil the promises to compete effectively with React.
The most highlighted difficulty of Angular is its heavy learning curve. It requires a lot of concepts, not everything is straightforward, and it has lots of dead ends. Learning Angular well is hard: it has inherited the learning curve from AngularJS, but with new difficulties, like RxJS or the hierarchical dependency injection.
Original picture of Ben Nadel.
Other of the concerns of Angular is that it broke a lot of promises. For example, everyone expected since the V2 having a simple way to create server side rendered pages, but nowadays, 24th of February 2022, the Angular.io website itself is not able to work without JavaScript. But the biggest problem of Angular is fragmentation and version upgrade. It is very hard to upgrade the version; it is so difficult that users do not risk upgrading its applications. It can be seen in the npm website.
There are lots of users of old versions. VueJS Vue was the answer for many developers that need something more performant than AngularJS, but more stable and easy to use than Angular. Vue in its template system is very close to the original Angular, keeping the simplicity of AngularJS, but at the same time, it gained some power from React.
But VueJS had a serious issue in versions 1 and 2: it did not deal well with arrays, and the authors blamed JavaScript for their poor choosing of update algorithm. If you do not use a library like Vuex, or Redux, may have ending with serious problems. You can see here an app that works in AngularJS, but not in VueJS.
Excerpt from the Vue docs blaming JavaScript for the limitations of their change detection algorithm.
In theory, this issue is solved in version 3. But blaming others for one’s own mistakes did not sit well with the community.
SvelteJS
It is a growing contestant in the war, and it is giving big promises. It claims that its main strength is the translation of the components to an imperative language, which, according to them, it is better than the declarative taken by React.
There is no doubt that it is more simple to use, but the translation to imperative, and the resulting component, is not as easy to predict as it seems. SvelteJS is not able to detect correctly changes in some cases. When this happens, the state can be corrupted and views are not updated correctly. This issue raises so many concerns that it is difficult to justify any project in SvelteJS, like in the old days with VueJS.
StencilJS
Well, technically it is not a framework, although it is. StencilJS allows writing a component, and translate it to other frameworks. Nowadays, it translates components to Angular, React, Vue and WebComponents components.
But, there is something curious with this class. It is really similar to another thing, right? Mitosis Probably you did not have heard about it, but it is the one who made me create this post. Mitosis is the latest framework created by Misko Hevery, the creator of Angular. That is right, Misko has created another framework after Angular.
Mitosis has the same purpose as StencilJS, it translates its components to numerous frameworks. And by the way, does the code resemble to any other framework?
React
It is one of the oldest modern frameworks, with more than 10 years in the npm repository. Although it has changed a lot, it still has compatibility with most of the previous versions. And all the changes have been to the better. Some say that React with hooks has created an even better framework.
But the best quality of React is not that it has hooks, or any visible functionality, rather the opposite. React has pushed to the latest standards of JavaScript, and it has pushed for JSX. React it is not longer a framework, maybe it never was, it is just a library. It has pushed so hard for standards, that it eventually has removed itself from the user code. And the winner is…
JSX. Ok, React, but not React itself, but the philosophy behind. React is itself a library, but that can be replaced by many others, like Preact or React Native. But if you look carefully, StencilJS or Mitosis are very similar to React, and it is not a coincidence, it is because:
«The best framework is the one that removes itself from the user code.»React
leverages heavily on JavaScript and JSX —JavaScript with XML embedded—, and the user code is so agnostic to React, that with few tweaks, the exact same code can work in other frameworks.
So, with no doubt, React is the winner of the framework war. Because it is not a framework inside the user code.