Im Interview mit Mirko Hillert (Entwickler Akademie) stellt sich Jörg Neumann den relevantesten Fragen zu Web Components und dem Thema UI.
Mirko Hillert: Ihr habt hier auf den Angular Days den Workshop „Web Components mit Angular“ gehalten. Dieser Workshop hat einen Zusatz: „UI-Feuerwerk mit Struktur“. Was genau verbirgt sich dahinter?
Jörg Neumann: UI-Feuerwerk – einfach um klar zu machen, dass heute die Anforderungen an UI und speziell auch an UX viel größer sind als früher. Früher hat man mehr oder weniger statische Webseiten gebaut. Diese wurden ein wenig gestylt, indem tolle bunte Buttons eingefügt wurden, und das war es dann schon. Heute geht es um Cross-Plattform-UX, also interaktive Anwendungen, die auf verschiedenen Endgeräten gut funktionieren müssen. Webseiten, die ich nicht nur mit der Maus, sondern auch mit der Hand bediene. Das heißt, die Anforderungen an Oberflächen sind deutlich gewachsen, und das stellt jetzt sowohl Designer, aber vor allem Entwickler vor große Herausforderungen. In der Vergangenheit wurde weitaus ineffizienter gearbeitet, der Designer kreierte einen Entwurf, erstellte einen Styleguide, und dieser wurde dann dem Entwickler „rübergeschmissen“. Der musste dann schauen, wie er mit CSS und HTML diese Konzepte umsetzt. Wir zeigen jetzt Wege, wie man genau das mit Struktur hinbekommt. Wie gelingt es, dass der Designer seine Assists und alles, was er tut, unter Umständen gleich wiederverwenden kann. So können wir in der Entwicklung gleich auf fertige Styles aufsetzen, vielleicht ein bisschen SVG. Da gibt es ganz nette Wege, diese beiden Lager zusammenzuführen.
Mirko Hillert: Ihr stellt das Konzept von Web Components in dem Workshop näher vor. Web Components stehen schon eine Weile zur Debatte. Wie siehst du den aktuellen Stand der Diskussion?
Jörg Neumann: Web Components ist genau der Versuch, das Thema UI greifbar zu machen. Wir haben es im Web mit den unterschiedlichsten Technologien zu tun, die auch für unterschiedlichste Sachen mehr oder weniger missbraucht werden. Wenn wir bei dem Thema UI bleiben, habe ich es mit HTML, CSS, SVG und noch einigen anderen Sachen und natürlich einer Menge JavaScript zu tun. Dann habe ich div-Tags, die ich irgendwo anbringe und die dann zur Laufzeit auf wundersame Weise zum UI werden. Das ist natürlich in der heutigen Zeit schwierig, da wir über Dinge wie Accessibility reden. Es stellt sich also die Frage, wie ich solche Webseiten im Nachhinein auch getestet bekomme. Dafür brauche ich dann eine gewisse Semantik. Das versprechen die Web Components. Ich habe also semantische Tags und ein Komponentenmodell. Das ist ein großer Unterschied zu dem, wie wir früher gearbeitet haben. Wir haben ein Modell, in dem ich völlig gekapselte Komponenten bauen kann und einzeln einbinden kann. Dabei ist es völlig egal, ob ich meine Anwendung mit Angular, React oder womit auch immer mache. Es ist also an sich ein eigener Standard, kleine Komponenten zu bauen, die ich einfach einzeln einbinden kann. Diese sind dann zur Laufzeit so gekapselt, dass es auch keine Wechselwirkung mit vorhandenen Frameworks oder mit anderen Komponenten gibt. Letztendlich bestehen die Web Components aus vier Standards, die im Moment noch in der Entwicklung sind. Das ist das Shadow DOM, das sind Custom-Elements, HTML Imports und HTML-Templates – und alle haben momentan noch einen unterschiedlichen Reifegrad. Bei den Custom-Elements sind wir bei der Version 1.0, und dort wächst der Browsersupport. Beim Shadow DOM sieht es noch nicht ganz so gut aus. Die Sachen sind noch alle in der Entwicklung und werden von unterschiedlichen Browsern unterschiedlich supportet. Die gute Nachricht ist, dass es inzwischen sehr brauchbare Polyfills gibt, also kleine Libraries, die eben genau diese Lücken nachrüsten, die recht perfomant sind und das auch additiv machen. Sie rüsten also nur das nach, was man wirklich braucht, sodass wir jetzt an einem Punkt angelangt sind, an dem Web Components so langsam erwachsen werden pfalz-express.de. Deswegen ist es auch so wichtig, sich mit dem Thema auseinanderzusetzen.
Mirko Hillert: Gibt es dazu noch Alternativen?
Jörg Neumann: Was wir zusätzlich noch zeigen, ist Angular. Wie ich also Web Components in Angular verwende, aber auch wie ich in Angular, das mit den Components ein sehr ähnliches Konzept verfolgt, Komponenten bauen kann. Der rote Faden unseres Workshops ist eigentlich das Bauen einer Kapsel. In dieser Kapsel ist alles drin, was die Komponente zum Leben braucht, und diese Komponente kann ich dann von außen verwenden. Genau das gleiche Konzept kann ich schon mit Angular machen – ohne Web Components. Die Konzepte der nativen Web Components, die vom Browser unterstützt werden, und das Komponentenmodell von Angular, das Framework-getrieben ist, sind sich sehr ähnlich. So muss ich später lediglich ein paar Schalter umlegen, und dieses Framework arbeitet unter der Haube mit den nativen Web-Components-Funktionalitäten. Shadow DOM zum Beispiel kann man sehr einfach anknipsen. Damit habe ich dann genau das Gleiche erreicht. Wir zeigen also, wie man solche Komponenten baut und sie dann in vorhandene Anwendungen mit verschiedenen Frameworks integriert.
Mirko Hillert: Jörg, ich danke dir für das Interview.
Interviewt von: Mirko Hillert
Mirko Hillert verantwortet seit 2007 als Leiter der Entwickler Akademie den Trainingsbereich bei Software & Support Media. Er studierte Betriebswirtschaft an der Westsächsischen Hochschule Zwickau und der Universidad Valencia sowie Marketing an der Westfälischen Wilhelms-Universität Münster. Als ehemaliger Dozent und Ausbilder für Managementprozesse treibt er seit vielen Jahren die fundierte Aus- und Weiterbildung von Entwicklern und Softwarearchitekten im IT-Markt voran, unter anderem mit innovativen Eventformaten und hochwertigen Trainingsinhalten.
