Skip to content

Home

Jump to bottom
Andre Kless edited this page Dec 13, 2024 · 17 revisions

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

Click here for the German version.

Client-side Component Model (ccm)

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 ccm web 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
};
Clone this wiki locally