Top new JavaScript UI frameworks & libraries for 2020
Published: 2020-02-11 04:50:54

With over 1 million[ NPM](https://www.npmjs.com/) 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.

In JS, there are three [UI frameworks](https://buttercms.com/blog/front-end-developer-best-practices-to-design-react-ui-framework) that are the most popular - [Angular](https://buttercms.com/angular-cms/), [Vue](https://buttercms.com/vuejs-cms/), and [React](https://buttercms.com/react-cms/) (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](https://aurelia.io/)

![undefined](https://cdn.buttercms.com/RyXHLNaqQ5CoNaayuThg)

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](https://krausest.github.io/js-framework-benchmark/current.html) 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](https://github.com/aurelia/aurelia) on the horizon, this framework is definitely worth a look.


# [HyperHTML](https://viperhtml.js.org/)

![undefined](https://cdn.buttercms.com/DWSF1wWESKGIsx6QFJDB)

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](https://custom-elements-everywhere.com/libraries/hyperhtml/results/results.html) with [Web Components](https://buttercms.com/blog/using-web-components-with-buttercms).

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

# [Cycle.js](https://cycle.js.org/)

![undefined](https://cdn.buttercms.com/60caLx8NRjKDuYo8xOZK)

*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](https://rxjs-dev.firebaseapp.com/), 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](https://buttercms.com/blog/powering-react-native-applications).

# [Svelte](https://svelte.dev/)

![undefined](https://cdn.buttercms.com/iESRDvRRjaEM1fvB5UVn)

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](https://stenciljs.com/)

![undefined](https://cdn.buttercms.com/Q5vLpox0QwOyl8k4abui)

[Web components](https://www.webcomponents.org/) - 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.