© Alexzel/Shutterstock.com
PHP Magazin
Komponentenbasierte Architektur mit Web Components

Bausteine für das Web


Mit Web Components können wiederverwendbare Komponenten für Webanwendungen erstellt werden. Es ist lohnenswert, sich diesen vielversprechenden Ansatz einmal genauer anzuschauen.

Spätestens mit dem Auftreten moderner JavaScript Frameworks und Bibliotheken wie Angular, Vue und React hat sich die komponentenorientierte Architektur im Frontend auf breiter Masse durchgesetzt. Diese Architekturform können Sie nicht nur nutzen, wenn Sie auf eine der genannten Lösungen setzen, sondern auch mit nativem HTML, CSS und JavaScript.

Der Begriff Web Components steht für eine Sammlung von Browserschnittstellen, mit deren Hilfe Sie auch ohne Unterstützung einer zusätzlichen Bibliothek eine Komponentenarchitektur erzeugen können. Das bedeutet allerdings nicht, dass Sie sich komplett von den etablierten Lösungen verabschieden müssen, sondern dass die Möglichkeiten, gerade im Bereich von Framework-übergreifenden Lösungen, erweitert werden. In diesem Artikel werfen wir einen Blick auf die zugrunde liegenden Technologien und sehen uns an, wie Sie native Web Components erzeugen und in eine bestehende Applikation integrieren können.

Komponentenarchitekturen

Bevor wir uns dem eigentlichen Thema, den Web Components, widmen, erfahren Sie zunächst, worum es bei einer komponentenorientierten Architektur geht und warum die Entwickler der großen Frameworks und Bibliotheken auf diese Architekturform setzen. Eine Komponente steht für einen Baustein einer Applikation, vergleichbar mit den Tags einer HTML-Seite, aber mit dem Unterschied, dass eine Komponente aus einer HTML-Struktur, eigenem Styling und Logik besteht. Die Idee hinter den Komponenten ist, dass diese Bausteine möglichst eigenständig sind und über definierte Schnittstellen mit der übrigen Applikation interagieren. Außerdem können Sie Ihre Komponenten so gestalten, dass Sie sie mehrfach verwenden können.

Das einfachste Beispiel für eine solche Komponente ist ein einzelnes Element in einer Liste. Ein solches Listenelement kann beispiel...

PHP Magazin
Komponentenbasierte Architektur mit Web Components

Bausteine für das Web

Mit Web Components können wiederverwendbare Komponenten für Webanwendungen erstellt werden. Es ist lohnenswert, sich diesen vielversprechenden Ansatz einmal genauer anzuschauen.

Sebastian Springer


Mit Web Components können wiederverwendbare Komponenten für Webanwendungen erstellt werden. Es ist lohnenswert, sich diesen vielversprechenden Ansatz einmal genauer anzuschauen.

Spätestens mit dem Auftreten moderner JavaScript Frameworks und Bibliotheken wie Angular, Vue und React hat sich die komponentenorientierte Architektur im Frontend auf breiter Masse durchgesetzt. Diese Architekturform können Sie nicht nur nutzen, wenn Sie auf eine der genannten Lösungen setzen, sondern auch mit nativem HTML, CSS und JavaScript.

Der Begriff Web Components steht für eine Sammlung von Browserschnittstellen, mit deren Hilfe Sie auch ohne Unterstützung einer zusätzlichen Bibliothek eine Komponentenarchitektur erzeugen können. Das bedeutet allerdings nicht, dass Sie sich komplett von den etablierten Lösungen verabschieden müssen, sondern dass die Möglichkeiten, gerade im Bereich von Framework-übergreifenden Lösungen, erweitert werden. In diesem Artikel werfen wir einen Blick auf die zugrunde liegenden Technologien und sehen uns an, wie Sie native Web Components erzeugen und in eine bestehende Applikation integrieren können.

Komponentenarchitekturen

Bevor wir uns dem eigentlichen Thema, den Web Components, widmen, erfahren Sie zunächst, worum es bei einer komponentenorientierten Architektur geht und warum die Entwickler der großen Frameworks und Bibliotheken auf diese Architekturform setzen. Eine Komponente steht für einen Baustein einer Applikation, vergleichbar mit den Tags einer HTML-Seite, aber mit dem Unterschied, dass eine Komponente aus einer HTML-Struktur, eigenem Styling und Logik besteht. Die Idee hinter den Komponenten ist, dass diese Bausteine möglichst eigenständig sind und über definierte Schnittstellen mit der übrigen Applikation interagieren. Außerdem können Sie Ihre Komponenten so gestalten, dass Sie sie mehrfach verwenden können.

Das einfachste Beispiel für eine solche Komponente ist ein einzelnes Element in einer Liste. Ein solches Listenelement kann beispiel...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang