Ja, dann auch von meiner Seite herzlich willkommen zu meinem Vortrag. Mein Name ist wie gesagt André Kless, ich bin wissenschaftlicher Mitarbeiter im Verbundprojekt Work & Study, das eben vom BMWF gefördert wird und werde heute erstmals Ihnen mal

das vorstellen, was ich jetzt so die letzten zwei Jahre ausgetüftet habe und immer wieder daran gebastelt habe. Ja, ich bin der Entwickler von CCM, CCM steht für Kleinzeit Component Model. Ja, es handelt sich also um ein kleinzeitiges Komponentenmodell, auf dessen Grundlage man Webkomponenten realisieren und verwenden kann.

Ja, meinen Vortrag habe ich so gestaltet, dass ich ganz bewusst am Anfang nicht erst mal über den State of the Art spreche, weil das auch einfach nicht meiner Historie entspricht. Ja, ich habe nicht irgendwie die Welt analysiert, geschaut, was gibt es schon und dann angefangen, was eigenes zu entwickeln, sondern habe ganz aus meinen eigenen Entwicklungserfahrungen

in der Softwareentwicklung immer wieder reflektiert, was kann man, wie müsste das eigentlich sein, dass man langfristig nicht immer zunehmender nur noch mit Komplexitätsbewältigungen beschäftigt ist. Genau, und habe dann eben erst später einen Punkt gehabt, wo ich gemerkt habe,

das ist vielleicht nicht nur für mein lokales Umfeld ganz toll, sondern könnte auch für den Rest der Welt interessant sein. Hab dann erst geschaut, was versteht eigentlich der Rest der Welt unter dem Stichwort Webkomponenten und wo stehen die eigentlich. Ja, entsprechend ist auch mein Vortrag aufgebaut. Am Anfang führe ich direkt konkret in CCM ein und danach würde ich mit Ihnen gemeinsam

mal schauen, was der Rest der Welt so im Kern unter Webkomponenten versteht. Ja, zum Abschluss dann eine Diskussionsrunde, bei der ich dann sehr gespannt bin, was jetzt Entwickler, die noch nie vorher von CCM gehört haben, wie die darauf so reagieren. Ja, zu Beginn noch eine Folie, um zu zeigen, worum es geht, also was ist

eigentlich die Vision hinter Webkomponenten? Dahinter steckt die Vision des modularen Webs, also Baustein Prinzip, Lego, dass man eben komplexe Webanwendungen aus bereits bestehenden vielleicht auch von anderen professionell umgesetzten Komponenten zusammensetzen kann.

Vielleicht ein kleines Beispiel, nehmen wir an, wir würden jetzt eine Webapp entwickeln wollen für, was weiß ich, eine Lehrveranstaltung an dieser Hochschule, eine konkrete Lerneinheit, wo, wie man hier sieht, wir wollen, dass die Studierenden ein Video gucken, danach einen Quiz machen und das Video sollen die kommentieren und reden können. Dann würden wir eben nach diesem Ansatz eben genau nicht anfangen, jetzt eine

Kommentierungsfunktionalität selbst zu schreiben, also nicht das Rad eben wieder neu erfinden, nicht anfangen, einen Quiz zu implementieren, sondern stattdessen würden wir auf einen Art Marktplatz im Internet gehen, wo man ähnlich wie bei Amazon in bestehenden Komponenten eben stöbern kann, schauen kann, wie sind die bewertet, wie flexibel sind die

Komponenten, die sind dann passbar in meinem Kontext und eben so eine Art Einbettungscode, wie bei YouTubes Videos von mir aus findet und das dann eben damit in die eigene Webapp integrieren kann. Ja und unsere Webapp hat dann eben nicht mit der Zeit immer komplexer werdenden Code, wie das sonst klassisch der Fall ist, sondern hat eigentlich nur sehr minimalistischen Code, eben nur genau den, der

nötig ist, um die wiederverwendeten Komponenten intelligent zusammenzuschalten und die Komplexität dieser einzelnen Dinge ist sozusagen in diesen komponentenlosen gekoppelten Komponenten dann gekapstelt und ausgelagert. Das ist die Idee von Modularen Web. Darum geht es um die Verwirklichung dieser Vision.

Ja, damit kommen wir auch zur Einführung in CCM. In Anbetracht der Zeit werde ich jetzt nicht alle Aspekte und Facetten von CCM aufzeigen können. Deswegen versuche ich mich auf die drei Kernelemente zu fokussieren, die CCM ausmachen.

Ja, das wäre einmal die Einbettbarkeit, also grob gesagt, dass man Komponenten eben flexibel in beliebige Webseiten einbetten kann, dann die Modularität, dass man Komponenten eben auch aus anderen Komponenten sich zusammensetzen, dass sich eine Komponente aus anderen Komponenten zusammensetzen kann und noch die Datenhaltung, also zum Beispiel in der

Kommentierungskomponente kann man sich ja vorstellen, da fallen ja irgendwie Daten an, die Leute schreiben Kommentare, die müssen irgendwo gespeichert werden und dafür bietet CCM einen besonderen Service für die Datenhaltung an, über den ich auch gerne wesentlich mehr reden würde, wo ich mich aber auch versuche, auf die wesentlichsten Elemente zu fokussieren und die mal richtig rüberzubringen.

Ja, starten wir mal mit der Einbettbarkeit. Das kann man sehr schön mit der Frage verbinden, was bringt CCM eigentlich? Und ja, der Satz, mit dem ich mich da immer als erstes ranntaste, ist immer der, ja, CCM ermöglicht es, in beliebige Webseiten per JavaScript CCM-Komponenten on-demand und

Cross-Domain einzubetten. Ja, kurz zu den Begriffen, ja, on-demand bedeutet, dass ich als Webseitenentwickler ja eben nicht übersagen kann, wenn meine Webseite geladen wird, dann soll in den Webseitenbereich, was weiß ich, das Quiz von der Quizkomponente eingebettet werden, sondern ich kann

noch sagen, ich öffne meine Seite und kann, nachdem die Komponente fertig geladen ist, auch im Nachhinein noch sagen, jetzt habe ich Lust, das Quiz in diesen Webseitenbereich zu machen. Ja, dann noch Cross-Domain dazu. Das bedeutet eben, dass diese Komponente, die ich einbette, nicht auf demselben Server, wo meine Webseite ist, liegen muss, nicht innerhalb des selben

Domains, die kann irgendwo in der Welt liegen, von mir aus in China auf irgendeinem Server, man muss nur eine öffentliche, die öffentliche URL dieser Komponente haben und kann die dann verwenden. Ja, vor allem zu beachten ist jetzt auch die Beschreibung aus beiden, ja, das bedeutet, dass ich nicht nur als Webseitenentwickler, sondern auch als normaler Webseitennutzer praktisch im Internet

rumsurfen kann und kann mich auf irgendeiner Webseite befinden und kann dann, was weiß ich, auf tageschau.de sagen, ich habe jetzt Lust, warum auch immer, einen Quiz zu machen und hole mir dann die Quizkomponente dann in irgendeinen Webseitenbereich der Webseite rein. Ja, damit man das ein bisschen spüren kann, was ich damit meine, mache ich es einmal vor.

Ich wechsle mal in den Firefox und keine Ahnung, ob ich nun mal google.de, die normale Google-Seite, ja, öffne die Entwicklerkonsole. Ja, und was ich jetzt mache, ist erst mal nachträglich in die Webseite mein CCM-Framework reinzuladen. Das CCM-Framework ist nur eine kleine

