//

A look at Web Components

25.10.2018 | 9 minutes of reading time

When it comes to modern web applications, there is currently (almost) no way around Angular and React. Of course there are very interesting alternatives such as Vue.js, Ember etc., but in larger projects, they played a considerably smaller role in 2017.
Obviously, the question arises as to how things will develop in the fast-moving ecosystem around JavaScript etc. in the upcoming years. Certainly, component-based frameworks will continue dominate the market in 2018 and beyond. However, an alternative has been emerging on the horizon for some time now: Web Components.

Web Components are a series of features that the W3C is currently adding to the HTML and DOM specifications. Web Components allow you to create reusable components for Web applications, a concept already familiar from Angular and React.

In this post we will take a look at these features and the possibilities they offer.

Example with React

Let’s take as an example a list of strings we want to display. In React it looks like this:

This feels a lot like “native” HTML. While React only allows you to use your own components, Web Components allow you to define your own HTML elements, which you can integrate into a page like normal HTML. Therefore, they can also be easily used on the server side. Another advantage: they behave like HTML and can therefore be used with any JavaScript library and any framework that can handle HTML (e.g. for events).

Web Components are also based on Web standards and are therefore more future-proof. However, we must also take into account one disadvantage that Web Components unfortunately currently have: they are not yet available in every browser without difficulty. However, this functionality can be added using Polyfills.

Polyfills

Polyfills allow you to retrofit functions that are not currently supported in the browser. This in turn can mean that the performance does not correspond to the native implementation and is an additional burden for the user, since the respective script must be loaded and executed.

Overview

When we talk about Web Components, we refer to four features that we will explore in more detail below:

  • HTML Templates: a way to store HTML templates in the document using the

share post

Likes

0

//

More articles in this subject area\n

Discover exciting further topics and let the codecentric world inspire you.

//

Gemeinsam bessere Projekte umsetzen

Wir helfen Deinem Unternehmen

Du stehst vor einer großen IT-Herausforderung? Wir sorgen für eine maßgeschneiderte Unterstützung. Informiere dich jetzt.

Hilf uns, noch besser zu werden.

Wir sind immer auf der Suche nach neuen Talenten. Auch für dich ist die passende Stelle dabei.