Fullstack Web Components: Complete Guide to Building UI Libraries with Web Components

Book Description

Web Components are a powerful tool for user interface development. They are interoperable and adding them to your stack can help you scale a UI library to multiple teams. Plus they can have a long lifespan because they are built with browser specifications. Web Components are performant because they don’t have to rely on the overhead from JavaScript frameworks.

There are several books about Web Components, but none go into how to integrate Web Components in an enterprise web development workflow. This book is designed to help you learn Web Components and integrate it into your actual work.

Get hands-on experience coding UI with Web Components, but also learn how to test and maintain those components in the context of a distributed UI library in Fullstack Web Components.

Every chapter contains step-by-step instructions for coding each component and developing a web application with Web Components.

We’ll start by coding UI components using the set of specifications that comprise Web Components, increasing in complexity while covering real world problems: forms, custom templates, editable tables, and dialogs along the way. In a lerna monorepo, we’ll code almost exclusively with Storybook as our development environment and write tests for each component using Cypress. By the end of this book, you’ll have developed a user interface library from a design system in Figma and used those components in the context of a web application.

Fullstack Web Components contains 15 chapters filled with everything you will need to learn how to scale UI libraries for performant, enterprise-ready apps.

中文：

书名：Fullstack Web组件: 使用Web组件构建UI库的完整指南

Web组件是用户界面开发的强大工具。它们是可互操作的，将它们添加到堆栈中可以帮助您将UI库扩展到多个团队。此外，它们可以有很长的寿命，因为它们是用浏览器规格构建的。Web组件是高性能的，因为它们不必依赖JavaScript框架的开销。

有几本关于Web组件的书，但没有一本涉及如何在企业Web开发工作流程中集成web组件。本书旨在帮助您学习Web组件并将其集成到实际工作中。

获得使用Web组件对UI进行编码的实践经验，还可以学习如何在Fullstack Web组件中的分布式UI库的上下文中测试和维护这些组件。

每章都包含对每个组件进行编码以及使用web组件开发Web应用程序的分步说明。

我们将首先使用包含Web组件的一组规范对UI组件进行编码，从而增加复杂性，同时涵盖实际问题: 表单，自定义模板，可编辑表和对话框。在lerna monorepo中，我们将几乎完全使用Storybook作为开发环境进行编码，并使用Cypress为每个组件编写测试。在本书结束时，您将从Figma中的设计系统开发一个用户界面库，并在web应用程序的上下文中使用这些组件。

Fullstack Web组件包含15章，其中包含您需要学习的所有内容，以了解如何扩展高性能，企业就绪的应用程序的UI库。