Exploring Web Components

Build Reusable UI Web Components with Standard Technologies

Andrea Chiarelli

• Publisher: BPB Publications
• Year: 2020
• eBook ISBN: 9789389423976
• Topic: Design
• Subtopic: Web Design

Learn how to create reusable components to build modern Web user interfaces with standard technologies Key Features

• Learn how standard Web technologies allows you to build reusable UI components.
• Learn how to protect the look and the internal behavior of your components.
• Learn how to use Web Components in React, Angular, and Vue projects.
• Learn how to use third-party libraries and tools to simplify the process of building your components.
• 
  Description
  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. What will you learn
  
• Use Custom Elements technology to define your HTML elements.
• Use Shadow DOM to protect the inner behavior of your UI components.
• Work with HTML templates to simplify and enhance the way you define the UI of your components.
• Reuse your Web Components in applications built with Vanilla JavaScript, React, Angular, and Vue.
• 
  Who this book is for
  This book is for frontend Web developers who want to leverage standard technologies to build reusable UI components. Basic knowledge of JavaScript, HTML, and CSS is required. Table of Contents
  1. Getting Started with Web Components
  2. Extending HTML Elements
  3. Creating Custom Web Components
  4. Managing Properties and Attributes
  5. Handling Events
  6. Using the Shadow DOM
  7. Using HTML Templates
  8. Distributing and Extending Web Components
  9. Web Components and Other UI Frameworks
  10. Tools for Web Components Development About the Author
  Andrea Chiarelli is a software engineer and technical author with more than 20 years of experience in the software development industry. Throughout his career, he used several programming languages and technologies for the projects he was involved in. Lately, he is focusing on the JavaScript ecosystem both on the server and on the client-side.
  He has contributed to many online and offline magazines and authored a few books.
  Currently, he is working at Auth0 as an R&D Content Engineer. Your Blog links:
  https://andreachiarelli.it/ Your LinkedIn Profile:
  https://www.linkedin.com/in/andreachiarelli/
  

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:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8”>

<!-- Style, script and other head stuff -->

</head>

<body>

<account-management-bar></account-management-bar>

<navigation-bar></navigation-bar>

<front-cover></front-cover>

<news-area></news-area>

<sign-up-form></sign-up-form>

<missi...

Table of contents

• Cover Page
• Title Page
• Copyright Page
• Dedication Page
• About the Author
• About the Reviewer
• Acknowledgement
• Preface
• Errata
• Table of Contents
• 1. Getting Started with Web Components
• 2. Extending HTML Elements
• 3. Creating Custom Web Components
• 4. Managing Properties and Attributes
• 5. Handling Events
• 6. Using the Shadow DOM
• 7. Using HTML Templates
• 8. Distributing and Extending Web Components
• 9. Web Components and Other UI Frameworks
• 10. Tools for Web Components Development