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 article series, we are exploring the perks and flaws of Web Components within a demo application. This demo will show how frameworks like Angular, React, Vue, LitElement, and Stencil.js can seamlessly work together in one application as Web Components.

In diesem Artikel:

Article Series

  1. The Motivation for Web Components and Introduction ⬅
  2. Perks of Web Components
  3. Flaws of Web Components
  4. Data Sharing and Frameworks

The Motivation for Native Web Components

If you develop desktop applications or Single-Page Applications (SPA), you are used to components.

A component encloses three things:

  • User Interface: the elements a user can interact with and see data.
  • Style: defines how to render the user interface, for instance colors, margins or fonts.
  • Code: functions to handle user input events as well as updating the data presented to the user and communicate with other services.

If you consider these three elements, the component usually is reusable. Multiple components compose the final application. We can create or use component libraries to help other developers to build their application.

Whereas back in the days, libraries like jQuery UI or Bootstrap helped to create reusable components, today frameworks as Angular, React, and Vue take over and have a commonality: they offer the developer a component model. Angular has a @Component decorator that turns a pure class into a component, React extends from React.Component, and Vue has a function Vue.component. Additionally, all frameworks offer some lifecycle methods for developers to hook into, for example, when the framework creates or destroys a component at runtime.

If you now move from one framework to another, you have to relearn the following, amongst other things:

  • the component model
  • how the framework invokes lifecycle methods
  • how to bind data from code to UI
  • how to react to UI events in your code

Imagine, if the browser has a native component model, you only need to learn it once. That has several advantages. As a developer, you can easily switch between projects or even companies that are using Web Components. For companies, you have higher reusability of developed components, because they can be used either standalone or within any other framework. As a result, you do not need to hire someone who knows how to develop a framework component, but rather someone who can create Web Components and still use these in your framework code. Vice versa, if you want to turn your framework component into a Web Component and then use it where ever you want. Welcome to the world of Web Components!

The Demo Application

A real-time chat application demo Palaver accompanies this article series. Besides the source that is available on GitHub, there is also a live demo available. I recommend reading through the readme file to compile and start the project on your machine.

A lot of Web Components demos mostly showcase one single feature of it, which is helpful if you are interested in that particular feature.

However, if you want to see how everything works together, especially when current frameworks are involved, hands needed to get dirty to write such a demo from scratch.

Let’s have a look at Palaver first:

The demo shows a real-time chat application with a Node.js & Socket.io backend. Several Web Components compose the frontend. If you turn on the special demo mode with the neat little spider icon in the top right corner, the demo reveals the Web Component for each part.

Every dashed line, as seen in the picture, is a Web Component. The color identifies the framework, the number in the brackets denotes the version used in Palaver:

Being an Angular developer, I built the application housing all the Web Components and providing the necessary services with Angular.

Features

The features of Palaver are:

  • Contact list with all users currently online
  • Chat history (IndexedDb & Dexie.js)
  • Real-time online/offline recognition of other users
  • Link preview generation

Goal

The goal of this demo is to have a real application including inputs/outputs, data flow, forms, and updates in order to get more insights about working with Web Components within frameworks and how to build them from frameworks. Please have in mind that the application is still a demo application, so some shortcuts and little workarounds may be involved.

Read the second article of this series about the perks of Web Components.

Happy coding!

Mehr Artikel zu Angular, Web Components
Kostenloser
Newsletter

Aktuelle Artikel, Screencasts, Webinare und Interviews unserer Experten für Sie

Verpassen Sie keine Inhalte zu Angular, .NET Core, Blazor, Azure und Kubernetes und melden Sie sich zu unserem kostenlosen monatlichen Dev-Newsletter an.

Newsletter Anmeldung
Diese Artikel könnten Sie interessieren
Angular
sl_300x300

View Transition API Integration in Angular—a brave new world (Part 1)

If you previously wanted to integrate view transitions into your Angular application, this was only possible in a very cumbersome way that needed a lot of detailed knowledge about Angular internals. Now, Angular 17 introduced a feature to integrate the View Transition API with the router. In this two-part series, we will look at how to leverage the feature for route transitions and how we could use it for single-page animations.
15.04.2024
Low-angle photography of metal structure
AI
cl-neu

AI-Funktionen zu Angular-Apps hinzufügen: lokal und offlinefähig

Künstliche Intelligenz (KI) ist spätestens seit der Veröffentlichung von ChatGPT in aller Munde. Wit WebLLM können Sie einen KI-Chatbot in Ihre eigenen Angular-Anwendungen integrieren. Wie das funktioniert und welche Vor- und Nachteile WebLLM hat, lesen Sie hier.
26.02.2024
Angular
sl_300x300

Konfiguration von Lazy Loaded Angular Modulen

Die Konfigurierbarkeit unserer Angular-Module ist für den Aufbau einer wiederverwendbaren Architektur unerlässlich. Aber in der jüngsten Vergangenheit hat uns Angular seine neue modullose Zukunft präsentiert. Wie sieht das Ganze jetzt aus? Wie konfigurieren wir jetzt unsere Lazy-Komponenten? Lasst uns gemeinsam einen Blick darauf werfen.
03.08.2023
Angular
YB_300x300

Using EntityAdapter with ComponentStore: @ngrx/entity Series – Part 3

As someone who enjoys the ComponentStore on an average level, I have written simple reactive CRUD logic several times. While storing a vast number of entities in the component state might not be a frequent use case, I will briefly illustrate the usage of the EntityAdapter with the @ngrx/component-store.
14.02.2023
Angular
YB_300x300

Multiple Entity Collections in the Same Feature State: @ngrx/entity-Series – Part 2

After introducing the @ngrx/entity package, I am often asked how to manage multiple entity types in the same feature state. While I hope that the previous part of this article series has made this more apparent, I will further focus on this question in the following.
07.02.2023
Angular
YB_300x300

Managing Your Collections With the EntityAdapter: @ngrx/entity-Series – Part 1

This three-part series of blogposts is targeted at developers who have already gained experience with NgRx but still manage their collections themselves. In the first part I introduce the Entity Adapter, in the second part I show you how to connect it to NgRx and in the third part how to do it with the Component Store as well.
31.01.2023