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

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

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

Установка

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

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

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

В итоге