

Wiederverwendbarkeit von Komponenten ist ein hehres Ziel der meisten Software-Architekturen. Doch gerade im (Web-)Frontend-Bereich ist dies oft leichter gesagt, als getan.
Jedoch profitieren gerade Frontend-Komponenten hier doppelt: neben der höheren Effizienz durch die Wiederverwendung von Code kann so auch eine applikationsübergreifende, einheitliche Design-Sprache umgesetzt werden: oft ein starker Faktor für eine gute Usability.
Der seit einigen Jahren verfügbare Web Component Standard hilft, die Frontend-Architektur einer Applikation modular aufzubauen. Frameworks wie Stencil, die diese Standards auf entwicklerfreundliche Art und Weise implementieren, sind dabei ein großer Mehrwert.
Im Rahmen dieses Trainings lernen die Teilnehmer:innen anhand einer Beispielapplikation, wie man mit Hilfe von Stencil Web Component Architekturen designt und entwickelt. Dabei liegt der Fokus auf der nachhaltigen, professionellen Applikationsentwicklung, weshalb auch Themen wie Test-Automatisierung oder die Architektur von White-Label-Anwendungen behandelt werden.
Wie bei allen inovex Trainings heißt es auch bei diesem Training »hands-on«: Etwa 50 % der Trainingszeit sind für die Bearbeitung von Übungsaufgaben und die Implementierung der Beispielapplikation vorgesehen.
Agenda:
- Einführung, Grundlagen und historischer Überblick zum Web Component Standard
- Shadow DOM
- Custom Elements
- HTML Templates
- Übungsaufgabe
- Einführung in Stencil
- Architektur und Überblick
- Übungsaufgabe
- Teststrategien für Web-Component-Architekturen
- Unit Tests
- End2End-Tests mit Cypress
- Übungsaufgabe
- Integration der Web Components in Framework
- Angular
- React
- Design Systems
- Grundlagen und Umgang mit Vorgaben eines Designs
- Durchgängige Integration von UI-Designern in ein Entwicklungsprojekt
- Web Components und White-Label-Applikationen
- Globale vs. lokale Styles
- Übungsaufgabe
- Alternativen zu Stencil
- Marktübersicht von Web Component Frameworks
Wie können wir Sie unterstützen?