WebComponents: Native Komponenten fürs Web - ohne und mit Frameworks

Der aktuelle Single-Page Application und der frühere Windows-Entwickler kennt sie seit „Ewigkeiten”: UI-Komponenten, oder Controls. Durch Kapselung erhalten wir modulare und wiederverwendbare Baukastenelemente, aus denen unsere UI-Anwendungen zusammengesetzt werden. Bisher mussten wir uns im Web eines SPA Frameworks bedienen – ob Angular, ReactJS, Vue.js oder Polymer. Doch keines dieser Frameworks wollte oder konnte so recht mit dem anderen zusammenarbeiten. Dies könnte sich in Zukunft ändern mit WebComponents. Diese beschreiben anhand von Standards wie CustomElements ein Komponentenmodell für das Web und bietet damit erstmal die Möglichkeit, native Komponenten im Browser gänzlich ohne ein Framework oder aber über Framework-Grenzen hinweg einzusetzen. In dieser Session klären Manuel Rauber und Patrick Jahr wie WebComponents funktionieren, wo die Vorteile und Nachteile liegen – und, vermutlich am spannendsten: sie gehen der Frage in gewohnt praktischer Manier nach, ob WebComponents mit aktuellen Single-Page Application (SPA) Frameworks wie Angular genutzt und erstellt werden können und welche Rolle Ivy dabei spielt. Abgerundet wird das Ganze mit einem Ausblick, wie wir künftig Web-Anwendungen mit Web Components entwickeln könnten. Auf zum nächsten Schritt!

Related Articles

blazor
Re-Using Angular components in a Blazor WebAssembly application using Angular Elements - Web Components custom elements, FTW!
Setting the scene - Blazor integrations Microsoft's Blazor WebAssembly toolkit is one of the new kids on the block in WebAssembly land. For many developers WebAssembly (or WASM) is the origin for a new revolution in the web. We can finally(?) use other languages and frameworks…
Christian Weyer
angular
Mimicking $interpolate - An Angular 2 interpolation service
In an Angular 1 application we have been creating for one of our customers we used the $interpolate service to build a simple templating engine. The user was able to create snippets with placeholders within the web application to use these message fragments to compose an email to…
Pawel Gerr
babylonjs
Integrating BabylonJS 3D engine into an Angular business application - Part 1 - Integration basics
In this two parts article, I will demonstrate how easy it can be to integrate a 3D engine like BabylonJS into a business application built with a SPA framework like Angular. You will see how those two frameworks can interact with each other and where possible performance pitfalls…
Max Schulte
rxjs
RxJS in Angular - Antipattern 2 - Stateful Streams
This is the second part of a small series, in which I want to share some pitfalls we discovered multiple times in code reviews over the years, as well a few patterns we identified as helpful. In the first part we discussed how nesting subscriptions can be harmful. Stateful…
Yannick Baron