JavaScript Frameworks
Image Source Unsplash

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 have 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 favor 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 fulfill the promises to compete effectively with React.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'World'; }

The most highlighted difficulty of Angular is its heavy learning curve. It requires a lot of concepts, not everything is straightforwards, 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.

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.

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.

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { msg: "Hello World!" };
  }
}
</script>

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.

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.

<script>
  let world = "World";
</script>

<div>
  Hello {world}!
</div>

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.

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'app'
})
export class MyComponent {
  @Prop() world: string;
  
  render() {
    return (
      <p>
        Hello {this.world}
      </p>
    );
  }
}

But, there is something curious with this class. It is really similar to another thing, right?

Mitosis

You have probably not 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.

import { useState } from "@builder.io/mitosis";

export default function MyComponent(props) {
  const state = useState({
    world: "World",
  });
  
  return <div>Hello {state.world}!</div>;
}

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.

import { useState } from "react";

export default function HelloWorld() {
  const [world] = useState("World");
  
  return <div>Hello {world}!</div>;
}

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 is no 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 award goes to…

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

 Opening for change, is the Smarter Decision

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.

Thanks for reading

We now offer freelance services. To get your task done tap the services link above and to join as a freelancer on our site tap on the List a service link above. Thanks for reading.

Comments

Leave a Reply

Sign In

Register

Reset Password

Please enter your username or email address, you will receive a link to create a new password via email.