Learn to scale UI libraries for performant, enterprise-ready apps

The Fullstack Web Components book is the complete guide to building UI Libraries with Web Components

    • Learn Web Components through the lens of a JavaScript developer

    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.

    What's in the book

    Fullstack Web Components teaches you how to code complex user interfaces with custom elements

    1The basics of working with and manipulating Web Components
    2How to server-side render Web Components with Declarative Shadow DOM and Node.js
    3How to create a micro-library for Web Components with TypeScript Decorators
    4How to build web applications entirely from Web Components and JavaScript
    5The best practices for maintaining a UI library made of custom elements
    6What problems Web Components can solve in everyday development

    Our students work at

    • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

    👋 Hi, I’m Steve, the author of this book.

    I’m a Principal Front-end Software Engineer at Swimlane. I started tinkering with web development back in the 90s…and never stopped.

    I specialize in user interface library and web application architecture. I have developed interactive user experiences for enterprise corporations (Lexus, Ubiquiti Networks, NBC Universal, Nike, and Symantec) and have taught computer science and engineering at General Assembly and Syracuse University.

    I am passionate about teaching the next generation of web engineers how to navigate the ever-expanding web platform. In this book, I’ll show you how to master Web Components in a way that can benefit you, other developers, students, or anyone making a website.

    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.

    Table of Contents

    • Introduction1
    • Acknowledgements 
    • Foreword 
    • Introduction to Web Components 
    • Conventions Used In The Book 
    • Setting Up The Development Environment 
    • Module 1 Summary 
    • Part One2
    • Specification 
    • Getting to Know Web Components3
    • Autonomous custom elements 
    • Template Slots 
    • Styling CardComponent 
    • Testing the card 
    • Chapter One Summary 
    • Form-associated custom elements4
    • Form-associated custom elements 
    • TextInputComponent 
    • Form Associated and ElementInternals 
    • Handling Validation 
    • Listening for attribute changes 
    • User feedback 
    • Emulating HTMLInputElement 
    • Making a form 
    • Chapter Two Summary 
    • Customized built-in elements5
    • Customized built-in elements 
    • Scaffolding ButtonComponent 
    • Styling ButtonComponent 
    • Making the form accessible 
    • Chapter Three Summary 
    • Part Two6
    • UI Library 
    • Micro-library7
    • Micro-library 
    • Class Decorator 
    • Method Decorator 
    • Chapter Four Summary 
    • Compound Custom Elements8
    • Component Communication 
    • Mocking Table Data in Storybook 
    • Coding Compound Components 
    • Making the Table Editable 
    • Summary 
    • Powering Dialogs with HTML Templates9
    • HTML Templates 
    • Mocking the Dialog in Storybook 
    • DialogComponent 
    • Modal and Tooltip 
    • Querying DOM Across Shadow Boundaries 
    • DialogStack 
    • Chapter Six Summary 
    • Distributing Custom Element Libraries10
    • UI Libraries 
    • Distribution 
    • Documentation 
    • Continuous Integration 
    • Chapter Seven Summary 
    • Part Three11
    • Application 
    • Application Development with Custom Elements12
    • Application Development with Custom Elements 
    • Landing Page 
    • Header 
    • CookieFooter 
    • Background 
    • Chapter Eight Summary 
    • Routing Custom Elements in a SPA13
    • Routing Custom Elements in a SPA 
    • Routing 
    • Login View 
    • Dashboard View 
    • Chapter Nine Summary 
    • Server-side Rendering with Declarative Shadow DOM14
    • Server-Side Rendering Custom Elements 
    • Declarative Shadow DOM Templates 
    • Shim 
    • Express Middleware 
    • Chapter Ten Summary 
    • Fullstack Web Components15
    • Conclusion 

    Purchase the book today

    Newline Image
    Fullstack Web Components
    Learn to scale UI libraries for performant, enterprise-ready apps
    Instantly download the complete book and code examples
    $69 $79
    • PDF, EPub, and Mobi
    • Completed Code Files
    • Access to our community
    • Learn to create custom web components
    get It Now
    Fullstack Web Components
    Every book in the newline library with newline Pro
    Learn more about the benefits of newline Pro
    Get access to Fullstack Web Components and every other book in the newline collection
    $18/mo
    • Access to every book
    • Complete Code Files for each title
    • Access to our community
    Error: Can't find product newline-basic-subscription-monthly. Please contact [email protected]

    I'm wondering...

    Who is this book for?

    This book is great for any web developer who desires a hands-on experience learning how to integrate Web Components into their development processes as if you were developing a UI library at an enterprise corporation.

    Do I need to be a web developer to get something out of this book?

    While it is helpful to have a basic knowledge of HTML, CSS, and JavaScript, you will still get a lot out of this book without a relevant background in web development. The book has modules that use HTML, CSS, TypeScript and JavaScript frameworks. The book will cover an array of topics useful in developing a website using only browser specifications.

    Why Web Components?

    Web Components are a powerful tool for user interface development. Web Components are interoperable. Adding Web Components to your stack can help you scale a UI library to multiple teams. Web Components 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.

    What if I need help?

    You can ask us questions anytime through the community Discord channel or by sending us a message.

    What happens after I buy the book?

    If you subscribe to newline Pro you'll be able to read Fullstack Web Components and a dozen other books online. If you buy through Gumroad, you'll also receive an email from Gumroad giving you instructions on how to download it.

    Is the book complete?

    Yes

    Are there free updates?

    Yes! Buying now entitles you to free updates for at least one year after purchase.

    How do I download the book and updates?

    If you've purchased the book through Gumroad, you can download it from your Gumroad library. You can also read the book online if you are part of our Pro plan.

    What if I don't like it?

    If you're unhappy with the book for any reason, just reach out to us and we'll give you a full refund. There's no risk.

    Get an In-Depth introduction to Web Components and how they’re used in the real world

    Learn to code your first autonomous custom element using Shadow DOM, HTML templates and ES Modules within minutes.

    I'm in!

    Jump to purchase options