Web Components: Bessere (SPA-)Architektur mit Smart- und Presentational-Components-Pattern [Webinar]

Web Components: ein Begriff, gar (ehemaliger?) Hype, den wir in der Webentwicklung seit einiger Zeit lesen und immer wieder darüber stolpern. Custom Elements, Shadow DOM und HTML Templates ergeben ein natives Komponentenmodell für unseren Browser. Komponenten, wiederverwendbare SPA-Framework-unabhängige UI-Bausteine, die wir in jeder und für jede App nutzen könnten.

Doch noch immer werden Komponenten frameworkabhängig bspw. in Angular, React oder Vue.js entwickelt. Liegt das daran, dass unserer Anwendungsarchitektur noch ein wichtiges Pattern fehlt, um SPA-Components mit Web Components sinnvoll zu kombinieren? Mit dem Pattern der Smart und Presentational Components erreichen wir eine klare Trennung zwischen State Management (Smart) und reinem User Interface und seiner Interaktion (Presentational). Was genau es damit auf sich hat und wie dies mit Web Components realisiert werden kann, zeigte Manuel Rauber am 28. April 2021 im Live-Coding mit Vor- und Nachteilen anhand einer Real-World-Demo-Applikation.

Recording des Web Components-Webinars

Links from the webinar

Presenter & Moderator

Presenter

Manuel Rauber

Manuel Rauber is Consultant at Thinktecture and focuses on Web Components, Angular, .NET Core & Node.js.
Moderator

Marco Frodl

Marco Frodl is Consultant at Thinktecture and works with our clients on initial project definition, requirements engineering, and project management.

Agenda

  • Einführung in das Thema Web Components (Custom Elements, Shadow DOM, HTML Templates)
  • Entwicklung von Web Components
  • Smart und Presentation Components
  • Vor- und Nachteile von Web Components
  • Q&A

Kostenloses Cheat Sheet

Web Components

Manuel Rauber zeigt Ihnen auf wenigen Seiten übersichtlich zusammengefasst, was Sie bei der Arbeit mit Web Components wissen sollten.

Melden Sie sich kostenlos zu unserem Newsletter an, um das Cheat Sheet per E-Mail zu erhalten.

Jetzt anmelden und herunterladen

Slidedeck

Kommende Webinare

Code-Generierung in .NET Core: Roslyn Source Generators

In diesem Webinar lernst Du, wie ein Roslyn Source Generator implementiert wird. Zuerst sehen wir uns einen Roslyn Source Generator in Aktion an und werden ihn anschließend gemeinsam...

17.11.2021 | Pawel Gerr
Jetzt kostenlos registrieren

@ngrx/store: Einführung und erste Schritte für Angular-Entwickler

Store-Architekturen (Flux, Redux etc.) sind in aller Munde bei Frontend-Entwicklern und auch bei Angular-Devs. In diesem Webinar machen wir uns vertraut mit den Konzepten, die hinter @ngrx/store...

03.11.2021 | Yannick Baron
Jetzt kostenlos registrieren

Webinar-Recordings

Blazor WebAssembly: Forms in Action [Webinar]

Patrick Jahr zeigt anhand eines Beispiels wie Formulare mit Blazor WebAssembly in .NET 5 implementiert werden können.

27.10.2021 | Patrick Jahr
View recording

Progressive Web Apps jenseits von Mobile: Desktop-PWAs mit Fugu [Webinar]

Gerade auf Windows, macOS und Linux haben PWAs großes Potenzial. Sehen Sie aktuelle Fugu-Schnittstellen und welche Arten von Anwendungen Sie damit ins Web bringen.

20.10.2021 | Christian Liebel
View recording

Artikel zum Thema Web Components

06.10.2020 | Manuel Rauber

Stencil - a Web Components Compiler If you read through our Web Components Perks & Flaws series, you may remember that Web Components have some flaws, for example having to repeat much boilerplate code and respect the render loop, missing a template engine, or creating a build pipeline Stencil solves all of…

Read article
18.09.2020 | Manuel Rauber

In the blog series about Web Components, we talked a lot about the perks and flaws of Web Components (or: the current state of Web Components) and how their integrability in modern SPA frameworks looks like. But we only took a short look at Web Components being integrated as a single stand-alone component…

Read article
30.07.2020 | Manuel Rauber

You might have read the article series about Web Components in which we talked about the advantages and disadvantages of Web Components in detail and how they are integrable in modern SPA frameworks. This article focuses on how you can create Web Components using a modern SPA framework and also addresses…

Read article

Let’s talk!

Contact us to schedule a phone call or meeting. We can help you achieve your project goals and increase your technical skill levels!

Sending ...
Thank you! Your contact request has been received and one of our colleagues will respond within the current or next business day.
Oops! Something went wrong while submitting the form.
Please enter a valid email address, name and message.