JavaScript-Datei, minimiert so 18 Kilobyte, und die macht nichts anderes, als mir die Services zur Verfügung zu stellen, damit ich jetzt ab dann Komponenten, die es in der Welt gibt, halt einbetten kann. Also, die füge ich jetzt nachträglich einmal hinzu. Ja, die wäre sowieso viel zu klein.

Ja, ist leider abgeschnitten, das kann ich auch nicht höher ziehen. Das erwischt mich jetzt etwas unerwartet. Aber die Befehle dafür, die kommen sowieso im Laufe des Vortrags nochmal richtig. Also, was ich jetzt mache, ich füge einen nachträglich einen Script-Tag hinzu. Ja, ich denke, das kann man, ist auch an der Seite abgeschnitten, nicht so optimal.

Ich habe bloß nachträglich einen Script-Tag hinzugefügt, der mir die JavaScript-Datei liert, also nichts Außergewöhnliches. So, ab jetzt, so jetzt gibt es praktisch ein globales CCM-Objekt, ähnlich wie bei jQuery, alles, was CCM macht, ist auch in diesem Namensraum gekapselt. Und ab jetzt kann ich mit dem Einbettungsbefehl CCM.render eben

fröhlich Komponenten einbetten. Mache ich einmal am Beispiel, ja, nehme ich mal die Dialogbox, da wo der, ich nehme mal den Webseitenbereich, wo das Google-Logo ist, schwupps, ich habe jetzt die Dialogbox genommen, das ist eigentlich mein Randkomponent, aber ich nehme sie irgendwie immer wieder

gerne. Damit kann man so kleine virtuelle Dialoge realisieren. Ja, und habe das jetzt eingebettet. Ja, vorweg, dass es kein iFrame wieder dahinter steckt. Das ist auch eine Besonderheit, komme ich gleich noch drauf. Er ist also flexibel anpassbar. Ja, und bloß, also nicht, dass jemand denkt, ich habe jetzt irgendwie die Google-Webseite gehackt, ja,

nichts der gleichen, ich nehme an, wir alle wissen es, der Browser ist eine Sandbox, ich habe ja nur eine Kopie der Webseite, ich kann seit jeher hier irgendwie, keine Ahnung, hier irgendwas verändern, Google-Suche, Google-Flüche von mir aus, keine Ahnung, also das geht schon von jeher, ich habe es jetzt einfach nur auf die Spitze getrieben, dass ich jetzt beliebige Web-Anwendungen auch

nachträglich in Webseiten reinholen kann. Ja, vielleicht ein, ja, von mir aus noch ein weiteres Beispiel, nehme ich noch tageschau.de, sage ich mal, in dem Bereich da oben, wo die Tab-Leiste ist, so der Webseiten-Bereich,

der heißt hier, zucknavi, zuck. Also auch hier, egal, welcher Webseite ich bin, ich kann spontan sagen, alles, was irgendwie mal als Komponente umgesetzt wurde, kann ich mir da reinholen. Okay, ja, zurück zum Vortrag.

Das, was mir ganz wichtig dabei ist, das ist kein iFrame, wie gesagt, ja, denn wir alle kennen Einbettbarkeit, das denkt man, das ist doch ein alter Hut, was erzählt ihr eigentlich, ja, Einbetten geht schon immer, jede Web-Anwendung bietet das heutzutage an. Mich kann man irgendwie auch in andere Webseiten einbetten, aber das ist so ziemlich immer iFrame-basiert. Ich weiß nicht, Sie kennen vielleicht iFrames,

das ist so ein starker Kasten in der Webseite, der ist auch nicht sehr flexibel anpassbar. Das CSS greift nicht im Inneren, also von der Webseite, das CSS greift nicht im Inneren des iFrames. Ja, wir können das nicht an unser Corporate-Design der Webseite anpassen, man merkt irgendwie, dass es von außerhalb was ist. Ja, und das ist hier genau nicht so, das ist ein ganz entscheidender Punkt, sonst wäre das alles irgendwie nur Spielerei.

Ja, jetzt kann man endlich mal Dinge wiederverwenden, ohne und das so ans Corporate-Design anpassen, als ob es schon immer dazugehört hätte und man das wirklich nicht mehr unterscheiden kann, dass das was von außerhalb ist. Ja, es ist also freier Dom-Zugriff, ja, also Document Object-Tree, also vom außerhalb.

Also die Webseite kann auf die eingebetteten Inhalte, die Dom-Struktur zugreifen, auch das CSS anpassen. Ja, wenn man eine Komponente in einen Webseitenbereich, in eine Webseite einbettet, wird dieser Komponente einen Webseitenbereich zugewiesen und den gestaltet sie dann selbst. Sie hat dann auch zur Laufzeit dynamisch Zugriff

auf die Höhe und Breite des Webseitenbereichs, kann also responsiv auch schon intelligent ihre Inhalte an die verfügbare Größe anpassen und so den Webseitenentwickler schon entgegenkommen, dass der das nicht selber noch irgendwie machen muss. Genau, das habe ich schon gesagt. Ja, auch da kann man ja Komponente, die ihr ist ja konfigurierbar, auch ein Layout mitgeben

als Webseitenentwickler, halt eben das Layout, dass es eben genau so aussieht, wie zum Beispiel, wenn man es hier in die Lernplattform leer einbettet, dass es so aussieht, als hätte es schon immer zu leer gehört. Ja, die Umkehrseite ist aber auch, dass auch die eingebetteten Inhalte der Komponente haben auch Zugriff, also auf den Rest der Webseite. Deswegen gibt es eine ganz entscheidende Konvention.

Ja, die einzigste, die irgendwie einschränkend ist in CCM, nämlich ein Komponentenentwickler muss immer so seine Komponente schreiben, dass sie bitte nur den eigenen Webseitenbereich verändert. Ja, das ist technisch zwar kein Verbot, aber von der Akzeptanz her, man kann sich vorstellen, im Marktplatz wird man keine Komponente irgendwie wieder verwenden wollen, die, wenn man einbettet, vielleicht irgendwie wie bei Bootstrap,

das ganze CSS auf die Faultwerte setzt oder irgendwas grün macht vom anderen, dass der Webseite das würde, keiner machen. Also von der Akzeptanz her, wenn man will, dass seine Komponente irgendwie verwendet wird, dann die Konvention ganz streng einzuhalten. Vor allem ist das CSS auch so zu schreiben, dass das eben nicht irgendwie alle Diffs grün macht. Das trifft zwar auch die eigenen Diffs, aber auch eben alle anderen.

Ja, sowas ist zum Beispiel geht gar nicht. OK. Ja, jetzt man kann also Komponenten irgendwie einbetten. Jetzt die Frage, was bringt denn so eine Komponente? Was ist damit machbar? Ja, also die umsetzbaren Möglichkeiten reichen von einfachen staatlichen Inhalten

bis komplexen interaktiven Webanwendungen mit bis hin zu mobilen Webapps mit Offline-Funktionalität, Echtzeitkommunikation, also alles, sprich, was das moderne Web kann, kann man auch als Webkomponente, als CCM-Komponente umsetzen. Ja, besonders hervorzuheben ist noch der Aspekt der Echtzeitkommunikation. Ja, das geht dann auch

cross domain. Das heißt, wenn ich jetzt eine Chatkomponente habe und ich binde mir die auf eben bei Google.de mal ein und ein anderer ist auf Tagesschau.de und bettet sich da die Chatkomponente auf dieselbe Art ein, also denselben Chat ein, können die von Google und Tagesschau.de auf einmal in Echtzeit miteinander kommunizieren. Ja, auch das führe ich einmal vor.

