Was ist komponentenbasierte Architektur und warum ist sie wichtig?
Mit Webkomponenten können Sie benutzerdefinierte HTML-Elemente erstellen. Sie finden Webkomponenten, die in modernen Front-End-JavaScript-Frameworks am häufigsten verwendet werden. "Web Components" ist jedoch ein W3C-Webstandard und benötigt kein Framework, um nützlich zu sein.
Was sind Webkomponenten?
Webkomponenten funktionieren wie Lego für HTML. Sie sind eine Sammlung von Technologien, die dazu beitragen, HTML nützlicher und wiederverwendbarer zu machen. Weitere Hintergrundinformationen finden Sie in der W3-Webkomponentenspezifikation und auf der Seite des Mozilla Developer Network zu Webkomponenten .
Diese Technologien sind:
- Benutzerdefinierte Elemente
- HTML-Vorlagen
- Das Schatten-DOM
- ES-Module
Schauen wir uns diese der Reihe nach an.
Benutzerdefinierte Elemente
Benutzerdefinierte Elemente sind spezielle HTML-Elemente, die durch JavaScript funktionsfähiger werden. Sie werden am besten verwendet, um immer aktuelle Daten ohne Rückruf anzuzeigen. Sie können sie auch beliebig benennen.
HTML-Vorlagen
Vorlagen sind wiederverwendbare HTML-Blöcke. Sie eignen sich hervorragend für Elemente, die an mehreren Stellen oder auf mehreren Seiten angezeigt werden, z. B. Kopf- und Fußzeilen sowie Menüs.
Das Schatten-DOM
Das DOM ist der Klebstoff, der das, was Sie im Browser sehen, an den HTML-Code bindet. Das Shadow-DOM ist ein Teil des DOM, mit dem Sie Markup, Stil und Funktionalität getrennt halten können.
Durch Verwendung des Schatten-DOM kann jedes benutzerdefinierte Element ein eigenes DOM erhalten. Dadurch wird verhindert, dass Styling- und JavaScript-Funktionen Elemente ändern, die nicht betroffen sein sollen.
ES-Module
Dies sind die speziellen JavaScript-Bibliotheken, mit denen Webkomponenten funktionieren.
Einer der Hauptvorteile von Webkomponenten besteht darin, dass Sie Ihr benutzerdefiniertes HTML überall wiederverwenden können. Da Webkomponenten aus einfachem HTML und JavaScript bestehen, sind sie sowohl mit Vanilla-JavaScript-Apps als auch mit Frameworks kompatibel. Weitere Informationen finden Sie unter webcomponents.org .
Webkomponenten mit einem Framework
Der einfachste Weg, um mit der Verwendung von Webkomponenten zu beginnen, ist ein Framework. Bevor es überhaupt Webkomponenten gab, stellte Angular.js eine ähnliche Funktionalität bereit, die als Direktiven bezeichnet wurde. Sie haben viel von der gleichen Arbeit wie Komponenten geleistet, bevor Komponenten zum Standard wurden.
Jetzt, da Komponenten ein Standard sind, gibt es andere Frameworks, die auf dem Webkomponentenkonzept aufbauen. Sie vereinfachen und optimieren die Verwendung von Webkomponenten und abstrahieren einen Großteil der Komplexität der Verwendung von JavaScript auf niedriger Ebene.
Vue
Vue.js ist ein beliebtes komponentenbasiertes Front-End-Framework, das bei Entwicklern sehr beliebt ist. Vue ist leicht zu erlernen und leicht zu programmieren. Das Framework erleichtert auch das Hinzufügen einfacher Komponenten zu grundlegenden HTML-Websites.
Reagieren
React ist ein Front-End-Framework, das kommerziell weit verbreitet ist. Dieses Framework ist auch bei Entwicklern beliebt. React ist am besten dafür bekannt, die Webentwicklung zu vereinfachen, indem HTML, CSS und JavaScript in einem einzigen Skript zusammengefasst werden.
Weitere Informationen finden Sie in unserer Zusammenfassung der Lernprogramme zum Reagieren, um Web-Apps zu erstellen .
Webkomponenten ohne Framework
Sie können Webkomponenten in einfachem JavaScript schreiben. Aber es ist schwer, besonders für Anfänger. Es gibt jedoch leichtgewichtige Bibliotheken, die Sie Ihrem vorhandenen Code hinzufügen können. Sie bieten Ihnen die Leichtigkeit moderner JavaScript-Praktiken ohne den hohen Aufwand eines vollständigen Frameworks.
Polymer
Polymer ist Googles Beitrag zur Bewegung von Webkomponenten. Es handelt sich um eine Sammlung leichter Bibliotheken, die das Erstellen benutzerdefinierter Elemente einfacher machen als mit einfachem JavaScript. Es verfügt über Bibliotheken zum Erstellen benutzerdefinierter Elemente sowie Vorlagen.
Polymer verfügt über eine Bibliothek für Polyfills, um die Kompatibilität mit älteren Browsern sicherzustellen. Es gibt auch eine frühe Version von Materialdesignkomponenten, um Materialdesign zu einfachem HTML hinzuzufügen.
Schlank
Eine weitere Option ist Slim.js, eine All-in-One-Bibliothek, die das Hinzufügen zu einer einfachen Website erleichtert. Es optimiert den Prozess der Erstellung benutzerdefinierter Elemente und bietet direkten Zugriff auf das Schatten-DOM.
Schablone
Last but not least gibt es die exzellente Schablone, die Ihnen das Beste aus beiden Welten bietet. Es ähnelt React und bietet viele der gleichen Funktionen. Aber es gibt Ihnen diese Funktionalität auf Framework-Ebene, ohne Sie an ein leistungsstarkes Framework zu binden.
Stencil kompiliert auch Ihre Komponenten vor, wodurch sie leichter werden. Im Gegensatz dazu laden Frameworks wie React das gesamte Framework in den Browser und kompilieren Komponenten im laufenden Betrieb. Wenn Stencil-Komponenten in den Browser gelangen, sind sie nur noch Vanille-JavaScript und HTML ohne zusätzliches Gepäck.
Webkomponenten und Webdesign
Eine der größten Hürden bei der Verwendung von Komponenten ist der Verlust von Design-Frameworks wie Bootstrap . Technisch gesehen können Sie Bootstrap mit einer komponentenbasierten Website verwenden. Und es gibt einen Bootstrap-Port für React. Wenn Sie jedoch etwas wie Stencil oder Vue verwenden möchten, sind Sie möglicherweise mit der mangelnden Kompatibilität zwischen Ihren Komponenten und dem Framework unzufrieden.
Traditionelle Webdesign-Frameworks
Die gute Nachricht ist, dass mehrere Design-Frameworks zur Auswahl stehen. Vaadin bietet einige schöne Komponenten. Für ein Enterprise-Flair gibt es OpenUI5 . Und wie bereits erwähnt, bietet Google Polymer auch Komponenten für die Material-Benutzeroberfläche an .
Die schlechte Nachricht ist, dass Sie in keinem dieser Frameworks die gleiche Erfahrung finden, die Sie von Bootstrap erhalten. Und ihnen fehlen viele Elemente, die Sie in den meisten Design-Frameworks sehen, wie z. B. Typografie.
Was ist der komponentenbasierte Design-Framework-Ansatz?
Eine andere Technologie wie Webkomponenten verdient einen anderen Ansatz. Tachyonen ist der beste Ansatz. Für Designer ist es einfacher zu verwenden, aber es kann Entwicklern eine solide und saubere Grundlage bieten. Tachyons ist Mobile-First und bietet eine Konsistenz des Designs, die subtil ist und dennoch schöne Ergebnisse liefert.
Tachyons unterteilt CSS-Klassen auf die kleinstmögliche Verwendung. So erstellen Sie beispielsweise eine Schaltfläche:
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>In den meisten Design-Frameworks geben Sie dem Link eine Klasse von Schaltflächen und eine andere Klasse, um die Ecken abzurunden. In Tachyons wählen Sie Ihre Polsterung, Ihren Rand, Ihre Farbe usw. im Handumdrehen aus. Alle Abkürzungen mögen zunächst kompliziert erscheinen, aber sie folgen einem einheitlichen Namensmuster, das leicht zu erlernen ist.
Die kleinstmögliche Klasse ist ein Ansatz, der für herkömmliche Websites nicht funktioniert, da er Ihre HTML-Klassen verstopft. Bei einer komponentenbasierten Architektur werden Sie wahrscheinlich dieselbe Schaltfläche in Ihrer App immer wieder verwenden. Das bedeutet, dass Sie diese Schaltfläche für Ihre gesamte Website nur einmal erstellen müssen.
In Komponenten denken
Eine weitere Hürde besteht darin, Ihr Gehirn dazu zu bringen, von herkömmlichen Website-Layouts auf komponentenbasierte Strukturen umzuschalten. Es gibt zwei Techniken, mit denen Sie lernen, in Komponenten zu denken.
Der atomare Ansatz
Stellen Sie sich eine Webseite als Organismus vor. Die Teile wie der Heldenabschnitt, der Preisführer und die Benutzerbewertungen sind wie die Zellen des Organismus. Dies sind Teile, die Sie sicher in ihre eigenen Komponenten verschieben können, unabhängig davon, ob Sie sie wiederverwenden oder nicht.
Die Schaltflächen, Überschriften und Anführungszeichen sind wie Atome. Atome sind der kleinstmögliche Teil. Wenn es keinen Sinn macht, eine Komponente weiter zu zerlegen, ist das ein Atom. Dies sind normalerweise Komponenten, die Sie während Ihres gesamten Projekts und möglicherweise zwischen Projekten immer wieder verwenden.
Der trockene Ansatz
Oder Sie können einfach vergessen alle , dass Organismus, Zelle und Atom Unsinn und halten es DRY . DRY steht für Don't Repeat Yourself.
Alles, ob groß oder klein, kann eine Komponente sein. Schreiben Sie einfach Ihren HTML-Code wie gewohnt. Wenn Sie etwas finden, das Sie wiederverwenden möchten, z. B. eine Galerie oder eine Fußzeile, teilen Sie es in eine eigene Komponente auf.
Sollten Sie in Ihrem nächsten Projekt Webkomponenten verwenden?
Die wichtigsten Punkte, die berücksichtigt werden müssen, sind Ihre Team- und Webstandards.
Alle gängigen Browser haben Webkomponenten übernommen. CanIUse bewertet benutzerdefinierte Komponenten mit einer Akzeptanzrate von 93 Prozent und Vorlagen mit 95 Prozent , sodass sie sicher verwendet werden können. Und es gibt Polyfills für die wenigen Nachzügler, die keine Webkomponenten unterstützen. Das bedeutet, dass Compliance kein Problem darstellt.
Wenn Sie ein Team haben, das keine Erfahrung mit Frameworks oder JavaScript hat, kann es sein, dass es Schwierigkeiten hat, diese neue Technologie zu übernehmen. Aber sie würden wahrscheinlich Schwierigkeiten haben, eine neue Technologie einzuführen, wenn dies der Fall wäre. Und wenn Sie alleine sind, machen Sie es! Es ist immer eine gute Idee, Ihre Fähigkeiten auszubauen.
Die schwierigsten Teile bei der Einführung von Webkomponenten sind der Mangel an Design-Frameworks und das Lernen, in Komponenten zu denken. Aber wir haben beide behandelt. Webkomponenten gibt es seit 2014, daher sind sie keine neue Technologie. Aber sie sind eine bessere Technologie.