Exploring Web Components: Build Reusable UI Web Components with Standard Technologies (English Edition)

By Andrea Chiarelli

The design of Web user interfaces has been growing significantly in recent times thanks to libraries like React, Angular, Vue. They allow you to create awesome UI components, but have a great drawback: their components are not interoperable.

Web Components enable you to overcome this drawback by using a set of standard technologies.

The book drives you in the exploration of these technologies with a practical approach. It describes how to create Custom Elements; how to protect their internal behavior by leveraging the Shadow DOM; how to simplify the UI definition through HTML templates.

Also, you will discover how to distribute and use your Web Components and how to leverage libraries and tools to develop them.

Throughout the book, you will carry out a Web Component project that will provide you with practical experience in using those technologies.

• Language: English
• Publisher: BPB Online LLP
• Release date: Aug 24, 2020
• ISBN: 9789389423983

Book preview

CHAPTER 1

Getting Started with Web Components

The Web as a platform to build applications is already a consolidated reality. In this platform, standard technologies like HTML and CSS have the main goal to define the User Interface (UI), while JavaScript supports interactivity and client-side business logic. These are the traditional roles for these technologies, but it’s not always like that. In recent years, the need for customized UI elements has encouraged the birth of libraries and frameworks mainly based on JavaScript control. Among others, React, Angular, Vue are powerful libraries that allow you to create UI elements by using JavaScript. But the UI elements built with one library can’t be used within the context of the other library. So, usually, if you need the same component in a different context, you need to re-implement it.

Is this the only way to create UI elements? Is there a way to create universal and reusable UI elements, regardless of the framework you are using to build your application?

The answer to these questions is positive. Web components allow you to create UI elements using standard technologies and providing universal support.

In this chapter, we will start by understanding how to design UI by using components, what Web Components are, and how they evolved in the history of web development. The chapter will introduce the standard technologies that build up the current Web Components specifications and discuss the current browser support. It also explains how to include third parties Web Components in a web application and how to support older browsers by using a few polyfills.

Structure

UI, components, and applications

What is Web Components?

Using a web component

Browser support

Using polyfills

Objectives

After reading this chapter, you will be able to design your web UI by using a component-based approach. You also will have a high-level understanding of what Web Components are, and will be able to include any existing Web Components in your HTML pages.

UI, components, and applications

UI plays a key role in modern applications. It is the main medium that allows the user to interact with the application’s functionalities. In the web context, the technologies to create a UI are standardized, but the demand for increasingly sophisticated interactivity generated the birth and spread of many UI libraries that are not compatible with each other. Web Components try to bring the need for this high sophisticated interactivity into the boundaries of the web standards.

Before meeting the Web Components, however, let’s start by reasoning about UIs and how we might like to have them to simplify our design effort in the web context.

1. Decomposing UI

UI is an aggregate of items displayed on a screen that helps the user to interact with an application. This could be an informal definition of a UI, but for a better understanding, let’s take a look at the following screenshot:

Figure 1.1

