27.04.2021 | 

Webinar: Web Components: Bessere SPA-Architekturen mit Smart- & Presentational-Components

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, zeigt Manuel Rauber im Live-Coding mit Vor- und Nachteilen anhand einer Real-World-Demo-Applikation.

Mehr Beiträge zu Web Components
Web Components: Bessere SPA-Architekturen mit Smart- & Presentational-Components

Moderation

Marco Frodl

Marco Frodl

Marco Frodl ist Consultant bei der Thinktecture AG und versteht sich als ein IT-Dolmetscher zwischen Developern und Anwendern.

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

Recording des Webinars

Links aus dem Webinar:

Slidedeck zum Webinar

Kommende Webinare: jetzt kostenlos anmelden

Cloud-Native: Hosting – On-Prem oder Public-Cloud? Kubernetes, PaaS oder Serverless?

Thorsten Hans | 14.12.2022 | 10:30 Uhr

Cloud-Native: Vom Docker Image über Kubernetes-Manifeste hin zu Helm Charts

Thorsten Hans | 11.01.2023 | 10:30 Uhr

Aktuelle Webinar-Aufzeichnungen

Weitere Artikel zu Web Components

Angular
Master Web Component Forms Integration – with Lit and Angular

Master Web Component Forms Integration – with Lit and Angular

When a company has cross-framework teams, it is a good choice to use Web Components to build a unified and framework-independent component library. However, some pitfalls are to consider when integrating these components into web forms. Therefore, for a better understanding, we will look at two possible approaches and try to integrate them into an Angular form as an example.

Notice: All code samples are available on Github!
09.06.2022
Angular
About Smart and Presentational Components, Architecture Overview & Concepts: Condensed Angular Experiences – Part 3

About Smart and Presentational Components, Architecture Overview & Concepts: Condensed Angular Experiences – Part 3

Modern web technologies enable us to write huge business applications that are performant and easy to use. But with time comes complexity to our projects naturally. That added complexity sums up and makes further app development slow and cumbersome. This article discusses how a simple architectural concept can make every app more maintainable, faster to develop, and extendable in the long run.
08.04.2022
Project Fugu
Copy & Paste Images – Real-World PWA: The Making Of Paint.Js.Org – Part 3

Copy & Paste Images – Real-World PWA: The Making Of Paint.Js.Org – Part 3

In part three of the series about the making of the web-based Microsoft Paint clone paint.js.org, I want to show how you can copy drawings from the Paint clone to other applications and paste them back.
27.04.2021
Web Components
Stencil – Web Components On Steroids

Stencil – Web Components On Steroids

In this article, we are exploring the framework Stencil from Ionic. Stencil is a Web Components compiler helping to create custom Web Components libraries that are usable in any web application.
06.10.2020
Dependency Injection
Deep Dive: Web Components & Dependency Injection – The Experiment

Deep Dive: Web Components & Dependency Injection – The Experiment

When developing Web Components you will ask yourself at some point, where to actually get the data and configuration from. If you are used to frameworks like Angular, you know that you can inject services and configurations. Web Components rely on HTML attributes, JavaScript properties and `CustomEvent` for input/outputs. But, what if we use that, to build our own dependency injection to share along with services and configuration? In this deep dive, we are going to experiment and not only see if it is possible but also if it makes sense.
18.09.2020
Angular
Creating Web Components With Modern SPA Frameworks – Angular, React, And Vue.Js

Creating Web Components With Modern SPA Frameworks – Angular, React, And Vue.Js

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 Angular Elements, Vue.js Web Components, and React. Besides, we will take a look at how to structure a project.
30.07.2020

Unsere Webinare

Unsere Artikel

Mehr über uns