Lead Image © Andrey Prokhorov, fotolia.com

Lead Image © Andrey Prokhorov, fotolia.com

Modularize websites with Web Components

Web Perfect

Article from ADMIN 50/2019
Web Components let you define your own HTML tags to restructure monolithic web pages into smaller services and simplify maintenance and servicing.

Microservices are being used more and more as architecture patterns for client-server applications. Developers break down monolithic back ends into smaller services that can be developed independently of each other and, if necessary, re-implemented with little effort.

Web developers naturally ask themselves how they can best integrate the multitude of small services into their websites. One answer is with Web Components [1], self-adjustable and reusable HTML tags that are standardized, work across browsers, and can be used with all JavaScript libraries and frameworks that also work with HTML (see Table 1).

Table 1

Native Use of Web Components

Browser Version Example Works?
Chrome 69 Yes
Firefox 63 Yes
Safari 12 Yes (untested)
MS Edge 42 No

For example, developers can use Web Components to integrate microservices into web pages without diluting HTML documents with redundant ID attribute values or additional stylesheet information.

Fully Integrated

Web developers integrate individual components with HTML tags they define themselves. In Lines 8-10 of Listing 1, this tag is <anot-list> ... </anot-list>. Lines 4 and 5 include the appropriate script components.

Listing 1

<anot-list> and <anot-title>

01 [...]
02 <head>
03   [...]
04   <script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
05   <script type="module" src="anot-list.js"></script>
06 </head>
07 <body>
08   <anot-list>
09     <anot-title>My Comments</anot-title>
10   </anot-list>
11   <article><Dummytext></article>
12   <todo-list> [...] </todo-list>
13 [...]

The JavaScript code (Listings 2-5) resolves the tags into a document fragment that includes stylesheet information. (For readability, the code is divided into several listings.) Lines 26-28 of Listing 5 define the self-designed HTML tags at the end. However, the adapted document fragment ends in a shadow Document Object Model (DOM) after it has been created, where <anot-list> assumes a role as a root element (Figure 1).

Figure 1: The shadow DOM is element-specific and can only be addressed by its shadow root. It remains invisible compared with the other document tree known as the light DOM.

Shadow DOM

The new DOM feature exists outside the actual document tree. The code creates a shadow root to mount document fragments under a specific host element, which creates a subtree for the element, known as a shadow DOM. The adapted new element can then be constructed in it.

Using the associated shadow DOM API, developers can address and configure embedded elements more elegantly than by using the unpopular and bulky <iframe> tag. The concrete result is an interactive comment function (Figure 2) that appears to the right of the dummy text. Figure 3 shows the associated source code for the new item in the browser's developer console.

Figure 2: The <anot-list> Web Component generates a comment function that saves locally (shown in the Firefox browser view on Ubuntu).
Figure 3: The Chromium developer console highlights the shadow root in the document tree.

Web Components can be used universally because of their weak interaction with other document components. Google offers such elements with the open source Polymer [2] framework; Mozilla's library of Web Components is known as X-Tag [3]. The Mozilla Developer Network offers more information [4] on this topic, as well. Additionally, the recently released Firefox 63 browser version supports a "modern Web Components API" [5].

In the Light of the DOM

Web Components themselves are not standardized but are described in the style of a design pattern [6]. They are generated in the interplay between custom elements [7], the shadow DOM [8], and the HTML templates [9].

The HTML templates are used to generate user-defined tags, as shown in Listing 5 (lines 26-28). Thanks to the shadow DOM, redundant ID attribute values and stylesheet details can be avoided. HTML templates also make it possible to write document fragments as HTML tags, as demonstrated in Listing 3 (lines 1-12).

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy ADMIN Magazine

Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Automation with Ansible
    Ansible offers automatic provisioning and configuration capabilities similar to that of Chef and Puppet, but it's aimed more at admins than developers.
  • Data Analysis with R and Python
    The statistical programming language R dissects its database in a masterful way, and you can embed your R in Python using the Rpy2 interface.
  • End-to-end monitoring – Measuring what the user perceives
    Continuously monitoring the performance of applications helps ensure the service quality in multilayered cloud services.
  • Discover ransomware with PowerShell
    Simple backup strategies cannot protect files encrypted by ransomware, because they can be affected as well. A PowerShell script can ensure that your files are okay before sending them to backup.
  • OpenLDAP Workshop
    Centralized user management with LDAP or Active Directory is the standard today, although many prefer to manage user data manually rather than build this kind of infrastructure. In this article, we look at a better approach with OpenLDAP.
comments powered by Disqus