Skip to content
👾 UI library for creating Web Components with simple and functional API
Branch: master
Clone or download
Latest commit 012f1c7 Mar 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs docs: fixed typo (#40) Feb 16, 2019
src fix(html): clear array items cache when value changes Mar 5, 2019
test
.babelrc chore: more explicit building tools configuration Dec 7, 2018
.eslintrc feat: process.env fallback object for browsers usage Jan 1, 2019
.gitbook.yml docs: rewrite of the documentation Nov 19, 2018
.gitignore func(core): rewrite for simple and functional API May 14, 2018
.npmignore chore: more explicit building tools configuration Dec 7, 2018
.travis.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
LICENSE
README.md
karma.conf.js chore: update dependencies, fix karma reload Dec 19, 2018
package-lock.json
package.json
shim.js fix(define): remove element class bridge thanks to babel v7 Oct 4, 2018
webpack.config.js

README.md

hybrids

npm version bundle size build status coverage status gitter twitter

Hybrids is a UI library for creating Web Components, which favors plain objects and pure functions over class and this syntax. It provides simple and functional API for creating custom elements.

  • The simplest definition — just plain objects and pure functions
  • Composition over inheritance — easy re-use, merge or split property definitions
  • No global lifecycle callbacks — no did* or will* and only in the independent property definition
  • Super fast recalculation — built-in cache mechanism secures performance and data flow
  • Templates without external tooling — template engine based on tagged template literals
  • Developer tools included — Hot module replacement support for fast and pleasant development

Getting Started

Install npm package:

npm i hybrids

Then, import required features and define a custom element:

import { html, define } from 'hybrids';

export function increaseCount(host) {
  host.count += 1;
}

export const SimpleCounter = {
  count: 0,
  render: ({ count }) => html`
    <button onclick="${increaseCount}">
      Count: ${count}
    </button>
  `,
};

define('simple-counter', SimpleCounter);

👆 Click and play on ⚡StackBlitz

Finally, use your custom element in HTML:

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

Built Version

You can also use the built version from unpkg.com CDN (with window.hybrids global namespace):

<script src="https://unpkg.com/hybrids@[PUT_VERSION_HERE:x.x.x]/dist/hybrids.js"></script>

Overview

There are some common patterns among JavaScript UI libraries like class syntax, complex lifecycle or stateful architecture. What can we say about them?

Classes can be confusing, especially about how to use this, binding or super() calls. They are also hard to compose. Complex lifecycle callbacks have to be studied to understand very well. A stateful approach can open doors for difficult to maintain, imperative code. Is there any way out from all of those challenges?

After all, class syntax in JavaScript is only sugar on top of the constructors and prototypes. Because of that, we can switch the component structure to a map of properties applied to the prototype of the custom element class constructor. Lifecycle callbacks can be minimized with smart change detection and cache mechanism. Moreover, they can be implemented independently in the property scope rather than globally in the component definition.

With all of that, the code may become simple to understand, and the code is written in a declarative way. Not yet sold? You can read more in the Core Concepts section of the project documentation.

Documentation

The hybrids documentation is available at hybrids.js.org or in the docs path of the repository:

Articles

Core Concepts Series

Videos

Live Examples

Browser Support

Build Status

The library requires some of the ES2015 APIs and Shadow DOM, Custom Elements, and Template specifications. You can use hybrids in all evergreen browsers and IE11 including a list of required polyfills and shims. The easiest way is to add the following code on top of your project:

// ES2015 selected APIs polyfills loaded in IE11
// Web Components shims and polyfills loaded if needed (external packages)
import 'hybrids/shim'; 
...

Web components shims have some limitations. Especially, webcomponents/shadycss approximates CSS scoping and CSS custom properties inheritance. Read more on the known issues and custom properties shim limitations pages.

The library calls shims if needed, so direct use is not required.

License

hybrids is released under the MIT License.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.