API Management

Change the API symbol in the global variable namespace under which ComponentJS is exposed. By default ComponentJS is exposed under the symbol name ComponentJS. It is a common convention to change the symbol to cs (for "component system/service") to have a convenient short-hand.

Library Management

ComponentJS can be extended through plugins, so it can initialize some of its internals only once all plugins were loaded and executed.


ComponentJS has special support for debugging its run-time processing, especially for visualizing the current component tree in real-time.

Code Structuring

ComponentJS internally uses a few code structuring utility functions for implementing class method parameters and class attributes. Those utility functions are also exposed for consumption by application developers, but they are NOT(!) required for using ComponentJS. Especially, it is NOT(!) required that component backing objects are defined by cs.clazz!

Component Creation

Components are managed in hierarchical fashion within a component tree. The component tree can be traversed and its components can be created, looked up, state transitioned, communicated on and be destroyed.

Component Information

Components carry a few distinct information. They can be accessed via the following getter/setter-style methods.

Component Lookup

Before performing certain operations on a component, it first have to be looked up in the component tree. As this is one of the most prominent functionalities of ComponentJS, it is directly exposed through the global API symbol.

Component Tree

Components are managed within a component tree. The following functions allow you to traverse this tree.


Components, during their life-cycle, are in various particular states. Components can be triggered to change their state. During those state transitions, enter and leave methods are called accordingly.


In ComponentJS there are at least 4 resource allocating operations which have corresponding deallocation operations: Model observe()/unobserve(), Socket plug()/unplug(), Event subscribe()/unsubscribe(), Service and register()/unregister(). For correct run-time operation it is required that each allocation operation, performed in a state enter method, is properly reversed with the corresponding deallocation operation in the state leave method. As this is extremely cumbersome (especially because you have to store the identifiers returned by the allocation operations as you need them for the deallocation operation), ComponentJS provides
  • convenient spool mechanism which all of the above allocation operations support and which also can be used by the
  • application itself.


    An object can be "marked" with a set of names. ComponentJS internally does not use those markers at all, but the ComponentJS Debugger plugin at least uses markers named "service", "model", "view" and "controller" on
  • components' backing object to render those components in different colors.
  • Properties

    Every component can have an arbitrary number of key/value based properties attached to it. The keys have to be of type String, the values can be of any type. A property is set on a target component but is resolved on both the target component and all parent components (up to and including the root component). This way properties feel like inherited and overrideable values which can be used for both storing component-local information and to communicate information to foreign components.


    Sockets are a special form of component Properties with callback functions as the values. They are intended to link Views of child/descendant components into the View of a parent/ancestor component. In contrast to regular Properties, Sockets are never resolved directly on the target component. Instead they always start to resolve on the parent component because the sockets on the target component are intended for its child/ancestor components and not for the target component itself. So, please remember to never plug a socket directly onto the target component!


    When using Model/View/Controller roles for components, the Model component needs a so-called Presentation Model: an abstraction of presentation onto which both View and Controller components attach via Observer pattern. The Controller component for provisioning business information into the Model and triggering business services upon Model changes. The View component for displaying the Model information and storing events into it.


    The Event mechanism is a central one in ComponentJS. Both Models and Services are internally based on the Events mechanism. An Event is an object published towards a target component. It is delivered in 4 phases:

    Event objects are implicitly created by the publish() operation and they provide various getter/setter methods:


    Services are loosely coupled method calls across components. The functionality provider does register() the service and the functionality consumer does call() the service.


    ComponentJS has optional support for test-driving an application, based on asynchronously executed use-cases with the help of its testdrive plugin.

    Vue Data Binding

    ComponentJS has optional support for bidirectional data binding with the help of the vue plugin and the underlying Vue rendering engine. The vue plugin provides the following distinct features:

    The extra ComponentJS API methods are: