Web Components – ein Begriff, den wir immer öfter hören und lesen werden. Dahinter stehen die Technologien Custom Elements, Shadow DOM und HTML Templates. Zusammen ergeben sie ein natives Komponentenmodell für unseren Browser. Es hilft uns, wiederverwendbare UI-Komponenten zu entwickeln, die wir in jeder App benutzen können. Völlig gleich, ob diese Anwendungen mit einem SPA-Framework entwickelt wurden.

Bedeutet das aber auch, dass wir eigentlich gar kein SPA-Framework mehr benötigen, sondern alles mit Web Components entwickeln können? Manuel Rauber ist am 20. Mai 2020 dieser spannenden Frage auf den Grund gegangen, anhand einer Real-World-Demo-Applikation, Live-Coding und einer Erläuterung zu den Vor- und Nachteilen von Web Components.

Recording des Web-Components-Webinars

Inhalte

  • Einführung in das Thema Web Components (Custom Elements, Shadow DOM, HTML Templates)
  • Demo einer Web Components App
  • Entwicklung einer eigenen Web Component
  • Vor- und Nachteile von Web Components

Links

Kostenloses Web-Components-Cheat-Sheet:
Manuel Rauber hat zum Thema Web Components ein Cheat Sheet erstellt, auf dem er kompakt alles Wissenswertes zusammengefasst hat. Melden Sie sich hier zu unseren monatlichen DevNews an und wir sende Ihnen das Cheat Sheet per E-Mail.

Slidedeck zum Web-Components-Webinar


Related Articles

web components
The Flaws of Web Components (and possible solutions): Perks & Flaws Series - Part 3
The first article of this series introduced into the motivation for using Web Components. After looking at the perks in the second part, we are going to learn about the flaws of Web Components in this article. Please note that with the on-going development of the standards, some…
Manuel Rauber
web components
The Motivation for Using Web Components, an Introduction: Perks & Flaws Series - Part 1
Web Components - a term you most probably hear regularly in recent times as a web developer. With the standards of Shadow DOM, HTML Custom Elements, HTML Templates, and, in former times, HTML Imports, there finally is a native component model within the browser. In this four-part…
Manuel Rauber
web components
The Perks of Web Components: Perks & Flaws Series - Part 2
In the introduction article to this series, I wrote about the motivation, why to use Web Components. Now we are going to take a closer look at the perks of using them - from a technical and business point of view. If you are interested in all technical features of Web Components…
Manuel Rauber
web components
Lightweight and Fast Web Components with LitElement
Introducing LitElement: simply put, it is a base class which helps us to create fast and lightweight Web Components. Additionally, we have a little bit more comfort to write our code. In this article, I will show you how to create and publish Web Components with LitElement in a…
Patrick Jahr