legolog/docs/CLIENT-FRAMEWORK.md

Client Framework

It is important for the future maintainership of this small website that the code can easily be understood by the "average" programmer, of which Rich mentions that 50% of programmers being below average would mean that any advanced system would not be maintainable.

I chose to write a very simple templating and component library based off of the new HTMLElement concept to function react-esque without the burden of transpilation.

Quite simply a component is a class extension of the base class Component, It is expected that this is implemeneted as such with the other methods filled in.

class MyComponent extends Component {
    static __IDENTIFY() { return 'MyComponent'; }

    constructor() {
        super(MyComponent);
    }
}

That is the simplest form a component can be, it won't render but it will register it's self in the DOM and be accessable with the <mycomponent></mycomponent> tag within the DOM.

In order to get some stuff rendering in there, it is important to override the Render method, returning an object with a template and a style sheet, or a promise that will resolve these, so they can be asynchronusly loaded by the framework.

Basic loading

class MyComponent extends Component {
    static __IDENTIFY() { return 'MyComponent'; }

    constructor() {
        super(MyComponent);
    }

    Render() {
        return {
            template: /* html */`<div>{this.state.name}</div>`,
            style: `div { text-color: red }`,
        };
    }
}

Asynchronus loading

class MyComponent extends Component {
    static __IDENTIFY() { return 'MyComponent'; }

    constructor() {
        super(MyComponent);
    }

    Update() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                this.state.name = 'Hello World';
                resolve();
            }, 1000);
        });
    }

    Render() {
        return {
            template: SideLoad('MyComponent.html'),
            style: SideLoad('MyComponent.css'),
        };
    }
}

State

Similarly to React this framework includes a concept for statefulness, a given component has a state which can be user-defined this.state.x= or an attribute to the component tag in the HTML, or both. When the state changes, the component is re-renderered.

State is updated with setState().

Within the HTML, any instance of {this.state.} will be replaced with the internal state of the component.

The OnMount method is called once the component has been loaded and attatched to the DOM. This is where you can do any post-load setup. It is only called once and it's return value becomes the state of the component.

The Update method is called when the global state or the attribute state changes, and is expected to modify the internal state before rendering.

TODO: Global state