Skip to content

rackai/sinuous

 
 

Repository files navigation

Sinuous

Version Badge size codecov Financial Contributors on Open Collective

npm: npm i sinuous
cdn: https://unpkg.com/sinuous
module: https://unpkg.com/sinuous?module


  • Small. hello world at ~1.4kB gzip. ¹
  • Fast. top ranked of 80+ UI libs.
  • Truly reactive. automatically derived from the app state.
  • DevEx. no compile step needed, choose your view syntax.

Add-ons

Size Name Description
Badge size sinuous/observable Tiny observable (included by default)
Badge size sinuous/map Fast list renderer
Badge size sinuous/hydrate Hydrate static HTML
Badge size sinuous/template Pre-rendered Template
Badge size sinuous/data Enrich plain HTML with data in JS

All-in-one

Size Name Description
Badge size sinuous/all All modules ² in one bundle for easy use with a <script> tag

cdn: https://unpkg.com/sinuous/dist/all
module: https://unpkg.com/sinuous/module/all

Community

Examples


See complete docs, or in a nutshell...

View syntax

A goal Sinuous strives for is to have good interoperability. Sinuous creates DOM elements via hyperscript h calls. This allows the developer more freedom in the choice of the view syntax.

Hyperscript directly call h(type: string, props: object, ...children).

Tagged templates transform the HTML to h calls at runtime w/ the html`` tag or,
at build time with sinuous/babel-plugin-htm.

JSX needs to be transformed at build time first with babel-plugin-transform-jsx-to-htm and after with sinuous/babel-plugin-htm.

Handlebars/Mustache is possible with Hyperstache. See issue #49.


Counter Example (1.4kB gzip) (Codesandbox)

Tagged template (recommended)

import { observable, html } from 'sinuous';

const counter = observable(0);
const view = () => html`
  <div>Counter ${counter}</div>
`;

document.body.append(view());
setInterval(() => counter(counter() + 1), 1000);

JSX

import { observable } from 'sinuous';

const counter = observable(0);
const view = () => <div>Counter {counter}</div>;

document.body.append(view());
setInterval(() => counter(counter() + 1), 1000);

Hyperscript

import { observable, h } from 'sinuous';

const counter = observable(0);
const view = () => h('div', 'Counter ', counter);

document.body.append(view());
setInterval(() => counter(counter() + 1), 1000);

Reactivity

The Sinuous observable module provides a mechanism to store and update the application state in a reactive way. If you're familiar with S.js or Mobx some functions will look very familiar, in under 1kB Sinuous observable is not as extensive but offers a distilled version of the same functionality. It works under this philosophy:

Anything that can be derived from the application state, should be derived. Automatically.

import { observable, computed, subscribe } from 'sinuous/observable';

const length = observable(0);
const squared = computed(() => Math.pow(length(), 2));

subscribe(() => console.log(squared()));
length(4); // => logs 16

Use a custom reactive library

Sinuous can work with different observable libraries; S.js, MobX, hyperactiv. See the wiki for more info.

Hydration

Sinuous hydrate is a small add-on that provides fast hydration of static HTML. It's used for adding event listeners, adding dynamic attributes or content to existing DOM elements.

In terms of performance nothing beats statically generated HTML, both in serving and rendering on the client.

You could say using hydrate is a bit like using jQuery, you'll definitely write less JavaScript and do more. Additional benefits with Sinuous is that the syntax will be more declarative and reactivity is built-in.

import { observable } from 'sinuous';
import { hydrate, dhtml } from 'sinuous/hydrate';

const isActive = observable('');

hydrate(
  dhtml`<a class="navbar-burger burger${isActive}"
    onclick=${() => isActive(isActive() ? '' : ' is-active')} />`
);

hydrate(dhtml`<a class="navbar-menu${isActive}" />`);

Motivation

The motivation for Sinuous was to create a very lightweight UI library to use in our video player at Vimeo. The view layer in the player is rendered by innerHTML and native DOM operations which is probably the best in terms of performance and bundle size. However the need for a more declarative way of doing things is starting to creep up. Even if it's just for ergonomics.

The basic requirements are a small library size, small application size growth, fast TTI, not crucial but good render performance (creating & updating of DOM nodes).

More importantly, the developer experience. Working close to the metal with as few specialized syntaxes as possible is a key goal for Sinuous. The html`` tag returns a native Node instance and the components are nothing more than simple function calls in the view.

Another essential aspect is modularity, Sinuous is structured in a way that you only pay for what you use.

Concept

Sinuous started as a little experiment to get similar behavior as Surplus but with template literals instead of JSX. HTM compiles to an h tag. Adapted code from Ryan Solid's dom expressions + a Reactive library provides the reactivity.

Sinuous returns a hyperscript function which is armed to handle the callback functions from the reactive library and updates the DOM accordingly.

Browser Support

Sinuous supports modern browsers and IE11+ (requires Array.from polyfill).

Sauce Test Status

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs

Footnotes

¹ Smaller

Sinuous TodoMVC 2.9kB < Svelte TodoMVC 3.5kB

² All modules

Includes sinuous, sinuous/observable, sinuous/map/mini and sinuous/hydrate.

About

🧬 Small, fast, reactive UI library

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 91.4%
  • HTML 4.8%
  • CSS 3.8%