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

Web-API mit Turbo: Deep Dive in async/await bei Backend-APIs

Asynchrone Programmierung wird immer häufiger als der Heilsbringer in Sachen Performance angepriesen. Doch stimmt das auch? Die Antwort ist ein ganz klares Jaein. Was bedeutet asynchrone...

01.09.2021 | Sebastian Gingter
Jetzt kostenlos registrieren

Standardized Deployments for Cloud-Native Apps in Azure with Porter

Application deployment is complicated and error-prone. Especially when it comes to cloud-native apps. Numerous tools have to work seamlessly hand-in-hand to ensure deployments are successful. The...

26.08.2021 | Thorsten Hans
Register now for free

Webinar-Recordings

3D-Visualisierung im Web mit BabylonJS [Webinar]

In Max Schulte's Webinar lernen Sie die kritischen Unterschiede zwischen einem SPA-Frameworks und einer Grafik-Engine kennen und sehen einen Architekturansatz, der die Vorteile beider Technologien optimal zusammenführt.

28.07.2021 | Max Schulte
View recording

Angular-Performance: So zünden Sie den Turbo [Webinar]

Christian Liebel zeigt Ihnen mit Zone.js, Change Detection und Service Workern die wichtigsten Performance-Stellschrauben des Angular-Frameworks, damit Sie auch für Ihre Angular-App den Turbo zünden können.

21.07.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.