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 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, 52.91 kB

Wie können wir Sie unterstützen?

Collin Rogowski

Head of inovex Academy