• Stars
    star
    273
  • Rank 150,780 (Top 3 %)
  • Language
    JavaScript
  • Created over 8 years ago
  • Updated 9 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Web Components + Virtual DOM: web standards for powerful UIs

panel

Build Status NPM version

Build Status

Apps made of composable, manageable Web Components. UIs with supercharged web standards!

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

customElements.define('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(on={click: $helpers.decr}) -
    button.incr(on={click: $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 (the basis of the core rendering technology of React). Through use of the Snabbdom Virtual DOM library and first-class support for multiple templating formats, Panel offers simple yet powerful APIs for rendering, animation, styling, and DOM lifecycle.

Each Panel application is a Web Component, composed of DOM elements and potentially arbitrarily nested child components, each of which can technically be 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 Snabbdom-compatible 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 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.

Since early 2016, Panel and Web Components have powered Mixpanel's most advanced new UIs in production, including Insights, Dashboards, Signal, and JQL Console.

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.

Documentation and examples

API docs can be found at https://mixpanel.github.io/panel/.

For some sample apps with explanations see examples/. These include demonstrations of using Panel with JSX and Redux.

A brief tutorial is available in the examples/tutorial 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

Browser tests run with Selenium through web-component-tester. Server-side rendering tests use mocha and chai directly.

Run with locally installed browsers

npm test

Tunnel to Sauce Labs

npm run build-test && npm run test-browser-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

More Repositories

1

mixpanel-iphone

Official iOS (Objective-C) Tracking Library for Mixpanel Analytics
Objective-C
1,027
star
2

mixpanel-android

Official Android Tracking Library for Mixpanel Analytics
Java
1,017
star
3

mixpanel-js

Official Mixpanel JavaScript Client Library
JavaScript
823
star
4

mixpanel-node

A node.js API for mixpanel
JavaScript
463
star
5

mixpanel-swift

Official iOS (Swift) Tracking Library for Mixpanel Analytics
Swift
395
star
6

mixpanel-ruby

Ruby
170
star
7

mixpanel-php

PHP
134
star
8

mixpanel-react-native

Official React Native Tracking Library for Mixpanel Analytics
JavaScript
103
star
9

mixpanel-python

Official Mixpanel Python library.
Python
101
star
10

mixpanel-utils

Python
80
star
11

mixpanel-flutter

Official Flutter Tracking Library for Mixpanel Analytics
Dart
66
star
12

sample-android-mixpanel-integration

Java
55
star
13

tracking-proxy

One-click configuration to proxy tracking requests to Mixpanel's API
Dockerfile
49
star
14

mixpanel-java

Java
48
star
15

mixpanel-unity

Official Unity Tracking Library for Mixpanel Analytics
C#
37
star
16

docs

Mixpanel's Official Documentation
MDX
35
star
17

fuzzbunny

Fast fuzzy string searching/matching/highlighting
JavaScript
19
star
18

panel-farm

Manage cute animals with Web Components and Virtual DOM very wow
JavaScript
10
star
19

snabbdom-jsx-lite

Write snabbdom templates in .jsx or .tsx (JSX for TypeScript)
TypeScript
10
star
20

flask-tracking-proxy

Example Python Flask application to proxy tracking requests to Mixpanel's API
Python
10
star
21

configmanager

A library for adding dynamic configuration to your code
Go
9
star
22

webcomponent

Lightweight utilities for constructing web components
JavaScript
8
star
23

webpack-dev-server-status-bar

Unobtrusive HTML status indicator for Webpack compilation status
JavaScript
7
star
24

mixpanel-gtm-template

A GitHub project created under the Mixpanel organization to store the Mixpanel GTM template
Smarty
6
star
25

obs

Opinionated observability package that combines logging, tracing and metrics.
Go
6
star
26

mixpanel-go

Mixpanel Official Go SK
Go
4
star
27

framesg

request/response communication to/from iframes
JavaScript
4
star
28

sheets

🔄 integrate mixpanel with google sheets
JavaScript
3
star
29

mixpanel-chrome-extension

This extension will inject the Mixpanel library into every page you visit
JavaScript
3
star
30

domsuite

JavaScript browser testing/automation utilities with async/await
JavaScript
2
star
31

mixpanel-js-wrapper

A GitHub project created under the Mixpanel organization to store the Mixpanel JS wrapper
JavaScript
2
star
32

django-prefetch-example

Python
1
star
33

dedupe-chunks-webpack-plugin

(make public later)
JavaScript
1
star