Ja, ich habe mal hier in IAS Lea, also unsere Hochschullernplattform hier von der Hochschule IAS System und von anderen Hochschulen Koblenz, die schwören wieder auf Olert, die haben andere Lernplattformen. Und hier habe ich mal beispielhaft Komponenten eingebettet. Ja, hatte ich auch für die Bibliothek gemacht,

weil die das jetzt übrigens ab nächstes Semester auch einsetzen wollen, CCM, weil das viel einfacher ist, lose gekoppelt ist als diese aufwendige Plug-in Verwaltung, die die sonst haben in Lea. Und hier habe ich zum Beispiel Kanban Board. Kanban, kennt ihr? To do, doing, done.

Ja, also ich habe hier Kärtchen im Projektteam. Kann man jetzt sagen, wer welche Aufgabe hat, die die Aufgabe jemandem zuweisen, eine Priorität festlegen für die Aufgabe, eine Deadline eintragen, Beschreibung und so weiter. Dasselbe mache ich mal in Olert. Habe ich auch das Kanban Board mal beispielhaft eingebettet und man kann ja über die Konfiguration noch

das Layout ändern. So, und jetzt, wenn ich hier eintippe, sieht man auf der anderen Seite, also wird in Echtzeit aktualisiert. Ja, man kann also auch plattformübergreifend Echtzeitkommunikation machen. Ja, oder hier die Kärtchen verschieben per Dreckendrop.

Ja, okay, so viel zur Echtzeitkommunikation. Also kurz gesagt, alles, was man mit HTML, CSS und JavaScript heutzutage umsetzen kann, kann man als CCM-Komponente umsetzen und alles, was dann

als CCM-Komponente umgesetzt ist, kann man dann eben auf die Ebenen beschriebener Art überall flexibel einsetzen. Ja, auch mehrfach. Ja, also so viel zu den Besonderheiten der Einbettbarkeit. Jetzt können wir uns konkret mal anschauen, wie man denn konkret mit CCM ein Komponente einbettet.

Da bietet es sich an, dass wir mal auf das CCM-Framework schauen können, auf die von ihm angebotenen Schnittstellen. Das ist auch eine vollständige Liste, wenn man die verstanden hat. Mehr gibt es nicht. Das ist alles. Ist eine sehr kleine Sache. Es geht nur darum, die Service zur Verfügung zu stellen, um komplett einbetten zu können. Mehr macht das nicht.

Ja, der wichtigste Befehl ist CCM-Render. Das war der Einbettungsbefehl, den ich vorhin benutzt habe. Wenn man nur verwenden will, braucht man eigentlich nur diesen Befehl zu kennen. Mit den anderen Befehlen hier kann man flexibel noch abhängige Ressourcen nachladen, also CSS-Dateien, JSON-Dateien, JavaScript-Dateien, irgendwelche anderen Frameworks.

Wohlgemerkt, das sorgt dafür, dass man das alles cross-domain einbinden kann. Ja, also dieses, das kann auf irgendwelchen Webseiten liegen. Auch Daten kann man cross-domain laden von anderen Servern. Ja, man kann ja auch parallel und seriell noch Performance-Optimierung machen, dass es parallel oder seriell geladen wird, mehrere Dinge übergeben und so weiter. Ja, CCM-Component, damit kann man, das ist der Befehl,

um eine Komponente in der Webseite zu registrieren, dass sie ab dann sozusagen eingebettet werden kann. Das steckt hier implizit auch mit drin. Jetzt kommt was ganz Wichtiges, was man möglichst hoffentlich direkt versteht, weil sonst versteht man nachher nicht, wovon ich rede. Mit CCM-Instance kann man sogenannte CCM-Instanzen erstellen.

Was ist eine CCM-Instanz? Warum gibt es die überhaupt? Die gibt es nur deswegen, damit man eine Webseite dieselbe Komponente auch mehrfach einbetten kann. Das soll ja konfliktfrei möglich sein. Ein Chat will ich vielleicht auch dieselbe Chat-Komponente zweimal einbetten. Ja, vielleicht auch verschiedene Chats. Ja, und damit das konfliktfrei geht, kennen wir alle ein bisschen die objektorientierte Programmierung. Das ist der Klassiker dazu.

Also jede Komponente hat praktisch an einer Property einen Konstruktor, wo man CCM-Instanzen daraus erzeugen kann. Und jeder Instanz kann man dann sozusagen einen eigenen Webseitenbereich geben, den es dann unabhängig von anderen Instanzen gestaltet. Ja, also einfach für die mehrfache Einbettbarkeit gibt es deswegen nochmal CCM-Instanzen, die man aus einer Komponente

erzeugen kann. Ja, das heißt, in Render steckt alles auf einmal drin. Da wird automatisch die Komponente geladen, registriert, eine Instanz aus der Komponente erstellt, der der Webseitenbereich zugewiesen und dann für diese Instanz die Render-Methode aufgerufen. Das ist alles in einem. Deswegen ist das der Befehl, den man für die reine Verwendung

nur kennen muss. CCM-Store und CCM-Data-Set. Da geht es da um die Datenhaltung. Das kommt später. Ja, CCM-Helper hat noch ein paar nützliche Hilfsfunktionen für Komponentenentwickler. Ja, aber das sind so die Schnittstellen und mehr gibt es nicht. Ja, es gibt auch eine API,

die ich schon erstellt habe, wo man eben zu all diesen ja, Schnittstellen eben auch Beispiele findet, wie man es aufrufen kann und eine Beschreibung findet. Die ist noch nicht das weisheitsletzter Schluss, aber sie hat schon ausgereicht, dass hier in Web-Engineering schon Studierende in der Lage waren, so erste eigene Komponenten zu schreiben und das eben nutzen zu können. Das ist hier im Framework.

Ja, wie geht denn nun konkret die Einbettung? Wir schauen mal erstmal hier unten hin. Hier ist der Renderbefehl. Hab ich ja gesagt, das ist so die Abkürzung für alles. Hier übergibt man die Komponente, genauer gesagt die URL, wo die Komponente im Internet liegt. Mehr braucht man nicht. Das ist sozusagen der Einbettungscode.

Dann die Konfiguration kann man noch angeben. In dem Fall wird ja einfach der Webseitenbereich festgelegt. Also ein HTML-Tag mit der ID-Container, wie wir es von Jake Query kennen. Und noch ein Callback, da kann man dann, der wird dann erst aufgerufen, wenn der Webseitenbereich komplett fertig gestaltet ist, wenn es der Webseiten-

Komponentenentwickler vernünftig gemacht hat. Und dann kann man sagen, was danach noch weiter passieren soll. So, das ist der kürzeste Weg. Hier sieht man es noch mal ganz ausführlich. Ich kann es auch von Hand anders steuern, sage ich mal. Ich kann auch erst mal sagen, Sie sehen ein Komponent, die URL angeben. Dann kriege ich die Komponente als schlesen Objekt zurück,

die jetzt im Framework registriert ist. Dann kann ich selber von dieser Komponente sozusagen selber steuern, wie ich Instanzen daraus erzeuge, die getrennte Webseitenbereich unabhängig verwalten können. Also kann ja eine Instanz daraus erzeugen, der die Konfigurationen geben, kriegt die Instanz zurück und kann für diese Instanz selber Render aufrufen. Das ist praktisch alles, was hier

implizit drin steht. Oder noch die Zwischenstufe, die es hier im Instanz, wo automatisch die Komponente geladen, registriert wird, Instanz daraus erzeugt wird. Und dann kann ich hier noch von Hand die Render aufrufen. Also kurz gesagt, das sind so die Detailgrade, wie man das Einbetten noch selbst steuern kann. Dann die Frage,

