Skip to content

Home

Jump to bottom
Andre Kless edited this page Oct 30, 2025 · 21 revisions

content is up-to-date for ccm.js v27.5.0

Click here for the German version.

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, we refer to components implemented using the ccmjs framework 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 website area.

As soon as ccm.js is integrated into a webpage, the ccm.start function is available. Here is an example of embedding a quiz app:

<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="https://ccmjs.github.io/ccm/ccm.js"></script>
<script>
  ccm.start("https://ccmjs.github.io/akless-components/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 Angular, React and Vue.js, components can be subsequently embedded and combined in web pages at runtime. The embedding also works multiple times in the same website 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:

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

Within the start() the website 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 website then contains Hello Mika.

Services

ccm offers the following services:

In addition, CCM 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