Hof.js light is a modern framework for the development of Single Page Applications and a part of the Hof.js project. It is an open source project of Hof University of Applied Sciences and was created by Prof. Dr. Walter Kern.
Unlike Hof.js (https://github.com/hofjs/hof), Hof.js light is based on LitElement (https://lit.dev/), but extends it with typical Hof.js features. While Hof.js is an experimental framework for trying out innovative new features, Hof.js light aims at building regular applications. Features from Hof.js will be gradually adopted in Hof.js light.
Contact us if you are a student of Hof University of Applied Sciences and would like to contribute.
- Organization: https://www.hof-university.de
- Mail: hofjs@hof-university.de
- Impressum / Imprint: https://www.hof-university.de/impressum.html
This framework has the following advantages, among others:
- Extremely simple implementation of apps based on Web Components and other web standards.
- Property observability without the requirement to explictly define them, because all properties that are referenced within templates function are automatically recognizied and made observable.
- Properties are automatically exposed as attributes.
- Properties with leading underscore are used as internal state and not exposed as attributes.
- Properties written in Uppercase are treated as constants and are not tracked.
- Custom events are specified by using prefix on, analog to regular html events.
- Easy start of development, since no transpiler, CLI or tool is needed. It is enough to include the framework which is only a few KB in size.
- IDEs provide best support even without extensions/plugins since the code is pure JS.
The following example shows a simple counter component that demonstrates key features such as derived properties and automatic ui rerendering based on property changes.
simple-counter.js
class CounterComponent extends HofHtmlElement {
count = 10 // observed and exposed as property (external property)
_showDetails = false; // observed and not exposed as property (internal state)
DOUBLE_FACTOR = 2 // not observed and not exposed as property (constant value)
get doubled() { return this.count * this.DOUBLE_FACTOR; } // derived property (readonly property)
toggleDetails() {
this._showDetails = !this._showDetails;
}
templates() {
return html`
<div>Count: ${this.count}</div>
<button onclick="${() => this.count++}">++</button>
<button onclick="${this.toggleDetails}">Details</button>
<ul style="display: ${this._showDetails ? "" : "none"}">
<li>Count: ${this.count}</li>
<li>Doubled + 1: ${this.doubled + 1}</li>
</ul>
`;
}
}
customElements.define("counter-component", CounterComponent)index.html
<!DOCTYPE html>
<html>
<head>
<title>Simple counter app</title>
<script src="../../lib/nomodule/hof.js"></script>
<script src="simple-counter.js"></script>
</head>
<body>
<h1>Simple counter app</h1>
<simple-counter></simple-counter>
</body>
</html>Components can be nested. Data is passed to child components using normal HTML attribute/property syntax. This supports complex objects without the overhead of serialization and deserialization because properties are used. Events are generated by child components and propagated up to parent components. Consequently, parent components can update their state and re-render the UI and corresponding child components if they depend on the changed state.
PersonDataInput
class PersonDataInput extends HofHtmlElement {
constructor() {
super("label");
}
templates() {
// Custom Events can be emitted by using emitEvent(name, data) or by
// dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail: data }))
return html`
${this.label}: <input value="${this.value}" onchange="${(event) => this.emitEvent("persondatainput", event.target.value)}" />
`
}
}
customElements.define("person-data-input", PersonDataInput)PersonData
class PersonData extends HofHtmlElement {
name = ""
age = ""
templates() {
// Event attributes are required to be prefixed with "on" to be recognized
return html`
<fieldset>
<person-data-input label="Name" value="${this.name}" onpersondatainput="${(event) => this.name = event.detail}"></person-data-input>
<person-data-input label="Age" value="${this.age}" onpersondatainput="${(event) => this.age = event.detail}"></person-data-input>
</fieldset>
<div>${this.name} (${this.age})</div>
`;
}
}
customElements.define("person-data", PersonData)Hof.js light can be installed by using npm.
npm install @hofjs/hofjs-light
This package contains builds in esm, cjs and nomodules formats. While cjs is suitable for server-side JS projects (Node projects), esm is the standard for client-side JS projects. To support older browsers without JS module support or to realize a small web application without requiring JavaScript modules, the nomodules variant can be used.
The following examples show the different import alternatives.
import { HofHtmlElement, html } from "pathToNodeFolderOfApp/node_modules/@hofjs/hofjs-light/lib/esm/hof";const { HofHtmlElement, html } = require("pathToNodeFolderOfApp/node_modules/@hofjs/hofjs-light/lib/cjs/hof");<script src="pathToNodeFolderOfApp/node_modules/@hofjs/hofjs-light/lib/nomodule/hof.js"></script>Minimal esm example
<!DOCTYPE html>
<html>
<head>
<title>Minimal demo</title>
<script type="module">
// Inline JS - should be outsourced to external file.
import { HofHtmlElement, html } from "../lib/esm/hof.js";
customElements.define("main-app", class extends HofHtmlElement {
templates() { return html`<h1>Hello at ${new Date()}</h1>`; }
});
</script>
</head>
<body>
<p>This must be running on a web server to work, for example the vscode live server.</p>
<main-app></main-app>
</body>
</html>Minimal cjs example
// window.customElements polyfill must be available to use
// component helper to create component for server-side rendering
const { HofHtmlElement, html } = require("../lib/esm/hof.js");
customElements.define("main-app", class extends HofHtmlElement {
templates() { return html`<h1>Hello at ${new Date()}</h1>`; }
});
...Minimal nomodules example
<!DOCTYPE html>
<html>
<head>
<title>Counter app</title>
<script src="../lib/nomodule/hof.js"></script>
<script>
// Inline JS - should be outsourced to external file.
customElements.define("main-app", class extends HofHtmlElement {
templates() { return html`<h1>Hello at ${new Date()}</h1>`; }
});
</script>
</head>
<body>
<main-app></main-app>
</body>
</html>Samples that illustrate basic usage of this framework can be found in this repository.
You can contribute by sending pull requests to this repository.
Hof.js light is MIT licensed.