wie finde ich dann CCM-Komponenten? Die sind ja irgendwie überall, aber auch irgendwie nirgendwo. Wo finde ich die jetzt konkret? Dafür gibt es dann eben sogenannte CCM-Komponenten, Marktplätze, wobei ich einen ersten jetzt mal prototypisch umgesetzt habe, um es mal einfach zu veranschaulichen. In so einem Marktplatz kann man dann seine eigene Komponente veröffentlichen.

Das können Sie auch, falls Sie zum Workshop kommen, dann auch mal ausprobieren, eine eigene Komponente in der ersten zu schreiben und dann mal einen Marktplatz durchzuladen. Man findet das Appstack oder eine ausführliche Beschreibung der Komponente, die API, ein Doku-Link, wo drin steht vor allem, wie man die Komponente konfigurieren und anpassen kann.

Ja, eben die URL der Komponente, was ja quasi der Einbettungscode ist. Eine Demo, wo man einfach mit der Standard-Konfiguration der Komponente mal sieht, wie das so aussieht. Und ja, das nenne ich immer Factory, wo man im Marktplatz auch mit der Konfiguration eine Komponente, die man konkret sehen kann und die Werte davon verändern kann und mal sehen kann, wie das dann aussieht,

wenn ich das und das verändere. Ja, und was auch ganz witzig ist, der Marktplatz ist auch selber eine Komponente. Das heißt, ich könnte jeden als auch in jede Webseite einbetten und zum Beispiel dann irgendwie per Dreck-and-Drop-Komponenten, die da aufgeführt sind, dann in die Webseite reinziehen, wo ich gerade bin. Und dann irgendwie ist das da plötzlich da drin.

Kann ich auch gleich vorführen, wenn man das mal sehen möchte. Genau, jetzt hier noch der Link zum Marktplatz. Ich mache mal ganz kurz auf. Ja, bloß mal grob zu sehen, wie es aussieht. Hier hat man eben die Komponenten. Was blöd, dass das an der Seite abgeschnitten ist. Muss ich das mal kleiner machen.

Ja, hier hat man, wenn man eine Komponente, kann man hier veröffentlichen, die nötigen Dinge eintragen. Dann kann dann das, was man veröffentlicht hat, landet erst mal in dieser Sektion, was noch nicht qualitätsgeprüft ist. Und alle, die ich sozusagen mit gutem Gewissen dann wo ich geprüft habe, ob das wirklich gute Komponenten sind,

dann die landen dann hier oben. Ja, also eine Komponente, da findet man die Eckdaten eben dazu, die UL, den Einbettungscode, die API. Und ja, kann die auch bewerten. Hat einen, ja, kriegt eine Demo hier. Das ist die Standardkonfiguration. Da wird so ein Standardchat eingebettet.

Und die Konfiguration haben wir hier. Das ist so die Factory, die dahinter steckt. Hier sieht man die Konfiguration der Komponente und kann hier auf Render drücken und sehen, wie es aussieht. Das ist die Standardkonfiguration. Ich kann hier zum Beispiel was verändern, zum Beispiel sagen, ich will einen anderen Datensatz verwenden, also einen anderen Chatverlauf. Dann habe ich sozusagen einen anderen Chat.

Test zwei, Render und dann habe ich hier einen anderen Chat. Also ich kann mit der Konfiguration rumspielen. Factories kann es auch verschiedene geben. Hier ist noch eine andere Factory, wo man das jetzt mehr so wie ein Entwickler so einfach mal so rumspielen möchte, so einfach als Stelsen-Objekt editieren kann und dann mal einander anlassen kann.

Okay, ja, so viel zum Marktplatz. Ups, gehe ich mal zurück. Ja, ich denke, wir haben die Einwirkbarkeit erschöpfend uns angeschaut. Kommen wir zur Modularität.

Ja, bei der Modularität geht es ja darum, wie wir Komponenten in anderen Komponenten wiederverwenden können. Und ja, dafür schauen wir uns am besten einmal kurz an, wie konkret der Code einer Komponente aussieht. Eine Komponente ist eine kleine JavaScript-Datei, nur eine Datei, nichts weiter.

Es blöd, dass das immer abgeschnitten ist hier. Das ist ja wirklich sehr... Ne, so kann man es nicht gut lesen. Diese Beam-Auflösung ist furchtbar. Ja, ich versuche es trotzdem so. Ja, also eine JavaScript-Datei,

eine Komponente besteht eigentlich nur aus einer einzigen Anweisung. Hier steht dann CCM-Punkt-Component, sozusagen. Also da wird eigentlich nur, wenn man die JavaScript-Datei lädt, automatisch dieser Befehl zum Registrieren im Framework aufgerufen. Diesen Befehl, CCM-Component, wird das die Komponente übergeben in Form eines JSON-Objekts.

Und in diesem JSON-Objekt kann man sozusagen jetzt seine Komponente gestalten und definieren als Komponentenentwickler. So, jede Komponente hat einen eindeutigen Namen, den man vergeben kann. Ja, das ist ein nicht zu unterschätzender Herausforderung. Herausforderung, da auch einen kurzen, prägnanten Namen zu wählen, der noch nicht

von jemandem anders verwendet wurde. Spätestens, wenn man so einen Marktplatz hochlädt, sagt dann der Marktplatz, den gibt es schon, da muss man sich einen anderen nehmen. Dann gibt es hier die Config, das ist die Standard-Konfiguration. Wenn man nichts anderes sagt, nur Render und die URL übergibt, dann wird praktisch die Komponente mit dieser Standard-Konfiguration eingebettet. Ja, und hier kann man, und jeder Property

in dieser Konfiguration wird auch später der Instanz gegeben. Das ist dann praktisch eine Instanzvariable dieser Instanz später automatisch. Ja, also meine CCM-Instanz, wenn ich einbitte, hat später automatisch die Variable Key mit dem Wert Demo. Und hier kann ich eben auch die Abhängigkeiten zu anderen Ressourcen wie Daten oder CSS und ähnlichem auch eben angeben.

Die Abhängigkeiten werden immer in Form eines Arrays angegeben. Ja, das nenne ich immer CCM Action Data. Ja, also hier zum Beispiel die Abhängigkeit zu HTML Templates. Das ist hier so eine eigene Form, wie man bei mir auch HTML Templates unterlegen kann. Da gibt es ja die verschiedensten in der Welt.

Neuerdings auch ein Template-Tag. Ich habe hier noch eine eigene Variante an. Oder hier das Layout für die Komponente. Und jede Property ist auch grundsätzlich immer austauschbar. Also alles, was hier ist, alle Ressourcen, die das irgendwie verwendet, die kann man auch immer, wenn man die verwendet, die Komponente austauschen gegen was anderes. Also das Layout beispielsweise. Ja, hier unten kommt dann

Instance heißt das eigentlich. Also hier ist dann der Bauplan für die CCM-Instanzen in der Komponente drin, wie ich es gesagt habe. Und hier kann man dann die CCM-Instanzen gestalten. Ja, und hier kommt man zu typischen Dingen bei der Komponentenorientierung. Ja, es gibt eine Init, eine Ready. Also hier kann man einmalig was hinterlegen,

was passieren soll, wenn das initialisiert wird, die Komponente, wenn alle Abhängigkeiten aufgelöst sind und alle abhängigen Ressourcen auch initialisiert sind, gibt es nochmal einen Ready-Aufruf. Was will man dann tun einmalig? Die wichtigste ist aber die Render. Die sind optional. Die Render ist das, was eben aufgerufen wird, wenn eingebettet wird. Die erste Anweisung in der Renderfunktion ist immer

