ManningBooks

ManningBooks

Devtalk Sponsor

Web Component Development with Modern Libraries and Tooling (Manning)

In Web Component Development with Modern Libraries and Tooling, you’ll learn how to build reusable web components that last well beyond the next library update. In this practical and easy-to-follow guide, author Mark Volkmann shows you how Web components deliver something no JavaScript framework can match: true portability.

Mark Volkmann

If your team has ever rebuilt the same UI component for React, then again for Vue, then again for whatever comes next, this book will feel very relevant. Web components offer a standards-based way to build UI pieces that work across frameworks, in plain HTML, and even in places like Markdown documents. They’re supported by modern browsers and aren’t tied to a single frontend ecosystem.

Mark Volkmann takes a practical route through the subject. The book starts with why web components are worth learning, then moves quickly into building and using them.

You’ll work with examples such as:

  • hello-world

  • google-button

  • radio-group

  • sortable-table

  • traffic-light

The early chapters introduce Web Awesome, the successor to Shoelace, and show how to use prebuilt components for inputs, dialogs, drawers, progress indicators, ratings, and more. From there, the book digs into vanilla web components: custom elements, attributes and properties, lifecycle callbacks, Shadow DOM, styling, form participation, and shared state.

There’s also a full chapter on best practices, based on the web.dev custom elements checklist. It covers details that matter once components move beyond demos: reflecting primitive properties, avoiding rich data in attributes, using slots well, respecting the hidden attribute, dispatching events correctly, and more.

Later chapters cover the libraries and tools many teams use in production:

  • Lit

  • Stencil

  • FAST

  • wrec

  • JavaScript decorators

  • Custom Elements Manifest

  • Storybook

  • Playwright

  • server-side rendering

  • AI-assisted component generation

The book also shows how to use web components inside Angular, React, Solid, Svelte, and Vue, which is especially useful if you’re trying to share a design system across multiple apps.

Mark brings a lot of practical experience to this topic. He’s a Partner and Distinguished Engineer at Object Computing, Inc., and has worked with JavaScript, Node.js, Svelte, React, Vue, Angular, Swift/SwiftUI, and more. He’s also the author of Svelte and Sapper in Action and Server-Driven Web Apps with htmx.

This book is aimed at working web developers who know the basics of HTML, CSS, and JavaScript and want a structured path into web components instead of piecing everything together from scattered posts and examples.


Don’t forget you can get 45% off with your Devtalk discount! Just use the coupon code “devtalk.com” at checkout :+1:

Most Liked

peterchancc

peterchancc

Finally. I have been waiting for a good book on web components. :

Where Next?

Popular Frontend topics Top

PragmaticBookshelf
Database-driven sites bring complexity you might not need, but building a site by hand is too much work. Hugo is a static site generator ...
New
PragmaticBookshelf
ReasonML is a new, type-safe, functional language that compiles to efficient, readable JavaScript. ReasonML interoperates with existing J...
New
PragmaticBookshelf
Dive right into React by defining components, the basic building blocks of a React application. Ludovico Fischer @ludofischer Edite...
New
PragmaticBookshelf
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
JesseSkinner
I’ve developed a video course called The Joy of Svelte, where I go in depth on Svelte features, especially different ways to manage state...
New
ManningBooks
In Modern C, Third Edition you’ll learn to harness C’s full potential using the latest tools and techniques. After a quick review of the ...
New
ManningBooks
For over fifteen years, The Well-Grounded Rubyist has taught beginner and developing Ruby programmers the veteran secrets of Ruby. This n...
New
ManningBooks
Server-Side WebAssembly lays out everything you need to take WebAssembly beyond its traditional browser domain. You’ll put on the hats of...
New
ManningBooks
In Web Component Development with Modern Libraries and Tooling, you’ll learn how to build reusable web components that last well beyond t...
New
ManningBooks
It’s frustrating to deliver a feature exactly as specified and still wonder whether it solves a problem anyone actually has. Raising that...
New

Other popular topics Top

PragmaticBookshelf
Machine learning can be intimidating, with its reliance on math and algorithms that most programmers don't encounter in their regular wor...
New
PragmaticBookshelf
Ruby, Io, Prolog, Scala, Erlang, Clojure, Haskell. With Seven Languages in Seven Weeks, by Bruce A. Tate, you’ll go beyond the syntax—and...
New
AstonJ
This looks like a stunning keycap set :orange_heart: A LEGENDARY KEYBOARD LIVES ON When you bought an Apple Macintosh computer in the e...
New
AstonJ
Do the test and post your score :nerd_face: :keyboard: If possible, please add info such as the keyboard you’re using, the layout (Qw...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
PragmaticBookshelf
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
New
First poster: AstonJ
Jan | Rethink the Computer. Jan turns your computer into an AI machine by running LLMs locally on your computer. It’s a privacy-focus, l...
New
Fl4m3Ph03n1x
Background Lately I am in a quest to find a good quality TTS ai generation tool to run locally in order to create audio for some videos I...
New
PragmaticBookshelf
Lint your docs like code: turn any style guide into enforceable rules with Vale and publish clear, consistent content every time. ...
New
CommunityNews
Open-source implementation of the classic GTA engine now running directly in your browser. Experience the reVC technology demo on DOS.Zon...
New