Book Image

Getting Started with Web Components

By : Prateek Jadhwani
Book Image

Getting Started with Web Components

By: Prateek Jadhwani

Overview of this book

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.
Table of Contents (14 chapters)
Title Page
7
Implementing Web Components using Polymer and Stencil

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...