Top New JavaScript UI Frameworks & Libraries for 2020

With over 1 million NPM packages (a repository of packages used across JavaScript ecosystems)  and countless open-source projects, it's safe to say that JavaScript is one of, if not the most popular language among programmers. Javascript is especially impressive when looking at its vast ecosystem full of libraries and tools of all sorts from which JavaScript frameworks stand out the most.

Let's start by explaining what the term "framework" really means, as it can be confused with usual libraries. A JavaScript framework, while still similar to a simple library at its core, favors the inversion of control. Instead of using its functionality the way you'd like, you must follow the set of rules laid down by the framework's authors and write your code accordingly. JavaScript frameworks are also the J in JAMstack, which is a website tech stack growing in popularity.

In JS, there are three UI frameworks that are the most popular - Angular, Vue, and React (sometimes called a library). All of them serve the same purpose - creating User Interfaces (UIs) - but all of them do it differently, and thus are directed towards different users and use-cases. With that said, they're all pretty stable and well-known in the web development community.

However, in this article, we'll go over some newer, lesser-known JavaScript UI frameworks and libraries that are either currently getting traction or present some exciting new concepts. As for the "why do we need another framework?" kind of question - maybe you'll find a tool on this list that will catch your attention. If not, because all of them are still pretty different from one another, and from what you're currently used to, at least you'll learn something new.

Aurelia

You might not have heard of it, but Aurelia is a popular, full-blown JS framework. Similarly to Angular, it has excellent TypeScript support and many different functionalities, like routing or i18n, included.

Aurelia focuses heavily on performance. While it isn't the fastest on this list, given its vast set of features, it holds up pretty well. It maintains its performance level well, no matter the size of the project.

The framework is also very straightforward and pleasant to use. Simple, HTML-based templating system and API make for a smooth learning curve for anybody experienced with modern JS. After the initial setup, Aurelia tries to stay away from your code. In this way, you call its API only when necessary. You can model even entire applications with nothing more than pure JS objects or classes.

export class App {
  constructor() {
    this.heading = "Todos";
    this.todos = [];
    this.todoDescription = "";
  }

  addTodo() {
    if (this.todoDescription) {
      this.todos.push({
        description: this.todoDescription,
        done: false
      });
      this.todoDescription = "";
    }
  }
}

Such a model then seemingly ties in with the template, making Aurelia a perfect choice for Model-View-View-Model (MVVM), as well as many other pattern implementation, because of its flexibility.

<template>
  <h1>${heading}</h1>

  <form submit.trigger="addTodo()">
    <input type="text" value.bind="todoDescription" />
    <button type="submit" disabled.bind="!todoDescription">Add Todo</button>
  </form>
</template>

Ease-of-use aside, probably one of Aurelia's most significant advantages is its extensibility and ecosystem. While it doesn't have as many third-party tools, its architecture makes using and creating new plugins a delightful experience. But, if you get lost on the way, detailed documentation and the open community are there to help you.

So, with Aurelia 2 on the horizon, this framework is definitely worth a look.

HyperHTML

Dedicated template syntaxes, JSX, and all that stuff might improve your working experience, but what if you want something minimalistic - something that is pure JS? HyperHTML gives you such an option, by utilizing ES6 tagged template literals. This way, you can use it in all modern browsers, without any prior setup or preprocessing required.

import hyper from "hyperhtml";

function tick(render) {
  render`
    <div>
      <h1>Hello, world!</h1>
      <h2>It is ${new Date().toLocaleTimeString()}.</h2>
    </div>
  `;
}

setInterval(tick, 1000, hyperHTML.bind(document.getElementById("root")));

Because of its internal design, hyperHTML is very lightweight and fast. In fact, with its 4.5KB footprint and lack of any Virtual DOM, it minimizes the RAM and CPU usage and provides you with performance unmatched by most feature-rich frameworks.

