Kontakt

HTML Komponenten als Basis

Standards als Grundlage für maximale Kompatibilität

Was ist unter HTML Komponenten zu verstehen?

HTML Komponenten macht im Kern erstmal aus aus HTML-Markup zu bestehen. Dies grenzt sie ab von Komponenten für Interfaces in Betriebssystemen (Windows, MacOS, Linux) oder nativen Mobil-Apps (iOS, Android), welche zumeist unter Zuhilfenahme der System-eigenen Komponenten und Programmiersprachen entwickelt werden.

Im Gegensatz zu diesen Zielplattformen unterliegen Interfaces für Websites weniger System-bedingten Erwartungen an das User-Interface (in Design und Funktion). Dafür gibt es ganz eigene UX-Pattern, die sich für die Bedienung einer Website etabliert haben: zum Beispiel Hamburger-Buttons für mobile Menüs, oder verschieden abgestufte Buttons für die Priorisierung von Call-to-actions.

Was sind überhaupt Komponenten - eine Definition

"Eine Komponente ist im Kontext der Softwarearchitektur ein Teil einer Software, der mit anderen Softwareteilen gemäs den Regeln eines Komponentenmodells zusammenwirken kann."
Definition Wikipedia
Begriff: Komponente (Software)

Übertragen auf Frontends und Interfaces im Web sind es also die Blöcke die wir zu einem Ganzen zusammensetzen, einer Seite.

Komponenten reichen dabei von den kleinsten Elementen wie Buttons oder Text-Absätzen bis hin zu komplexen Elementen wie einem Header oder einer Filter-Leiste, die selbst aber auch zurückgreifen auf einfache Elemente, um insgesamt eine übergreifende Systematik, ein Komponentenmodell, zu entwickeln.

Natives HTML

Voneinander abzugrenzen sind weiterhin Komponenten die "nativ" in HTML geschrieben werden von solchen die HTML lediglich als "Ausgabeformat" verwenden.
So geben viele Frameworks (z.B. React, Angular, etc) als Produkt eines Buildprozesses am Ende zwar HTML aus, geschrieben werden Komponente aber in einem anderen Format (z.B. JSX für React). HTML ist also nur die Sprache der Ausgabe, nicht die Sprache in der Komponenten zentral gedacht werden!

Ein Vorteil davon Komponenten tatsächlich zentral in HTML zu entwickeln (über CSS um Design ergänzt, und über JavaScript mit Interaktivität angereichert) ist, das im Ergebnis eine Framework-agnostische Sammlung entsteht.
Entsprechend ist diese in einer maximalen Breite von Technologien und Backendsprachen verwendbar: von statischen Seiten über einfache Wordpress-Blogs bis hin zu komplexen React-Anwendungen wird so Konsistenz geschaffen und doppelter Aufwand vermieden!

Semantik

Zusätzlich bringen auf HTML basierende Komponenten durch existierende Standards wie Microformats, oder dem Open Graph-Protokoll, Möglichkeiten mit, Inhalte nicht nur für den Benutzer zugänglich aufzubereiten. Informationen werden zusätzlich bei korrekter Umsetzung so ausgezeichnet, dass sowohl Suchmaschinen und Social Networks diese auslesen können, als auch eine optimale Zugänglichkeit im Rahmen der Website-Accessibility gegeben ist.

TODO: Ergänzen Semantische Struktur von Markup -> BEM

HTML als first-class citizen

Sollen System-übergreifende Komponenten geschaffen werden, welche die entsprechend notwendige Basis für eine Seiten- und System-übergreifende UX bilden, führt am "kleinsten gemeinsamen Nenner" HTML nichts vorbei! Zusätzlich unterstützen etablierte Standards automatisch bei Themen wie SEO, Accessibility und Performance!

Nutzt man zusätzlich als Basis der Entwicklung eine etablierte Kombination aus technischen Entscheidungen und Prozessen, in Form einer Component Library wie dem ruhmesmeile Frontend, bleibt einem so die Zeit, sich auf die wirklich Projekt-spezifischen Herausforderungen zu konzentrieren. Gleichzeitig bleibt man aber immer auf dem aktuellsten Stand der Entwicklung!

Anknüpfende Themen

Progressive Web Apps

Progressive Web Apps bilden mit ihrer inhärenten Erweiterung nutzbarer Funktionen ein perfektes Beispiel für die Integrierbarkeit von HTML Komponenten in verschiedene Webentwicklungs-Ansätze!

Web Components

Die aktuellste Entwicklung in der Standardisierung von HTML bringt mächtige, neue Möglichkeiten für das Entwickeln reiner HTML Komponenten mit!

Unser Entwicklungsansatz

Wie setzen wir bei ruhmesmeile diese ganzen Bausteine zu einem effizienten Entwicklungsansatz zusammen; die Vogelperspektive.