Skip to content

Einstieg

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

Inhalte sind up-to-date für ccm.js v27.5.0

Klicke hier für die englische Version.

Client-side Component Model (ccm)

Grundprinzip

Mit dem JavaScript-Befehl ccm.start(component, config, element) kann eine Komponente (component) mit einer konkreten Konfiguration (config) in einen Webseitenbereich (element) eingebettet werden. Die von der Komponente realisierte App wird dann mit dieser Konfiguration im Webseitenbereich angezeigt.

Sobald in einer Webseite die ccm.js eingebunden ist, steht die ccm.start-Funktion zur Verfügung. Hier ein Beispiel für die Einbettung einer 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: "Funktioniert dieses Beispiel?",
        input: "radio",
        answers: [
          {text: "Ja", correct: true},
          {text: "Nein"}
        ]
      }
    ]
  }, document.body);
</script>

Abgrenzung

Bei W3C-Webkomponenten liegt der Fokus auf HTML und der Erweiterung von HTML-Elementen. Bei der ccm-Webtechnologie liegt der Fokus auf JavaScript und der Konfigurierbarkeit mittels JSON. Anders als bei Angular, React und Vue.js können Komponenten nachträglich zur Laufzeit in Webseiten eingebettet und kombiniert werden. Die Einbettung funktioniert auch mehrfach in der selben Webseite konfliktfrei in unterschiedlichen Versionen und Konfigurationen.

Aufbau einer Komponente

Eine ccm-Webkomponente ist eine Datei, deren Name mit ccm. startet, gefolgt vom eindeutigen Namen der Komponente und mit .js endet. Beispiel: ccm.quiz.js.

Der Inhalt einer Komponente hat folgende Struktur:

ccm.files["ccm.quiz.js"] = {
  name: "quiz",                               // Eindeutiger Name
  ccm: "https://ccmjs.github.io/ccm/ccm.js",  // URL zur ccm.js
  config: {/*...*/},                          // enthält die Standardkonfiguration
  Instance: function () {
    this.start = async () => {/*...*/};       // hier wird der Webseitenbereich der Komponente gestaltet
  }
};

Innerhalb der start() kann mit this.element auf den zu gestaltenden Webseitenbereich zugegriffen werden. Jeder Eintrag in der config ist über this erreichbar.

Beispiel einer hello-Komponente:

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;
    };
  }
};

Nutzung der hello-Komponente:

<!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"                 // überschreibt "World" in der Standardkonfiguration
  }, document.body);
</script>

Der <body> der Webseite enthält dann Hello Mika.

Services

ccm bietet folgende Services an:

Zusätzlich bietet ccm noch unter ccm.helper nützliche Hilfsfunktionen für Komponentenentwickler an.

Einbindung von Ressourcen

Über die config einer Komponente können weitere abhängige Ressourcen dynamisch zur Laufzeit eingebunden werden. Abhängigkeiten zu anderen Ressourcen werden als Array in der Form [functionName, ...params] angegeben. Beispiele:

const config = {
  html: ["ccm.load", "./templates.html"],                       // HTML-Templates
  css: ["ccm.load", "./styles.css"],                            // CSS
  store: ["ccm.store", {name: "mycollection"}],                 // Datenspeicher
  dataset: ["ccm.get", {name: "mycollection"}, "mykey"],        // einzelner Datensatz
  comp: ["ccm.component", "./ccm.component.js", {/*config*/}],  // Komponentenobjekt
  inst: ["ccm.instance", "./ccm.component.js", {/*config*/}],   // Instanz aus einer Komponente
  app: ["ccm.start", "./ccm.component.js", {/*config*/}]        // direkt gestartete Instanz
};

ToDo: HTML-Templating

ToDo: Versionierung

Clone this wiki locally