ComponentJS

Powerful run-time Component System for structuring HTML5-based Rich Clients

Know it Drive it Get it Learn it Apply it

Inspect it Subscribe it Feedback it Discuss it

Watch it Follow it Spread it Support it

ComponentJS is a stand-alone MPL-licensed Open Source library for JavaScript, providing a powerful run-time Component System for hierarchically structuring the User-Interface (UI) dialogs of complex HTML5-based Rich Clients (aka Single-Page-Apps) — under maximum applied Separation of Concerns (SoC) architecture principle, through optional Model, View and Controller component roles, with sophisticated hierarchical Event, Service, Hook, Model, Socket and Property mechanisms, and fully independent and agnostic of the particular UI widget toolkit.

Latest Version: 1.6.2

Hierarchical Components

ComponentJS allows you to manage your UI with a hierarchy of stateful components, each consisting of a generic frontend/proxy object providing all ComponentJS functionality and a backend/shadow object containing your custom component code. Backend objects have no dependency to ComponentJS and can be arbitrarily created.

Model/View/Controller Roles

ComponentJS does not demand, but already perfectly supports Ralf S. Engelschall's forthcoming Model-View-Controller / Component-Tree (MVC/CT) user interface architecture pattern: a Component Tree based modern variation of the popular Model-View-Controller pattern.

Powerful Event Communication

ComponentJS provides a powerful event-based communication model on top of the UI component hierarchy, including synchronous and asynchronous execution, capturing and bubbling delivery, event propagation cancelling, etc. Additionally, companion Service and Hook mechanisms are provided on top of this Event mechanism.

State Transitions and Guards

Components are stateful in order to model the important life-cycle of UI dialogs — being created, prepared, materialized and visible. Each component is in either the same or any lower state than its parent component. State transitions are fully hierarchy-aware and automatically trigger implicit state changes on parent and child components. State guards allow you cope with asynchronous resource provisioning.

Overview Video

(14min, 263MB, 1080p, streamed)

Built-In Visual Debugger

The component hierarchy in medium and large UIs can consist of many components and usually even dynamically changes under run-time. ComponentJS ships with a built-in graphical debugger which renders a visual representation of the component hierarchy in a separate window during UI execution. This allows you to cope even large component hierarchies.

UI Toolkit Independent

ComponentJS drives the UI dialog component hierarchy and hence logically and architecturally operates below the UI toolkit which renders the UI dialog and its widgets. Hence, ComponentJS is fully independent of and compatible with all UI toolkits, including Ext JS, Sencha Touch, jQuery UI, jQuery Mobile, etc.

Pure JavaScript

ComponentJS is a pure JavaScript library, without any external dependencies and not even requiring a DOM itself. Hence, when you use ComponentJS under a strict MVC/CT architecture, it especially supports even headless UI testing, i.e., driving the UI through Presentation Model manipulations only.

Open Source Software

ComponentJS is Open Source software, licensed under Mozilla Public License (MPL) 2.0, and hence can be freely used in both Open Source and proprietary commercial applications. Additionally, its development is fully transparent, as both Version Control and Issue Tracking happens in public.