This is the home page of the Save the Children organization’s website (https://www.savethechildren.org/). Intuitively, you can identify several items on this page, each having a specific role. The user can easily identify such items to interact with the functionalities provided by the website.

Let’s highlight some of these items in the following screenshot:

Figure 1.2

You can see a few areas of the home page with a blue border. These bordered items represent elements of the UI that allows the user to interact with specific functionalities. So you have a bar on the top that allows you to manage your account, a bar with the navigation menu and the search box, an image inviting you to donate, and so on.

These items compose the whole page; they are components of the page, which represent the UI.

2. What is a component?

As you can see from the picture, the decomposition of the UI is quite arbitrary. Each one of us may choose a different approach to decompose the UI and find different sets of components. For example, someone may consider the top and navigation bar as one component. In contrast, someone else may consider the navigation bar as a set of independent components—one for the search box, one for the donate button, one for each menu, and so on.

There is not a definitive rule to identify a UI element as a component. You may choose any element or group of elements of the page to define it as a component. It is definitively up to you.

Anyway, you should keep in mind a couple of criteria to identify a UI element or a group of UI elements as a component:

They should have a specific and consistent role

They should be reusable

If you take a look at the bordered items in the picture above, they identify page areas with a specific role:

The top bar allows the user to manage their account

The item under the top bar allows the user to perform global actions over the website, such as search words or navigate to a different area

The area below the navigation area is meant to invite users to donate

The area containing links to the latest news

The area to sign up

The areas to specific missions

If you consider these areas, you may realize that they are a sort of self-contained unit. You could move the items on the page and rearrange the page with a new layout. You can also reuse each of them on another page, and maybe any of them can be reused on another website as well.

This is one of the powers of components: having their own identity that allows you to consider them as a unit.

3. Composing components

The ability to be a unit with a specific role is not the only characteristic of a component. A component is the building block of a more complex entity, but the resulting entity may be a component itself. If you think a bit of it, you may realize that after all, the whole web page is a component itself - it is part of the website or web application and has a specific role in that context.

So, more in general, we can say that a component may contain other components or, equally, it may be composed of other components. Consider, for example, the component shown in the following screenshot:

Figure 1.3

You may consider it a self-contained component with the role of gathering the user data and allow them to sign up. Or you may consider it as a component built on the aggregation of other components, as shown in the following screenshot:

Figure 1.4

Each bordered item in the preceding screenshot has a specific role - one displays the title; one gets the user’s first name, and so on. So, each item can be considered a component, and altogether they build a new component.

It’s up to you and your convenience to decompose a component accurately in subcomponents and build your UI as a combination of components. In the example above, you could reuse the textboxes in another form, so you have a concrete convenience to consider them as components.

What usually happens is that a UI is a combination of multiple components, almost always organized in a hierarchy. This hierarchy of components is often called a component tree.

4. Mapping components to HTML

The UI decomposition carried out in the previous section is quite generic. It applies to any kind of UI. But let’s restrict to web UI implementation:

How much would you like to map each detected component to a corresponding HTML element directly?

How much would you like to define the home page shown in the previous section with a much more descriptive HTML markup?

Take a look at the following markup:

en>

utf-8>

123>

321>

As you can see, the markup above is, actually, a direct mapping between the components we detected in the previous sections and a set of hypothetical HTML elements. This would be the concrete realization of the Semantic HTML, that is the idea that all your HTML markup should represent the meaning of your content, not its appearance.

What usually happens to see, in the best case, is a markup similar to the following:

en>

utf-8>

account-management-bar>

…>…

navigation-bar>…

front-cover>…

news-area>

…

…

sign-up-form>

…

mission-tile>…

mission-tile>

Here there, the markup doesn’t express the meaning of each element. You may infer it from the CSS classes, but the whole markup is too verbose and not so readable.

On the other hand, if you could use a markup so concise and clean like the one we imagined above, your web UI was very readable, maintainable, and reusable. In a word, it would be effective.

This is something that web developers have been looking for in several ways. Year after year, adding new elements like

,

,

As you will see in the next section, you can build your semantic elements simply using the web platform standard technologies.

What are Web Components?

Decomposing a Web UI, as shown in the previous section, seems quite natural and desirable. It is an effective approach that allows you to create, at the same time, well-structured UIs and reusable UI elements. Also, since a component is a generic concept, and you can create a new component by combining other components, you can consider a component, even your whole application.

For years, developers have been looking for a way to autonomously extend the possibilities offered by HTML to create advanced UI elements. The result of their efforts has been libraries like jQuery UI, React, Angular, Vue, and similar. All these libraries provide ways to create UI elements following the component model.

Many of these libraries are very popular, and each one proposes their approach to create UI components, and each one somehow tries to map UI elements to markup. Anyway, they have a few drawbacks:

They are not standard

They are not natively supported by the browsers

They are not interoperable

In other words, the UI component created with these libraries can be used only in projects supporting the same library. You cannot create a component with React and use it within an Angular application. If you want to create a UI element that can be used in a React application and an Angular application, you need to implement two versions of the element.

Web Components try to overcome these drawbacks by allowing you to create UI elements by using standard technologies natively supported by the browsers.

Web Components are a set of standard specifications for creating custom HTML elements that can be reused in web pages and applications. The first mention of the principles of this technology dates back to 2011, during the session of Alex Russell at the Fronteers conference in Amsterdam. His proposal has been taken into account by the W3C that published the first Working Draft in 2012. Since then, the standardization process has introduced several variations to the original idea, so that we got two different versions of the specifications over time, identified with v0 and v1. Currently, Web Components are no longer based on separate specifications but refer to the standards of HTML and Document Object Model (DOM), which they are now an integral part of.

Web Components lay on three standard features of web technologies:

Custom elements: They represent a set of JavaScript APIs for creating custom DOM elements associated with a specific HTML tag.

Shadow DOM: A set of JavaScript APIs that allow managing a specific DOM for a component, independent from the web page’s DOM

HTML templates: It is an integration to the HTML specifications that allows you to define portions of markup that are not interpreted when the page is loading, but that is instantiated at runtime.

Thanks to the Web Components technology, you can extend standard HTML elements to have customized look and feel and behave. You can also create your HTML tag and use it in an HTML page as a standard element. You can do all this independently from the JavaScript library or framework you are using to build your application.

You could have heard about a fourth technology Web Components rely on: HTML Imports.

Although it is an official alive W3C specification, practically it is not supported by any browser because it is superseded by ECMAScript modules.

See for example the following document that declares HTML Imports deprecated for Chrome: https://www.chromestatus.com/feature/5144752345317376

Using a Web Component

So far, we talked about components and Web Components abstractly. Now it’s time to start seeing in action this technology.

Let’s begin exploring Web Components from the viewpoint of a developer who wants to use a ready-to-use component. You will learn how to build your web component throughout the rest of the book.

To show how to use a web component developed by a third party, we will refer to a component that allows you to give a rating through a certain number of stars, similar to the UI elements you find in many e-commerce websites.

Check the documentation of this simple project on GitHub to know more about the component - https://github.com/andychiare/rating-component.

Let’s start by creating an empty HTML page and with reference to the code of the component, as shown by the following markup: