Getting Started with Web Components

Build modular and reusable components using HTML, CSS and JavaScript

Prateek Jadhwani

• Publisher: Packt Publishing
• Year: 2019
• ISBN:
  9781838640033
• Edition: 1
• Topic: Design
• Subtopic: Web Design

Explore modern Web Component design and integrate them with a variety of web frameworks to build encapsulated reusable UI components for your web apps

Key Features

• Learn Web Components with more than 50 web component examples for both beginners and advanced users
• Create responsive and highly customizable web pages using HTML, CSS, and JavaScript
• Extend the potential of Web Components by integrating them with standard web frameworks

Book Description

Web Components are a set of APIs that help you build reusable UI modules that can operate in any modern browser using just Vanilla JavaScript. The power of Web Components lies in their ability to build frontend web applications with or without web frameworks.

With this practical guide, you will understand how Web Components can help you build reusable UI components for your modern web apps. The book starts by explaining the fundamentals of Web Components' design and strategies for using them in your existing frontend web projects. You will also learn how to use JavaScript libraries such as Polymer.js and Stencil.js for building practical components. As you progress, you will build a single-page application using only Web Components to fully realize their potential. This practical guide demonstrates how to work with Shadow DOM and custom elements to build the standard components of a web application. Toward the end of the book, you will learn how to integrate Web Components with standard web frameworks to help you manage large-scale web applications.

By the end of this book, you will have learned about the capabilities of Web Components in building custom elements and have the necessary skills for building a reusable UI for your web applications.

What you will learn

• Understand Web Component design, specifications, and life cycle
• Create single-page applications using Web Components
• Enable reusability and customization for your UI components
• Implement Web Components in your web apps using Polymer and Stencil libraries
• Build powerful frontend components from scratch and deploy them on the web
• Design patterns and best practices to integrate Web Components into your existing web application

Who this book is for

This book is for developers who have heard about web components, but don't really know where to start. This book is also for intermediate and advanced developers who know what web components are, but are still afraid to use them in production. This book is also for frontend engineers who are simply looking into web components in order to increase their knowledge and skills.

Building a Single Page App using Web Components

So far, we have been using Web Components as an individual entity. But Web Components can be used to make something even more complicated. In this chapter, we will be making a single page web app, solely with the help of Web Components.

In this chapter, we'll cover the following topics:

• Understanding project requirements
• Figuring out reusable Web Components
• Configuring starter project and APIs
• App components
• Other components
• Implementing routing
• Enabling analytics

Understanding project requirements

When it comes to a single-page web app, it can be anything from one page to a thousand pages that you can show on the web app. But for the simplicity of this web app, we will keep it to a maximum of three pages. And the project that we will be trying to create is a GIF collection web app.

We all have been on the internet, and seen how memes and GIFs circulate. In this web app, we will be building something like a GIF repository. The purpose of this web app is to let the user see a list of trending GIFs, search for a specific topic, or maybe see a random GIF.

What we are also going to do is use the GIPHY API to get the GIFs. This way, we won't have to worry about manually scanning the web for GIFs.

Now that we have a basic understanding of our web app and the purpose behind it, let's take a look at how we can convert this requirement into a set of reusable Web Components.

Figuring out reusable Web Components

The main page of the web app we're aiming to create might look something like this:

This page shows that there is a header on top, an input field and a button that can be used to search a string, and a set of results. When we break this page into a set of components, the component list looks something like this:

• Header component: A header that can be used on all pages. It needs to be sticky on the top, and clicking on the links should change the URL.
• GIF cover component: A component that takes a URL as an attribute and shows it. It can also have a height limit.
• Search bar component: A component that is responsible for getting input from a user and searching for a string with the help of APIs. And when the search is complete, it returns the results with the help of a custom event.
• Search container: A component that will have a Search bar component inside it, and will show GIF cover components based on the result obtained by the Search bar.

Let's take a look at the trending page. What this page is supposed to do, just like the search page, is show a collection of GIFs, but instead of making the user search for a specific string, it needs to show the trending GIFs. You should be able to find something similar on the Giphy site: https://giphy.com/trending-gifs.

This is what it will look like:

As you can see, it doesn't look that much different from the search page. Let's break down the page into Web Components:

• Header component: Same as previously
• GIF cover: The same component that we used on the last page to show GIFs
• Show Trending component: The container component that will make the call to the API to get trending GIFs and create a collection of GIF Cover components

In all, we will be using just three components for this page.

Let's take a look at the last page. This page is responsible for showing a randomly generated GIF, and this is what it will look like:

As you can see, there is a header at the top, a random GIF, and a button to get another random GIF. Let's break it down into Web Components:

• Header component: Same as previously.
  
• GIF cover: Same as the last one, but we won't be seeing a lot of them.
• Show Random component: A component that is responsible for making the API call to get a random GIF. It also needs to have a button that needs to trigger the API again when it is clicked.

Now that we know what Web Components are required for this project, let's start working on it.

Configuring the Starter Project and APIs

A starter project is the most minimalistic project that is configured for a single page web app. You can download it from the Starter Project directory and put it anywhere on your computer via the following link: https://github.com/PacktPublishing/Getting-Started-with-Web-Components/tree/master/Chapter06

Pre-requisites

Before you start using this project, make sure that you have Node.js installed on your computer. You can install it from the Node.js website (https://nodejs.org/en/) or, if you want, you can use Homebrew (https://brew.sh/) to install it.

Setting up the project

Once you are done installing Node.js, you will need to install certain packages that would make the project work without doing a lot of manual configurations at our end. All the packages are already specified in the package.json file. If you want, feel free to look at the contents of this file. The most important package is webpack, which is going to be used for bundling our code so that it can be served on a server. Another important package is node-sass. It will help us write our code in SCSS.

I am assuming that you know a little bit of SCSS. It is mostly CSS, but if you get confused, feel free to take a look at the SCSS documentation (https://sass-lang.com/documentation/syntax).

You can install the packages involved by typing the following steps in the Terminal:

cd Chapter\ 06/Starter\ Project/
npm install

This will install all the packages that will be required for this project. It might take a few minutes though, based on the speed of your internet connection.

Running the Starter Project

Now that we have installed all our dependencies, it is time to run the Starter Project and see what it ...