hybrids is a JavaScript UI framework for creating fully-featured web applications, components libraries, or single web components with unique mixed declarative and functional architecture.

The main goal of the library is to provide a complete set of tools for building UI components, managing complex data sources, creating app flows with the client-side structural routing, and localizing it for the worldwide markets. Everything without external dependencies.

All of the parts of the library follow the same unique concepts making it easy to understand and use.

Quick Look

The Simplest Component Structure

The component model is based on plain objects and pure functions*, still using the Web Components API under the hood:

import { html, define } from "hybrids";
  
function increaseCount(host) {
  host.count += 1;
}

export default define({
  tag: "simple-counter",
  count: 0,
  render: ({ count }) => html`
    <button onclick="${increaseCount}">
      Count: ${count}
    </button>
  `,
});

<simple-counter count="42"></simple-counter>

* Pure functions only apply to the component definition. Side effects attached to event listeners might mutate the host element.

You can read more in the Component Model section of the documentation.

Seamless Localization

The library has built-in support for automatic translation of the component's content. Additionally, the library provides a simple way to add dynamic messages with plural forms, HTML content, and finally handy CLI tool to extract messages from the source code.

import { define, html, localize } from "hybrids";

export default define({
  tag: "my-element",
  name: "",
  render: ({ name }) => html`
    <div>Hello ${name}!</div>
  `,
});

localize("pl", {
  "Hello ${0}!": {
    message: "Witaj #{0}!",
  },
});

To translate the component content, you just need to provide the correct message, but the component structure is not changed.

You can read more in the Localization section of the documentation.

Complex State Management

The store module provides a global state management based on declarative model definitions with built-in support for async external storages, relations, offline caching, and many more. It follows the declarative architecture to simplify the process of defining and using data structures:

import { define, store, html } from "hybrids";

const User = {
  id: true,
  firstName: "",
  lastName: "",
  [store.connect] : {
    get: id => fetch(`/users/${id}`).then(res => res.json()),
  },
};

define({
  tag: "my-user-details",
  user: store(User),
  render: ({ user }) => html`
    <div>
      ${store.pending(user) && `Loading...`}
      ${store.error(user) && `Something went wrong...`}

      ${store.ready(user) && html`
        <p>${user.firstName} ${user.lastName}</p>
      `}
    </div>
  `,
});

<my-user-details user="2"></my-user-details>

You can read more in the Store section of the documentation.

Structural Client-Side Routing

The router module provides a global navigation system for client-side applications. Rather than just matching URLs with the corresponding components, it depends on a tree-like structure of views, which have their own routing configuration in the component definition. It makes the URLs optional, have out-the-box support for dialogs, protected views, and many more.

import { define, html, router } from "hybrids";

import Home from "./views/Home.js";

export define({
  tag: "my-app",
  views: router(Home),
  content: ({ views }) => html`
    <my-app-layout>
      ${views}
    </my-app-layout>
  `,
});

<my-app></my-app>

You can read more in the Router section of the documentation.

Documentation

The project documentation is available at the hybrids.js.org site.

Community

• Follow on Twitter
• Chat on Gitter

License

hybrids is released under the MIT License.