The library is also highly compatible with all the third-party tools. Furthermore, because of the lack of virtual DOM and the use of pure JavaScript, hyperHTML is 100% compatible with Web Components.

If you're looking for a lightweight, future-proof tool that doesn't get in your way, hyperHTML is the right choice.

Cycle.js

Functional Programming (FP) is well-known for its advantages in code readability and clarity. However, using it to create UIs might seem a bit unusual. Either way, Cycle.js takes on that concept as one of a kind functional JS framework.

Instead of relying upon imperative calls (like setState), Cycle.js lets your data flow in a natural way, affecting and accessing the data of the "external world" (DOM, HTTP, etc.) only on the input and output (I/O). Everything is managed through a set of functions as a pure, visible, and easy-to-analyze stream of data. The I/O operations are handled by drivers, which form the backbone of the framework's extendability.

import { run } from "@cycle/run";
import { div, label, input, hr, h1, makeDOMDriver } from "@cycle/dom";

function main(sources) {
  const input$ = sources.DOM.select(".field").events("input");

  const name$ = input$.map(ev => ev.target.value).startWith("");

  const vdom$ = name$.map(name =>
    div([
      label("Name:"),
      input(".field", { attrs: { type: "text" } }),
      hr(),
      h1("Hello " + name)
    ])
  );

  return { DOM: vdom$ };
}

run(main, { DOM: makeDOMDriver("#app-container") });

Cycle.js suits very nicely within the JavaScript's FP ecosystem. It integrates well with RxJS, as well as other reactive and stream-related libraries. Yet you've also got other nice additions, such as TypeScript, SSR, and JSX support, together with a vast amount of different drivers for inputs and outputs like virtual DOM and React Native.

Svelte

From all the listed frameworks, Svelte has recently exploded in popularity, growing to what now is a >25K GitHub stars project. Advertised as a tool for "cybernetically-enhanced web apps", Svelte presents a very different approach than all the mainstream frameworks. Rather than using heavy client-side code or virtual DOM implementation, it moves the heavy lifting to the additional compilation step. This way, much less code is required client-side, thus improving the performance and delivery time.

<script>
  import Nested from "./Nested.svelte";
</script>

<style>
  p {
    color: purple;
    font-family: "Comic Sans MS", cursive;
    font-size: 2em;
  }
</style>

<p>These styles...</p>
<Nested />

Svelte also comes with its own templating language based on HTML, as well as a nice transition engine built-in. Overall, the framework gives you a modern feel, excellent performance, and fine-tuned documentation. If you're interested, it's really worth checking out.

Stencil

Web components - a native web technology allowing you to create and use encapsulated components - is picking up. Certainly, it's the "next big thing" and will be increasingly more popular as the cross-browser support improves.

Stencil is a toolchain that utilizes web components to accelerate the process of creating your own design systems. What it basically does is providing a modern, easy-to-use way for creating web components (custom elements).

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

@Component({
  tag: "my-first-component"
})
export class MyComponent {
  @Prop() name: string;

  render() {
    return <p>My name is {this.name}</p>;
  }
}

With Stencil, you can use features like decorators, JSX, and TypeScript, to then generate your native web component. Such a custom element can be later used with or without pretty much any UI framework. Because of all of this, Stencil is a perfect choice for creating your own design system. Not only all the components can be written in a modern, more manageable way, but they're also cross-compatible. If you want to be a part of the web component revolution, this is the way to go.

Future is now

As you can see, a lot is going on outside the world of React, Vue, and Angular. New tools, such as Aurelia, HyperHTML, Cycle.js, Svelte and Stencil - all have unique, modern features and are undoubtedly worth exploring. Removing the unnecessary code from the client, minimalism, and web components are three of the most popular web development trends that can be found among them. But, only time will tell how they'll do in 2020.

For extra fun, try one of these frameworks on your next serverless application. Or add a Headless CMS using Butter with the tech stack that you already know.  Check out these SDKs and Starter Projects that will get you up and running in minutes.