What is ComponentJS?

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.

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.

What are the features of ComponentJS?

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License