panel

panel

Apps made of composable, manageable Web Components. Because coding UIs shouldn't be rocket science.

import { Component } from 'panel';
import counterTemplate from './counter.jade';

document.registerElement('counter-app', class extends Component {
  get config() {
    return {
      defaultState: {count: 1},

      helpers: {
        decr: () => this.changeCounter(-1),
        incr: () => this.changeCounter(1),
      },

      template: counterTemplate,
    };
  }

  changeCounter(offset) {
    this.update({count: this.state.count + offset});
  }
});

document.body.appendChild(document.createElement('counter-app'));

.counter
  .val Counter: #{count}
  .controls
    button.decr(onclick=$helpers.decr) -
    button.incr(onclick=$helpers.incr) +

Motivation and technologies

Panel makes Web Components suitable for constructing full web UIs, not just low-level building blocks. It does so by providing an easy-to-use state management and rendering layer built on virtual-dom, modeled on the core rendering technology of React.

Each Panel application is a Web Component, composed of DOM elements and potentially arbitrarily nested child components, each of which is technically an app in its own right. Parent and child components can share state, in the form of Plain Old JavaScript Objects which are passed to templates for rendering. When update() is called on a component with state changes, the DOM gets updated according to the diff. Templates can be in any format that produces (virtual-)hyperscript, including raw Hyperscript code or Jade or JSX.

The architecture of Panel draws upon aspects of and technologies from Mercury, Polymer, React, Redux, Cycle, and Backbone, with an emphasis on simple pragmatism over functional purity thanks to Henrik Joreteg's "Feather" app demo. Panel eschews opaque abstractions and data flow management layers to provide a straightforward, largely imperative, state-based rendering cycle. There are no built-in data flow abstractions like Mercury's channels, Flux/React's stores, Cycle's observables, Backbone's event soup and DOM dependencies. More complex state management systems such as Redux and RxJS can plug in to Panel seamlessly if desired (hint: in most apps, you just don't need it). A built-in router (based on the Backbone Router) can sync URL updates and HTML5 History with a Panel app's state for automatic updating and view-swapping.

Installation

npm install --save panel

If your target environment does not implement HTML custom elements natively, you must supply a polyfill, such as webcomponents.js.

Examples

A brief tutorial is available in the example directory. The sample app accompanying the tutorial features routing, Jade templating, and infrastructure for practical usage such as Webpack/Babel configuration and inclusion of a Web Components polyfill.

A Panel implementation of the TodoMVC app spec is available at https://github.com/tdumitrescu/todomvc-panel.

Running tests

Tests run with Selenium through web-component-tester.

Build test fixtures

npm run build-test

Run with locally installed browsers

npm test

Tunnel to Sauce Labs

npm run test-sauce

Set credentials with environment variables SAUCE_USERNAME and SAUCE_ACCESS_KEY. The default browser/OS matrix is defined in wct.conf.json.

License

MIT