Web Components

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. 

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

Dauer: 2 Tage

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

Sie haben Interesse an diesem Training?

Dann rufen Sie uns an unter +49 (0)172 5673497 oder schreiben Sie uns eine E-Mail. Wir freuen uns auf Ihre Nachricht und senden Ihnen gerne ein individuelles Angebot zu!

Collin Rogowski

Sie haben Interesse an diesem Training?

Collin Rogowski

Head of inovex Academy

inovex Content Pool

Alle Tech-Vorträge im Content Pool

Hier geht's zu den Vorträgen