The Backdraft library is implemented as a set of JS6 modules as follows:

Lastly, lib.js, in the root of the Backdraft source tree, re-exports all public symbols defined in all core Backdraft modules as well as cleaning up some naming. The source is more instructive than more words:

// lib.js in the root of the Backdraft source tree
import {create, insert} from  "./src/dom.js"
import Component from "./src/Component.js"
Component.createNode = create;
Component.insertNode = insert;

export * from "./src/dom.js"
export {default as e, Element} from "./src/element.js"
export {default as EventHub} from "./src/EventHub.js"
export {default as WatchHub} from "./src/WatchHub.js"
export {render} from "./src/Component.js"
export {Component}

export function version(){
	return "2.0.5";

Typically, applications will import the module lib.js; see this discussion for more details.

The design of the class Component requires that Component.createNode and Component.insertNode be initialized by an external process before instances may be created. lib.js fulfills this responsibility for creating Component instances that interact with the DOM. This design allows for a different initializing to be used to achieve a different effect, for example, creating Component instances that interact with a test scaffold.

class Component

Component is the key abstraction offered by the library: it abstracts a user interface component, separating the details of the DOM from the application. Subclasses derived from Component provide an API that is independent of the input-output subsystem (the DOM). Component provides machinery to aid in constructing this separation of concerns including child management, variable watch, and event machinery as well as machinery that is common among user interface components such as focus management, visibility, mutability, and state-implied visual updates. Resource conservation and performance tuning is enhanced by separating the instance lifecycle from render lifecycle. Component is intended to be used in both traditional composition and derivation patterns.

mixin class EventHub

EventHub is a mixin class that (1) provides a means for clients to register a listener function in connection with an event name, and (2) provides a means to apply previously-registered listeners when an event occurs.

mixin class WatchHub

WatchHub is a mixin class that (1) provides a means for clients to register a watcher function in connection with a member variable name, and (2) provides a means to apply previously-registered watchers upon mutation of a member variable.

class Element

Element instances describe nodes that are used to build trees of either DOM elements or Component instances (themselves composed of either DOM elements of other Component instances).


A small set of helper/utility/syntax sugar function are provided by the library:

  • Rendering components and inserting them into the document tree.
  • Creating and destroying DOM trees.
  • Reading/writing properties, attributes, and styles
  • Connecting/disconnecting event handler

The Focus Manager

The focus manager monitors the focus and signals Component instances when the receive or lose the focus.

The Viewport Watcher

The viewport watcher monitors the viewport size and scroll position changes. The viewport size and scroll position variables may be watched to allow reorganizing the visual presentation of components as required when the viewport size/scroll position changes.