backed

Small web framework for quick app & component development
Features
- class development without the worry of constructors and calling super
- internal/scoped & global property observers, checkout using observers
- updates property values to attributes & the otherway around, checkout using reflect
- templating using lit-html, checkout using render
Installation
$ bower install --save backed
$ npm install --save backed
Usage
Basic usage
Backed(class extends HTMLElement {
ready() {
// ready to go ...
}
});
Using observers
Backed(class extends HTMLElement {
static get properties() {
return {
name: {
observer: 'change'
}
}
}
ready() {
// ready to go ...
}
change(change) {
console.log(change);
}
});
Using reflect
Backed(class extends HTMLElement {
static get properties() {
return {
name: {
reflect: true
}
}
}
ready() {
// ready to go ...
}
});
Using render
Backed(class extends HTMLElement {
static get properties() {
return {
name: {
render: true,
value: 'name should go here'
},
lastname: {
render: true
value: 'lastname should go here'
}
}
}
render() {
html`
<style></style>
<h1>${this.name}</h1>
<h2>${this.lastname}</h2>
`
}
});
or
warning: watch out when using multiple renderers, when doing this the element will have the templateResult of the last render
Backed(class extends HTMLElement {
static get properties() {
return {
name: {
render: 'renderName'
}
}
}
renderName() {
html`
<style></style>
<h1>${this.name}</h1>
`
}
});
More info
Roadmap
- [x] Support customElementsV1
- [ ] Support commonjs (node)
- [x] Add observer support
- [x] Add global observer support
TODO
- [ ] Add strict property support (wip)
- [ ] Handle Commonjs (properties, observers, etc ...)
- [ ] Bind properties & attributes (use pubsub to notify changes)
- [x] Reflect properties & attributes
- [ ] Add demo's
- [ ] Add documentation
License
CC-BY-NC-ND-4.0 © Glenn Vandeuren