CCM-Helper-Element. Das ist eine Hilfsfunktion, die bereitet den Webseitenbereich quasi vor. Die macht den erstmal leer, schmeißt alle bisherigen Inhalte raus, legt einen inneren Webseitenbereich an, der schon über vorgedefinierte HTML-ID und Klassen verfügt. Und den kriegt man hier als jQuery-Objekt zurück und kann ab jetzt anfangen,

den Webseitenbereich zu gestalten. Ab hier macht man das, was man sonst auch immer tut. Ja, da schränkt CCM nichts ein. Es wird einfach nur als Komponente verpackt, damit es überall einbettbar ist. Ja, zum Beispiel im einfachsten Fall gibt man Hallo Welt im Webseitenbereich aus. Ja, und noch den Choreweg nicht vergessen. Ja, also der grundlegende Aufbau einer Komponente.

Ja, wie kann ich jetzt Komposition erreichen? Ja, sagen wir, ich will jetzt in meinem Webseitenbereich, wenn ich was einbette, zwei Unter-Webseitenbereiche haben, hier noch zwei innere DIVs, die ich hier anlege und in den DIV A will ich jetzt meine Blank Komponente, das ist einfach Hallo Welt Komponente einbetten

und in den Webseitenbereich B die Chat Komponente einbetten. So, dann habe ich in der Konfig formuliere ich die beiden Abhängigkeiten zu diesen beiden anderen Komponenten mit CCM Instance. Das heißt, diese Abhängigkeiten werden dann beim Einbetten automatisch von CCM aufgelöst, auch Rekursiv und Asynchron mit einem Drum und Dran, auch ohne, dass was

doppelt geladen wird, alles geregelt. Am Ende ist dann in dieser, hat die Instanz da eine Instanzvariable Instance A, wo dann die Instanz sozusagen drin ist, aufgelöst. Ja, und hier in der Indie können wir noch den Webseitenbereich für diese CCM Instanzen festlegen. Ja, die kriegt den Webseitenbereich A, die den Webseitenbereich B

und müssen hier dann nur noch Render für die Instanzen aufrufen. Das ist die einfachste Minimalbeispiel zur Wiederverwendung anderer Komponenten. Mehr braucht man nicht wissen, dann kann man das, ja, das ist alles, was man an Werkzeug braucht. Ja, genau, diese Beispiele gibt es auch alle in meinem Repository, CCM Developer,

wo man auch reinschauen kann. Da kann man das auschecken und genau ausprobieren und verändern. Ja, die Komposition von CCM Komponenten, noch ein anderes Beispiel. Das ist noch die andere Variante, wenn man noch nicht weiß, wie oft man eine andere Komponente wiederverwenden will. Also beispielsweise, wenn ich eine Kommentierung habe

und ich will, dass man jeden Kommentar raten kann. Wenn ich fünf Kommentare habe, brauche ich ja fünf Rating Instanzen, also fünf mal die Rating Komponente eingebettet. Wenn ich zehn habe, brauche ich zehn. Ja, und die Komponente zeigt das mal. Multi-Blank, die soll jetzt, diese Blank Komponente, hier kann man einstellen wie oft, sagen wir mal fünf Mal einbetten.

Das heißt, man macht diesmal eine Abhängigkeit, dass man nicht eine bestimmt konkrete Instanz aus der Komponente haben will, sondern die Komponente selbst. Und dann kann man selber steuern, wie viele Instanzen man daraus erzeugt für verschiedene Webseitenbereiche. Genau, hier sieht das dann so aus, dass man erst mal den Webseitenbereich leer macht, dann macht man die Vorschleife, wie oft ich einbetten will.

Und jedes Mal vergebe ich hier jetzt eine ID für den Webseitenbereich, den diese Komponente bekommt. Ja, und render die in diesem Webseitenbereich. Das Besondere ist, vielleicht als kleiner Hinweis, IDs ist ja so eine Sache, wenn man jetzt, man weiß ja noch nicht, wo später eine Komponente eingebettet wird in welcher Webseite

und welche IDs, die eindeutig sein müssen, schon vergeben sind. Es gibt aber die Möglichkeit, dass man HTML-IDs auch dynamisch zur Laufzeit vergeben kann. Weil jede CCM-Instanz hat einen eindeutigen Index, der ist webseitenweit eindeutig. Und wenn man da noch irgendwas dranhängt, kann man sozusagen auch dynamische IDs vergeben.

Okay, ja, wer noch genaueres wissen will, dazu ist ja der Workshop nacheinander. Ja, dann mal drei Beispiele für komplexe Web-Anwendungen, die man jetzt mal wirklich aus Komponenten zusammengesetzt hat. Ja, also ich bin ja jetzt hier im E-Learning-Kontext an der Hochschule. Deswegen ist das meiste

auch auf Lehrveranstaltungen bezogen. Also für die KLR, Kosten-Leistungs-Rechnung- Veranstaltung von Herrn Bonnen letztes Semester hat man eine mobile Web-App als Komponente entwickelt für Web-Engineering. Und ja, hier mal ein Beispiel, was außerhalb der Hochschule liegt. Da ist ein Winzer in Bonnen, der macht ein jährliches Winzerevent, wo alle Winzer kommen und der wollte eine App haben,

wo eben ja jeder Winzer vom anderen Winzer die Weingüter so eine Beschreibung findet, die Weine bestellen kann und so weiter. Ja, das haben zwei Studenten hier für ihn umgesetzt. Ich klicke mal eine nur an. Ja, jetzt nehmen wir mal Web-Engineering. Ja, man sieht, das ist eine Menü-Komponente

mit einem bestimmten Layout. Ja, hier ist zum Beispiel die News-Komponente wiederverwendet. Ach, sieht man wieder nicht, wa? Jetzt sieht man es. Ja, hier News. Also hier steckt die News-Komponente dahinter, eine Chat-Komponente, eine Forumskomponente, wo man hier wie bei Stack Exchange Frage antworten hinterlegen kann,

die beste Antwort, wann halt nach oben und so weiter. Ja, Phase 1 zum Beispiel, dann gibt es hier auch Übungen, Quizzes, da steckt dann eine Quiz-Komponente dahinter und so weiter. Das ist übrigens auch wieder die Menü-Komponente, nur halt einfach mit einem anderen Layout, eine andere Konfiguration. Dann sieht das statt, so mit solchen Icons eben so aus.

Also kann man eben, hier sieht man auch ein bisschen, dass man die Flexibel wiederverwenden kann. Ja, ich denke, das eine Beispiel reicht. So, ich gehe wieder rein. Ja, also wie gesagt, drei Beispiele, wo man mal komplexere Web-Anwendungen sehen kann. Und diese ganzen Anwendungen

sind selber auch wieder Komponenten. Das heißt, diese Apps konnten wir zum Beispiel auch in layer integrieren. Die konnten die über layer nutzen oder auch über ihr Handy. Die konnten sich auf dem Homescreen legen. Jede Komponente ist auch gleichzeitig eine mobile Web-App. Kann ich später noch mal drauf eingehen, wenn ihr wollt. Und ja, das wär's zur Modularität.

Ja, dann kommen wir zur Datenhaltung, den letzten Bereich. Ja, man kann in CCM bei einer Komponente sagen, dass ich einen Datenspeicher, CCM-Datenspeicher nutzen möchte. Ein CCM-Datenspeicher ist, ja, der kann Datensätze verwalten.

Also wie ihr das kennt, mit Codecrate, read, update, delete, wie man es aus Datenbanken kennt. Und der kann die Datensätze auf drei verschiedenen Datenebenen verwalten. Dateneben, zwischen denen man Flexibel wählen kann und auch hin und her schalten kann. Die Ebene eins ist einfach, da werden die Datensätze in einem lokalen JavaScript-Objekt verwaltet, sind flüchtige Daten. Nach dem Reload sind die wieder weg.

