Image for post
Image for post
Positano, Italy

An Overview

Today’s web applications are built upon a wide range of use cases, which are far from serving static documents.

We’re at a point where an application can be served as web based software with a feature set of a native app. These enhanced apps are called progressive web apps (PWAs).

An important aspect of a PWA is the service worker. A service worker is nothing less than a Javascript script, which runs in the background of the browser and acts as a proxy between the server and the browser. …


Image for post
Image for post
Photo by Vitaly Taranov on Unsplash

What are Web Components?

Web components are custom, reusable web elements which encapsulate functionality, markup structure and styling by using vanilla javascript/HTML/CSS along with native Web APIs.

Custom elements teach the browser new tricks while preserving the benefits of HTML

Eric Bidelman

They can be used in the template like common HTML elements (e.g.<p> or <span> ).

<body>
<p>a simple paragraph</p>
<script type="module" src="my-custom-element.js"></script>
<my-custom-element></my-custom-element>
</body>

They build upon ECMAScript 2015 class syntax by extending the HTMLElement interface, that ships useful APIs for manipulating the element or responding to events.

class MyCustomElement extends HTMLElement {}

You can also extend existing HTML elements like HTMLInputElement, HTMLButtonElement, or HTMLParagraphElement to inherit their properties and methods. Thereby you’re able to create your own implementations of common HTML elements. …

About

Jan Sommer

Germany based software developer with a focus on web technologies

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store