Web Components Logo

Web Components

Zielgruppe: Frontend- und Web-Entwickler:innen (JavaScript Know-How und Erfahrung mit einem Framework wie Angular oder React wird vorausgesetzt)
Anfrage stellen

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
Anfrage stellen „Web Components“ Trainingsbeschreibung PDF, 84.56 kB

Wie können wir Sie unterstützen?

Collin Rogowski

Head of inovex Academy