Nach dem Neuladen der Seite sind die weg. Ebene zwei, da werden die Datensätze in der Index-DB automatisch verwaltet. Also für Offline-Funktionalität besonders interessant. Nach dem Neuladen der Webseite sind die noch da. Oder der Klassiker-Ebene, die dritte Ebene, wo man eben noch zusätzlich eine Server-URL angibt, an die die Daten weitergereicht werden, wo dann hier eine Datenbank dahinter steckt.

Wo die Daten in der Server-seitigen Datenbank verwaltet werden. Wobei die Server-Seite austauschbar ist. Auch die Datenbank, da könnt ihr eure eigene Datenbank hinterlegen, wenn ihr eine passende Schnittstelle anbietet dafür, für CCN, die kompatibel ist. Oder auch ein Cloud-Service für CCN-Datenhaltung nutzen, der irgendwo angeboten wird. Da ist man völlig frei.

Ja, und hier kann man dann eben auch, die Daten sind dauerhaft gespeichert. Man kann auch an einen anderen Rechner gehen und eben von da aus weitermachen. Ja, man hat hier noch die zusätzliche Möglichkeit, das verwendete Protokoll sozusagen noch zu ändern. Also man könnte auch das WebSocket-Protokoll nehmen. Dann ist man ja echtzeitfähig. Man muss dann nur noch

in seinem Datenspeicher eine On-Change-Funktion angeben. Mehr muss man nicht tun. Diese On-Change-Funktion werden dann neu... Muss was trinken. Trink gleich was. Diese On-Change-Funktion werden dann automatisch, wenn sich ein Datensatz in der Datenbank ändert, wird der Client automatisch informiert. Die On-Change aufgerufen und man kann entscheiden, wie verändere ich meinen Webseitenbereich jetzt

mit diesen neuen Daten. Ja, und ist dann schon echtzeitfähig. Ja, ich blende schon mal das Beispiel ein, wo man mal ein einfaches Code, Create, Read, Update, Delet sieht. Sieht, wie man Datenspeicher verwenden kann.

Viel besser. Also hier der Aufruf siehst du hier im Store. Wenn man da gar nichts übergibt, ist das automatisch Daten-Ebene 1, also ein lokaler Datenspeicher, wo der auch leer ist. Also ein leerer Speicher einfach. Ja, aber hier mache ich mal Create.

Es gibt nur Set, Get und Del. Ja, Set. Da erstelle ich einen neuen Datensatz, weil den Key gibt es noch nicht in den Datenspeicher. Dann weiß er automatisch, es wird ein neuer Datensatz erstellt. Ja, mit Get kann ich abfragen. Den Datensatz übergebe ich nur den Key und mit Set im gleichen Befehl. Wenn der Datensatz schon existiert, ist es quasi ein Update.

Dann wird hier der Wert durch Foo ersetzt und noch löschen eben Test. Ja, und das Besondere, was ich auch hervorheben will, man muss nur Get, Set, Del kennen. Und dann ist, mehr muss man nicht wissen. Und man, genau, jetzt, wie kann man noch die Datenebene wählen? Ja, okay, man kann es gut genug sehen.

Ich kann, wenn ich den Datenebene eins wähle, noch ein Fazit in einer JSON-Datei angeben, wo halt Datensätze drin sind, mit denen der Datenspeicher direkt initialisiert wird, damit er nicht am Anfang leer ist. Wenn ich hier die Index-DB nehmen möchte, muss ich nur sagen, welchen Object Store in dieser Datenbank, also bei SQL wäre es der Tabellenname, ja, ähnlich,

genau, nur angeben muss. Und dann wird das da drin, in diesem Object Store verwaltet. Und wenn ich die Datenebene drei, die Server-Seite nehmen möchte, dann muss ich die URL zu einer Server-Schnittstelle nur angeben. Und dann weiß CCM Bescheid und macht alles. Man braucht nur Get, Set, Del praktisch in seiner Anwendung zu benutzen. Ja, und das Protokoll wählt man einfach dadurch,

dass man hier eben entweder HTTP oder HTTPS oder VS nimmt, dann merkt CCM automatisch, ah, okay, jetzt ist WebSocket-Protokoll oder eben HTTP. Genau, gibt es auch in meinem Repositorien-Wiki, wo es auch eine Wiki-Seite zur Datenhaltung gibt, wenn man noch mehr wissen möchte.

Ja, also zusammengefasst, Verwaltung von Datensätzen auf drei wählbaren Datenebenen, Schlange, Schnittstelle, Get, Set, Del. Man kann die Datenebene beliebig wechseln. Später gibt es auch Datenhaltungsstrategien, wo dann automatisch gewechselt wird. Also wenn man kein Internet hat, wird automatisch auf eben zwei Offline-Modus sozusagen gewechselt. Und später, wenn es wieder da ist, auf magische Weise wieder mit online synchronisiert.

Das kommt dabei erst mal. Jetzt kann man nur fest eine Datenebene wählen. Die Magie muss ich erst noch zustande bringen. Okay, genau. Und das Besondere war, man muss mal eine Onchange festlegen und ist dann schon echtzeitfähig. Es ist selten so einfach, echtzeitfähig zu sein. Im Workshop werden wir es auch mal machen. Also von Null an eine Komponente schreiben,

die auch dann Echtzeit einfach mal drin hat und das mal ausprobieren. Ja, Data Caching findet auch statt, dass halt nichts doppelt geladen wird, wenn man einen Datensatz zweimal anfordert. Ja, Sicherheitskonzepte gibt es auch mit Rechteverwaltung. Würde ich gerne noch mehr drüber reden. Ja, sonst fragt mich später nochmal die Zeit drängt.

Austauschbare Serverseite, wie gesagt. Ihr könnt auch einen eigenen Server nehmen oder irgendeinen bestehenden Anbieter nutzen. Ja, und durch den Einsatz vom JSON Format. Also kein XML oder so für den Datenaustauschen, immer JSON. Ja, das war's. Ich hoffe, ich konnte die drei Kernelemente mal richtig rüberbringen.

Und ja, vielleicht jetzt ist es interessanter, das zu sagen. Ja, hat den Ursprung eben, wie gesagt, in meiner Master-Sieses gehabt. Da ist die Version 1.0 daraus entstanden. Ich habe es dann eben in meinem Forschungsprojekt beziehungsweise Verbundprojekt, wo ich jetzt arbeite, dann eben weiterentwickeln dürfen.

Und ja, bis heute eben, jetzt stehe ich momentan bei 661. Ja, Voraussetzung, moderner Browser mit Internetzugang, aktivierten JavaScript, das Übliche, schätze ich mal, für Web-Entwickler. Ja, und JQuery wird aber auch automatisch eingebunden, wenn es noch nicht eingebunden ist. Aber diese Abhängigkeit, die habe ich einfach mal drin, weil es für mich wie die Luft zum Atmen war. Ich hatte das von Anfang an drin, aber ich habe inzwischen gemerkt,

so viel nutze ich es eigentlich gar nicht, nur für Ajax-Calls und ähnliches. Wenn ich das irgendwie anders mache, dann wird das jetzt auch bald rausfliegen, diese Abhängigkeit. Ja, Lizenzbedingungen. Wir sind auf der Frostcon. Alle würden es freuen. Für die Komponenten kann man beliebige Lizenzen vergeben. Das ist praktisch eure Sache, wenn ihr Komponenten schreibt. Da mache ich keine Einschränkungen.

