В JS популярны три фреймворка пользовательского интерфейса -  Angular, Vue и React. Все они служат отличной цели - созданию пользовательских интерфейсов  (UI) - но все они делают это по-разному и, таким образом, ориентированы на разных пользователей и варианты использования. При этом все они довольно стабильны и хорошо известны в сообществе веб-разработчиков.

Тем не менее, в этой статье мы рассмотрим некоторые более новые, но менее известные фреймворки JavaScript, которые либо набирают обороты, либо представляют некоторые интересные новые концепции.

Aurelia

Aurelia  - это популярная полнофункциональная платформа JS. Как и Angular, он имеет отличную поддержку TypeScript и включает множество различных функций, таких как маршрутизация или i18n. Aurelia уделяет большое внимание производительности, независимо от размера проекта.

Простая система шаблонов на основе HTML и API  обеспечивают плавную кривую обучения для любого, кто имеет опыт работы с современным JS. Вы можете моделировать даже целые приложения, используя только чистые объекты или классы JS.

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 = "";
    }
  }
}

Такая модель, по-видимому, связывается с шаблоном, что делает Aurelia идеальным выбором для  Model-View-View-Model  (MVVM), а также для многих других реализаций шаблонов благодаря своей гибкости.

<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>

Помимо простоты использования, вероятно, одним из наиболее значительных преимуществ Aurelia является его  расширяемость  и  экосистема. 

HyperHTML

HyperHTML предоставляет возможность использовать теги шаблонов ES6. Таким образом, вы можете использовать его во всех современных браузерах, без предварительной настройки или предварительной обработки.

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")));

Благодаря своему внутреннему дизайну, hyperHTML очень легкий и быстрый. Фактически, благодаря весу 4,5 КБ и отсутствию виртуальной DOM, он минимизирует использование ОЗУ и ЦП и обеспечивает производительность, не имеющую аналогов в большинстве многофункциональных сред.

Библиотека также отлично совместима со всеми сторонними инструментами. Кроме того, из-за отсутствия виртуального DOM и использования чистого JavaScript, hyperHTML на 100% совместим с веб-компонентами.

Cycle.js

Функциональное программирование хорошо известно своими преимуществами в удобочитаемости и ясности кода. Однако использование его для создания пользовательских интерфейсов может показаться немного необычным. В любом случае, Cycle.js принимает эту концепцию как единственную в своем роде  функциональную среду JS.

Вместо того, чтобы полагаться на императивные вызовы (например, setState), Cycle.js позволяет вашим потокам данных естественным образом влиять и получать доступ к данным «внешнего мира» (DOM, HTTP и т.д.) только на входе и выходе (I/О). Все управляется с помощью набора функций в виде чистого, видимого и легко анализируемого потока данных. Операции ввода/вывода обрабатываются  драйверами, которые формируют основу расширяемости платформы.

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 очень хорошо вписывается в FP-экосистему JavaScript. Он хорошо интегрируется с  RxJS, а также с другими реактивными и потоковыми библиотеками. 

Svelte

Из всех перечисленных фреймворков Svelte в последнее время приобрел популярность, на GitHub > 25K . Svelte, рекламируемый как инструмент для «кибернетически улучшенных веб-приложений», представляет собой совершенно иной подход, чем все основные платформы. Вместо того чтобы использовать тяжелый клиентский код или виртуальную реализацию DOM, он переносит тяжелую работу на дополнительный этап компиляции. Таким образом, на стороне клиента требуется гораздо меньше кода, что повышает производительность и время доставки.

<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 также поставляется с собственным языком шаблонов, основанным на HTML, а также со встроенным механизмом перехода. В целом, фреймворк дает вам современный вид, отличную производительность и отлаженную документацию.

Stencil

Stencil  - это набор инструментов, который использует веб-компоненты для ускорения процесса создания собственных  систем проектирования . По сути, он предоставляет современный, простой в использовании способ создания веб-компонентов (пользовательских элементов).

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>;
  }
}

С помощью Stencil вы можете использовать такие функции, как  декораторы, JSX и TypeScript, чтобы затем генерировать свой собственный веб-компонент. Такой пользовательский элемент может быть позже использован с или без практически любой инфраструктуры пользовательского интерфейса. Благодаря всему этому, Stencil - идеальный выбор для создания собственной системы дизайна. Не только все компоненты могут быть написаны современным, более управляемым способом, но они также являются кросс-совместимыми.

Источник перевода