Getting Started with Web Components

Getting Started with Web Components

by Prateek Jadhwani
Released August 2019
Publisher(s): Packt Publishing
ISBN: 9781838649234

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Getting Started with Web Components
  3. About Packt
    1. Why subscribe?
  4. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  6. Web Components Essentials and Specifications
    1. Technical requirements
    2. Web Components
    3. Web Component specifications
      1. Custom elements
        1. Types of custom elements
      2. Shadow DOM
      3. Templates
      4. Module loader API
        1. Named export versus default export
        2. Custom elements using imports
    4. Summary
  7. Web Components Life Cycle Callback Methods
    1. Overview of life cycle callback methods
    2. Types of life cycle callback methods
      1. connectedCallback()
      2. disconnectedCallback()
      3. adoptedCallback()
      4. attributeChangedCallback()
    3. Summary
  8. Universal Web Components
    1. Styling Web Components
    2. Accessibility for Web Components
    3. Gold Standard Checklist
    4. Summary
  9. Building Reusable Web Components
    1. The concept of reusability
    2. Responsive Web Components
      1. Building <profile-info> Web Component
    3. Publishing Web Components
    4. Extending Web Components – slots
      1. Creating <my-article> Web Component
    5. Summary
  10. Managing States and Props
    1. Introduction to state management
    2. Attributes and properties
    3. Event handling
    4. Summary
  11. Building a Single Page App using Web Components
    1. Understanding project requirements
    2. Figuring out reusable Web Components
    3. Configuring the Starter Project and APIs
      1. Pre-requisites
      2. Setting up the project
      3. Running the Starter Project
      4. Pre-requisite for API calls
    4. App components
    5. Functional components
      1. The <gif-cover> Web Component
      2. The <search-bar> Web Component
      3. The <search-container> Web Component
      4. The <show-trending> Web Component
      5. The <show-random> Web Component
      6. The <my-app> component
    6. Implementing routing
    7. Enabling analytics
    8. Summary
  12. Implementing Web Components using Polymer and Stencil
    1. Polymer
      1. Hello World in Polymer
      2. Nested elements in Polymer
      3. Attributes and properties in Polymer
    2. Stencil
      1. The Hello World Stencil component
      2. Nested Stencil components
      3. Pre-rendering for Stencil components
    3. Summary
  13. Integrating Web Components with a Web Framework
    1. The <header-image> web component
    2. Integrating Web Components in React
      1. Setting up a React project
      2. Adding a React component
      3. Integration of Vanilla Web Component in a React component
    3. Integrating Web Components in Angular
      1. Setting up an Angular project
      2. Integrating with Angular
    4. Integrating Web Components in Vue
    5. Summary
  14. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Getting Started with Web Components
  • Author(s): Prateek Jadhwani
  • Release date: August 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781838649234