Und das CCM-Framework an sich ist auch, hurra, einfach freie Software, MIT-Lizenz. Da kann jeder von euch mitwirken, der möchte und ist auch nicht selbstverständlich. Das habe ich eigentlich erst so vor zwei Tagen wirklich mich durchgehoben, ist auch diesen letzten Schritt zu tun. Aber jetzt ist es so.

Genau, hier noch die JIT-Hub-Links. Ist aber auch alles auf dem Frostcon-Seite, glaube ich, auch verlinkt. Und ja, wie viel habe ich noch? Fünf Minuten. Genau, so wir können auch einen kurzen Blick drauf werfen,

so wie ich es auch selber historisch gemacht habe, was eigentlich jetzt so der Rest der Welt so mit Webkomponenten macht. Vielleicht habe ich das sogar noch. Ja, also Webkomponenten ist schon seit 2011, wird an einem W3C-Standard dafür gearbeitet, ist also nichts Neues. Also auch ohne mein Zutun kommt das so oder so. Webkomponenten sind so einer der großen nächsten Schritte im Internet.

Damit werden wir alle konfrontiert sein, so oder so. Und die Frage ist jetzt, was verstehen Google und Co, die großen, die jetzt diesen Standard da ausbaldövern, eben jetzt unter diesen Webkomponenten. Da gibt es vier Sachen, aus denen sich das dann insgesamt ergibt. Einmal gibt es Custom Elements. Das heißt schlichtweg, dass man jetzt ab jetzt auch eigene Text definieren kann.

Also nicht nur diese vorgefertigten Texts hat, die der Brose so hat, die wir alle kennen, diff und sonst was, sondern jetzt kann man auch eigene machen. Ja, man kann auch eigene Attribute noch hinzufügen zu bestehenden Texts, also um diese erweitern und auch sagen, was für eine Funktionalität mit JavaScript dahintersteckt. Wenn ich dieses Attribut so angebe, QR-Code,

dann hat das auch irgendeine Semantik, ja, irgendeine Bedeutung dann. Das ist die eine Sache, die kommen wird. Dann der Shadow-Dom, auf den warte ich auch schon sehr gespannt. Wer ihn noch nicht kennt, also das ist ein zusätzlicher Dombaum, den man in den normalen Dom einhängen kann, wo aber alles, was da drin ist, gekapselt ist.

Also CSS von außen greift nicht und JavaScript von außen greift auch nicht. Das ist eine sehr feine Sache. Also hier sieht man das Beispiel. Ich habe hier Shadow-Dom und hier ist was drin, wo was fett ist. Hier ist auch was drin, wo was fett ist. Ich mache von außen CSS, alles was fett ist rot. Und siehe da im Shadow-Dom greift das CSS nicht nur außerhalb.

Das ist für mich sehr genial, weil ich habe immer noch das Problem, wenn ich Komponenten in fremde Webseiten wie Tagesschau einbette, dann hat Tagesschau natürlich auch schon CSS. Und das zerhaut mir das CSS meiner Komponente. Aber in Zukunft kann ich einfach sagen, eine Komponente legt sich immer einen Shadow-Dom an und hat dann ihr CSS schön gekapselt in ihrem eigenen Raum. Und der Rest der Webseite kann nichts daran ändern.

Also das CSS nicht durcheinander bringen. Ja, dann HTML-Templates. Da gibt es eben verschiedenste Möglichkeiten. Dann wird jetzt noch so ein Template-Tag eingeführt, der auch in der Webseite nicht angezeigt wird, wo man eben seine HTML-Templates vergeben kann. Auch dynamisch Platzhalter dann ersetzen kann. Also eine komfortable Möglichkeit, die endlich mal kommt.

Und wie gesagt, in CCM biete ich auch noch eine eigene Variante an, wie man HTML-Templates ja hinterlegen kann. Nämlich in einem Datenspeicher im JSON-Format hat dann auch die Möglichkeit, Datenirgende 3 zu wählen. Kann HTML-Templates dadurch auch in der gesamten Welt, sage ich mal, wiederverwenden, wenn man wollte. Und ist nicht darauf beschränkt, dass dieses Template

nur in dieser Webseite, wo der Text steht, wiederverwendet werden kann. Sondern kann theoretisch weltweit wiederverwendet werden. Ja, dann der Import. Weiß nicht, ob ich das noch schaffe. Wahrscheinlich schon am Ende. Also am Ende soll, hier kommt eigentlich alles zusammen. Es gibt noch den HTML-Import, wo man HTML-Seiten dann in andere Seiten importieren kann.

Jetzt kommt auch so ein bisschen das mit Web-Components raus, wie die sich das so denken. Ihr kennt jQuery-UI, diese Tabs. Ja, die meisten kennen das vielleicht. Ist so was Typisches, was man gerne in seiner eigenen Webseite wiederverwendet. Was müsst ihr normalerweise machen? Eure HTML-Seite müsst ihr jQuery einbinden, jQuery-UI einbinden. Ihr müsst die ganzen CSS-Sachen einbinden.

Ihr müsst jetzt auch diesen Tag, den man ja jetzt haben soll, den müsst ihr dann jetzt erstmal anlegen, sozusagen, dass es diesen Tag gibt für die Web-Komponente, die man einfach verwenden soll. Diesen ganzen, klatterer Datsch lagert man eine HTML-Seite aus und verlinkt die bloß. Und am Ende hat der Nutzer auch bloß das machen und hat dann jetzt den Tag zur Verfügung,

gibt noch das Theme an über die Attribute, sozusagen, konfiguriert sich das noch und hat dann so seinen Tabs. Das ist so das von Web-Components, wie die sich das vorstellen. Ja, bei CCM gibt es hier natürlich die Möglichkeit, dass das hier wegfällt. Dann ist einfach per se, macht CCM das schon für euch. Wenn ihr eine Komponente einholt in eine Webseite,

wird automatisch von CCM schon gemacht, dass es so einen Tag gibt für die Komponente. CCM minus Quiz oder so. Und wo man dann über die Attribute auch gleich den Konfig steuern kann und dann kann man das direkt nahtlos verwenden und braucht dieses Import nicht. Ja, dieses Import ist für mich so das, wo man diese Komplexitätssachen, die man bisher immer macht, nur halt auslagert.

Okay, ja, sind wir schon komponentenorientiert? Ja, der Chrome kann schon alle vier Bereiche abdecken. Aber die anderen Broser sind halt noch ein bisschen hinterher. Die kommen erst noch. Aber mit Polyfills kann man eben alles entsprechend schon heutzutage nachrüsten, die anderen Broser. Und es gibt dann entsprechende Frameworks von Google und Microsoft und Co.,

die dann eben schon auf Basis dieser Sachen dann eben schon reine Komponenten frameworks definieren. Gut, ich hab's noch geschafft. Punktleitungen, okay.

Ja genau, das hier, dass man das hier machen kann.

Ach so. Ja genau, also die Frage war, hier bei Firefox, das scheint ja nicht so richtig, noch nicht unterstützt zu sein. Was ist das denn genau, was da noch nicht unterstützt ist? Ja eben genau das hier. Ja also, dass man eben HTML-Seiten

sozusagen reinholen kann, verlinken kann. Nee, nee, das hat mit Shadowdome nichts zu tun. Also hier steckt natürlich der Shadowdome bei Webcomponents auch dahinter. Ja, also diese ganzen UI-Sachen, diese Texte, die es normalerweise hat,

ja, die sind alle im Shadowdome verborgen und man hat nach außen hin im richtigen Dom nur das noch und alles andere ist versteckt. Weil das ist ja auch nur unnötig und ja, nach dem Webkomponentenmodell. Okay, ja genau, das geht ja alles.

