Lightning fast UIs on modern DOM APIs.
- Straightforward:
- Built-in use in
.html
files (no HTML parsing, etc). - As little abstraction as possible: Just DOM APIs, with a touch of reactivity.
- Built-in use in
- Lightweight:
- Takes advantage of native, fast DOM APIs, no reinventing the wheel.
- ES6 Proxies for reactivity, which is faster and more user friendly than manually
get
/set
handlers. - Custom Elements v1 to provide a full DOM element with built-in lifecycle hooks (no need to rewrite those either).
- ES6 Proxies for reactivity, which is faster and more user friendly than manually
- NO Virtual DOM overhead. Porpoise stores update functions, which get triggered when a property is changed. There is no diffing or separate object tree involved.
- Takes advantage of native, fast DOM APIs, no reinventing the wheel.
- Easy to learn:
- Get started with a simple CDN bundle and write your fast UIs in template backticks.
- Advanced users can take advantage of tree-shaking and JSX to boost performance even more.
NPM (recommended, both global & ESM): npm i porpoise
CDN:
- Global (recommended): https://cdn.jsdelivr.net/npm/porpoise@latest/lib/index.js
- ESM (only for in-browser testing): https://cdn.jsdelivr.net/npm/porpoise@latest/lib/esm/index.js
import { construct } from "porpoise";
construct("cool-counter", {
});
import { construct } from "porpoise";
construct("cool-counter", {
template: `
<h1>
Count:
<span />
</h1>
<button>Increase</button>
<button>Decrease</button>
`,
});
import { construct } from "porpoise";
construct("cool-counter", {
template: `
<h1>
Count:
<span :p-text="this.props.count" />
</h1>
<button>Increase</button>
<button>Decrease</button>
`,
castedProps: { count: "number" } // Auto-casts the attribute "count" to a number.
});
import { construct } from "porpoise";
construct("cool-counter", {
template: `
<h1>
Count:
<span :p-text="this.props.count" />
</h1>
<button @click="this.store.increase">Increase</button>
<button @click="this.store.decrease">Decrease</button>
`,
castedProps: { count: "number" },
// The store holds component-specific data:
store() {
return {
increase() { this.props.count++; },
decrease() { this.props.count--; }
}
},
});
<!-- In your HTML -->
<cool-counter count="1">
</cool-counter>