Sinuous — JavaScript UI библиотека с небольшим размером

Есть много библиотек и фреймворков, которые помогают преодолеть все препятствия на пути JavaScript разработчика. Если раньше мы использовали ванильный JS, то со временем пришёл jQuery, а затем React и Vue. Каждый год появляется все больше новых библиотек, фреймворков и инструментов. Некоторые из них продолжают развиваться и находят свою аудиторию, в то время как другие исчезают и постепенно забываются. В статье рассмотрим ещё одну библиотеку, которая может быть полезной для разработки небольших и простых пользовательских интерфейсов.

Что это вообще?

Sinuous — быстрая реактивная UI библиотека. Sinuous начинался как небольшой эксперимент, чтобы добиться такого же поведения, как Surplus , но с литералами шаблонов вместо JSX.

Размер Sinuous составляет всего 1.4kB. Это делает её идеальной для встраивания в HTML-страницу, компоненты или виджеты. Одна из целей — сохранить простоту Javascript. Поэтому в библиотеке очень мало специализированного синтаксиса. Если разрабатывается что-то действительно большое и сложное, несомненно стоит брать React/Vue.

Sinouse не использует VDOM в классическом смысле. Есть лишь map модуль, который делает что-то похожее. Для динамических частей Sinuous использует простой Observable , который обеспечивает обновления указанные в представлении. Иными словами, оцениваются лишь те части, которые изменяются, без необходимости сравнивать всё DOM-дерево.

Sinuous предоставляет template надстройку, которая может предварительно отображать повторяющиеся фрагменты HTML.

Вот ссылка на репозиторий Sinous на GitHub.

Установка

Sinuous доступен в NPM для использования с упаковщиком модулей или в приложении Node:

npm install sinuous

Простой компонент

Простой пример библиотеки, не требующий особых пояснений:

import { html } from 'sinuous';  const HelloMessage = ({ name }) => html`   <!-- Prints Hello World -->   <div>Hello ${name}</div>  `;  document.querySelector('.hello-example').append(   html`<${HelloMessage} name=World />`  );

Единственное, что здесь следует отметить, что html тег скомпилирован для h вызова функций библиотекой HTM . Это можно сделать либо во время выполнения, либо во время сборки.

Компонент с сохранением состояния

Помимо получения входных данных через props, также поддерживается внутреннее состояние компонента, доступ к которому происходит через observables. При изменении данных состояния компонента, отображаемая разметка будет автоматически обновляться путём повторного вызова необходимых операций с DOM.

import { o, html } from 'sinuous';  const Timer = (props) => {   const seconds = o(0);   function tick() {     seconds(seconds() + 1);   }   setInterval(tick, 1000);   return html`     <div>Seconds: ${seconds}</div>   `;  };  document.querySelector('.counter-example').append(   html`<${Timer}/>`  );

Простая тудушка

Функция o создаёт наблюдаемую переменную, которая может содержать любое значение, которое нужно сделать реактивным в представлении. Вызывая эту функцию без аргумента, она действует как метод получения значения; если передаётся аргумент, она устанавливает новое значение наблюдаемой переменной.

При первом рендеринге Sinuous обнаружит все использованные наблюдаемые переменные и выполнит соответствующие операции с DOM, сохранённые ранее. Если новому значению будет присвоена наблюдаемая переменная, она просто выполнит ранее сохранённые операции с DOM, используя новое значение.

import { o, html } from 'sinuous';  import { map } from 'sinuous/map';  const TodoApp = () => {   let items = o([]);   let text = o('');   const view = html`     <div>       <h3>TODO</h3>       <${TodoList} items=${items} />       <form onsubmit=${handleSubmit}>         <label htmlFor="new-todo">           What needs to be done?         </label>         <input           id="new-todo"           onchange=${handleChange}           value=${text}         />         <button>           Add #${() => items().length + 1}         </button>       </form>     </div>   `;   function handleSubmit(e) {     e.preventDefault();     if (!text().length) {       return;     }     const newItem = {       text: text(),       id: Date.now()     };     items(items().concat(newItem));     text('');   }   function handleChange(e) {     text(e.target.value);   }   return view;  };  const TodoList = ({ items }) => {   return html`     <ul>       ${map(items, (item) => html`<li id=${item.id}>${item.text}</li>`)}     </ul>   `;  };  document.querySelector('.todos-example').append(TodoApp());

В итоге

Sinuous простая и лёгкая библиотека, которая включает в себя работу с компонентами, состоянием, рендирингом, списками, гидратацией, шаблонами и наблюдателям. Её можно использовать для создания каких-то небольших виджетов или приложений.