Also hier kann ich Instanzen ja eben reinholen

und dann habe ich die ja als Instanzvariable und kann eben auch mit den, so kommunizieren auf die zugreifen. Es gibt auch immer aus einer komplexen Web-Anwendung, sage ich mal, wie diese Fidilär-Veranstaltung. Da gibt es ja verschiedene Abhängigkeiten, auch Unterabhängigkeiten und da entsteht ja sozusagen eine Baumstruktur. Das nenne ich immerhin CCM-Kontext.

Und innerhalb dieses Kontext, da gibt es auch Parent-Beziehungen, dass Instanz auch die, die sie einbindet, dann praktisch kennt. Und da kann man auch innerhalb dieses Kontext-Trees, sage ich mal, navigieren und dann auch darauf zugreifen. Aber kommunizieren können die generell auch dadurch, dass die den gleichen CCM-Datenspeicher verwenden. Das ist eigentlich das Üblichste.

So kann man auch Workflows dann machen, dass die eine Komponente was macht und die andere Komponente übernimmt dann. Das ist alles ja mit vorgesehen. Okay. Vielleicht noch den Hinweis auf den Workshop? Genau. Nachher ist noch ein 3-Stunden-Workshop. Wer irgendwie Lust hat, da können wir alles irgendwie noch vertiefen. Alle Bereiche, die euch irgendwie noch interessieren.

Genau, wo wir auch mal eine Komponente von Null an mal entwickeln, eine einfache. Und dann könnt ihr selber mal ausprobieren und auch was im Marktplatz hochladen, wenn ihr wollt. Wie der Uhrzeitplatz? Genau. 13.30 Uhr in C 115.

Genau. Alles klar. Richtig. Die Bibliothek ist genauso.

Die will CCM jetzt ja einsetzen, aber die will natürlich nicht davon abhängig sein, ob eine Ressource da irgendwo da draußen noch wirklich noch liegt. Man hat immer die Chance, erst recht, wenn die MIT-Lizenz sind. Man hat die URL einer Komponente. Ach, gefällt mir. Ich will nicht diese... Dann lade ich mir die runter, pack die auf meinen eigenen Server und kann die da lokal weiter nutzen. Also man kann seine Insellösung vollkommen machen. Man kann zwar cross-domain maximal verteilt sein,

aber man muss es nicht. Auch das CCM-Framework. Runterladen, eigenen Server, selbst wenn CCM ausstirbt, bei dir läuft's noch.

Versionierung ist aber richtig die Beispiele, die ich gezeigt habe. Die basieren auf der Latest-Version einer Komponente, aber es gibt auch Versionierungen dabei. Wo haben wir es denn hier mal? Hier beim Namen.

Man kann auch hier Version-Doppelpunkt und dann ein Array 1,0,2 oder so angeben und dann ist das versioniert. Wenn man nichts angibt, ist das automatisch die Latest sozusagen. Ist aber drin das Konzept der Versionierung. Es können auch verschiedene Versionen der gleichen Komponente in derselben Webseite benutzt werden,

ohne dass es Konflikte gibt. Das ist alles namens Traumtechnisch sauber getrennt. Genau, also für die Benutzer-Authentifizierung war die Frage. Wir haben auch eine Komponente.

Ja, hier sieht man sie so ein bisschen. Also ohne den Pfad dazu. CCM-User.js, die macht die Authentifikation zum Beispiel. Das ist auch nicht neu erfinden, nicht immer wieder neu implementieren, soll ich ja sagen, innen verfahren, sondern bestehende Komponente nutzen. Wir haben allerdings jetzt nur den Elder-Block-Innen hier, also für den Fachbereich, für unsere Anwendung das gebaut, dass sich Studierende mit ihrem Fachhochschul-Account

anmelden können. Und es gibt auch einen Gastmodus, wo man einfach mit beliebigen Benutzernamen, Passwort sich anmelden kann, aber mehr unterstützt die bisher nicht. Für den Marktplatz zum Beispiel habe ich jetzt mal heute ausnahmsweise mal den Gastmodus, Block-In-Modus genommen, dass ihr einfach irgendwie die Möglichkeit habt, da was zu machen.

Ich denke, man selber hat es gesagt, steht jetzt unter der MIT-Skripto-Wahl, wenn ich es richtig verstanden habe, dass man schon eine große Menge an fertigen Komponenten, die jedem Basis funktionieren, zur Verfügung stellen, bestehen die auch alle unter der MIT? Bisher habe ich alle unter der MIT.

Also jeder ist frei, auch was Kommerzielles zu machen, aber bisher alles. Also ich strebe an, möglichst alles MIT zu machen. Also alle Komponenten, die man in meinen Repositories findet, sind MIT. Gibt es auch einen? Nee, gibt keine Ausnahme. Eine Frage. Du hast ja jetzt schon gesagt,

dass Komponenten sich immer mehr durchdrehen und werden in die Haushalt von euch halten. Ich nenne Polymer so ein bisschen, die halt immer sagen, wir arbeiten solange mit Polyfills, bis wir natürlich Unterstützung haben. Dann gehen eigentlich auch immer in die Richtung, die entsprechenden Funktionen dann natürlich unterstützt zu haben.

Richtig. Würdest du jetzt auch sagen, ist es absehbar, dass die, sie im eigenen Templates aussterben, weil die Webkomponent-Templates sich immer weiter durchsetzen und es immer noch fungieren? Ist es schon austauschbar? Das kann ich halt momentan nicht einschätzen. Das kann man auch momentan nicht einschätzen.

Also ich sehe es aber auch nicht als Gegensatz. Ich sehe es eher so, dass sich das sogar gegenseitig beflügelt, mit dem, was Polymer so tut. Weil... Wenn ich in den U-Brunden bereiche, in der Konflikt-ADML,

Ach so. Dass man jetzt praktisch die W3C Webkomponent hier als Abhängigkeit wiederverwenden kann. Das steht auf meiner Liste. Das will ich auch ermöglichen. Das schaue ich mir aber noch an. Aber das ist natürlich das, was ich anstrebe.

Hab ich bisher noch nicht auf dem Radar. Also TypeScript kenne ich schon ein bisschen. Also es spricht nichts dagegen,

so etwas auch in TypeScript zu machen. Das schließt sich ja nicht aus. CCM schränkt wie gesagt nichts ein. Ja, also ich glaube, da ist ja jeder frei, ob er TypeScript nimmt für seine Komponente oder nicht. Das wird eh konvertiert. Also da schränkt CCM nichts ein.

Auch ist CCM mit allem kompatibel. Was in der Welt kommt ja, was weiß ich nicht, wie viel pro Sekunde, wie viel Frameworks auf dem Markt, das explodiert ja regelrecht. Und es ist eigentlich mit allem kompatibel. Das Einzige, was einschränkend ist, ist diese Konvention, dass man den restlichen Webseitenbereich nicht beeinflussen soll. Nehmen wir Bootstrap. Ja, das kann man toll wiederverwenden. Ist auch super. Aber es setzt das gesamte Layout der Webseite

auf Standardwerte, das CSS. Wenn eine Komponente Bootstrap verwenden würde und man wettet das ein, dann würde man sich wundern, dass er plötzlich... Ja, also das ist der einzige Grund, warum etwas nicht mit CCM vielleicht kompatibel ist aus Akzeptanzgründen. Ja, technisch schon, aber es würde keiner nutzen, weil das dann unvorhergesehene Effekte in der eigenen Webseite hat.

Aber sonst eben mit allem kompatibel.