Welcome to Webface.js reference

Webface.js a web-frontend framework based on components and hierarchical tree structure.

Most frameworks focus on how to make more things happen with less code and magic. They invent foreign concepts and lots of things don't make sense. Webface, on the other hand, follows these simple principles:

  • Keep an easy to understand structure / mental model that's assumed intuitively, without remembering it.
  • Use familiar concepts.
  • Complete separation of code and HTML: no front-end rendering, no templating languages etc.
  • Should be usable for one page webapps as well as regular websites.

Key concepts:

  • Define components which in turn may have other components as children
  • Children publish events to their parents, parents decide what to do with them.
  • Parents manipulate children's presentation and behavior.
  • Component property values are tied to html element's attributes or innerText
  • Child components may have roles, so that parents know how to react to certain events based on roles their children have.
  • Each component has a set of behaviors which define how it interacts with users by changing its corresponding DOM element properties (for example: animations, display etc).

Show me the code!

// Assuming, Webface library is placed in a directory webface.js on the same level as current file
import { extend_as } from "./webface.js/lib/utils/mixin.js";
import { Component } from "./webface.js/lib/component.js";

// This syntax may seem a little weird, but you don't have to remember it.
// Just copy it from other components. It is important that new components are
// declared this way for everything to work, but you don't need to understand why
// (hint: it's basically for inheritance + reflection to work properly).
export class MyButtonComponent extends extend_as("MyButtonComponent").mix(Component).with() {

  constructor() {
    event_handlers.add({ event: 'click', role: "#self", handler: (self,event) {
      console.log("Someone clicked the button");
    });
  }

}
// This line is mandatory at the end of each component file. Basically allows for reflection to work
// and create new component instances on the fly when Webface sees component-like html in your page's DOM.
window.webface.component_classes["MyButtonComponent"] = MyButtonComponent;

So what this code does it basically defines a new component called MyButtonComponent. If you have the following HTML on your page:

Then Webface will automatically create an instance of MyButtonComponent and the button will print the
"Someone clicked the button" message into the console browser.