Skip to content

Home

Jump to bottom
Andre Kless edited this page Nov 25, 2025 · 38 revisions

content is up-to-date for ccm.js v28.0.0

Client-side Component Model (CCM)

The Client-side Component Model (CCM) defines a conceptual framework for developing modular and reusable web components. Such abstract components are referred to as CCM components. The JavaScript reference implementation of this model, ccmjs, manages the lifecycle of components in the web browser and provides supporting helper functions for developing and running these components in practice. For clarity, components implemented using the ccmjs framework are referred to as ccmjs components. Unless otherwise specified, the term "component" is used hereafter as a shorthand for ccmjs component.

Basic Principle

With the JavaScript command ccm.start(component, config, element), a component (component) with a specific configuration (config) can be embedded in a web page area (element). The app realized by the component is then displayed with this configuration in the web page area.

As soon as ccmjs is integrated into a web page, ccm.start() is available. Here is an example of embedding a quiz app:

<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="https://ccmjs.github.io/framework/ccm.js"></script>
<script>
  ccm.start("https://ccmjs.github.io/quiz/ccm.quiz.js", {
    feedback: true,
    questions: [
      {
        text: "Does this example work?",
        input: "radio",
        answers: [
          {text: "Yes", correct: true},
          {text: "No"}
        ]
      }
    ]
  }, document.body);
</script>

Differentiation

W3C Web Components focuses on HTML and the extension of HTML elements. The CCM web technology focuses on JavaScript and configurability using JSON. Unlike other frameworks like Angular, React and Vue.js, components can be subsequently embedded and combined in web pages on-demand at runtime. The embedding also works multiple times in the same web page without conflict in different versions and configurations.

Structure of a Component

A component is a file whose name starts with ccm., followed by the component's unique name and ends with .js. Example: ccm.quiz.js.

The content of a component has the following structure:

export const component = {
  name: "quiz",                                    // unique name
  ccm: "https://ccmjs.github.io/framework/ccm.js", // URL to ccmjs
  config: {/*...*/},                               // contains the default configuration
  Instance: function () {
    this.start = async () => {/*...*/};            // the web page area of ​​the component is designed here
  }
};

Within the start() the web page area to be designed can be accessed with this.element. Every entry in the config can be accessed via this.

Example of a hello component:

ccm.files["ccm.hello.js"] = {
  name: "hello",
  ccm: "https://ccmjs.github.io/ccm/ccm.js",
  config: {
    name: "World"
  },
  Instance: function () {
    this.start = async () => {
      this.element.innerHTML = "Hello " + this.name;
    };
  }
};

Usage of the hello component:

<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="https://ccmjs.github.io/ccm/ccm.js"></script>
<script>
  ccm.start("./ccm.hello.js", {
    name: "Mika"                 // overrides "World" in the default configuration
  }, document.body);
</script>

The <body> of the web page then contains Hello Mika.

Services

ccmjs offers the following services:

In addition, ccmjs also offers useful helper functions for component developers under ccm.helper.

Integration of Resources

Additional dependent resources can be dynamically integrated at runtime via the config of a component. Dependencies to other resources are specified as an array in the form of [functionName, ...params]. Examples:

const config = {
  html: ["ccm.load", "./templates.html"],                       // HTML templates
  css: ["ccm.load", "./styles.css"],                            // CSS
  store: ["ccm.store", {name: "mycollection"}],                 // datastore
  dataset: ["ccm.get", {name: "mycollection"}, "mykey"],        // single dataset
  comp: ["ccm.component", "./ccm.component.js", {/*config*/}],  // component object
  inst: ["ccm.instance", "./ccm.component.js", {/*config*/}],   // instance from a component
  app: ["ccm.start", "./ccm.component.js", {/*config*/}]        // directly started instance
};

ToDo: HTML Templating

ToDo: Versioning

Clone this wiki locally