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
You work in a loop: write code, get feedback, iterate. The faster you get feedback, the faster you can learn and become a more effective ...
New
PragmaticBookshelf
Upgrade your skill set, succeed at work, and avoid the many headaches that come with modern front-end development. Simplify your codebase...
New
PragmaticBookshelf
Design and code JavaScript applications with automated tests. Fire up your editor and get hands-on through practical exercises for effect...
New
PragmaticBookshelf
Web development is constantly changing, and you need to stay on top of your game. Discover a wide spectrum of web development techniques ...
New
chaptuck
A fun/silly website I used to learn Flexbox is https://flexboxfroggy.com/. It is surprisingly helpful for learning all the pieces of flex...
New
PragmaticBookshelf
Combine Rails 7, TypeScript, Turbo, Stimulus, and React to build rich user interaction into your websites using the best of both server a...
New
ManningBooks
With over 20 years of experience building enterprise software and leading frontend teams at successful startups and Fortune 500 companies...
New
ManningBooks
Latency: Reduce delay in software systems shows you how to troubleshoot latency in existing applications and create low-latency systems f...
New
ManningBooks
Written by core Node.js and TC-39 committee contributor James M. Snell, JavaScript in Depth teaches you what’s really happening when Java...
New
ManningBooks
Architecting Accessibility shows you how to build web applications that work for everyone. Rather than treating accessibility as a checkl...
New

Other popular topics Top

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
DevotionGeo
I know that these benchmarks might not be the exact picture of real-world scenario, but still I expect a Rust web framework performing a ...
New
Exadra37
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
New
AstonJ
You might be thinking we should just ask who’s not using VSCode :joy: however there are some new additions in the space that might give V...
New
New
foxtrottwist
A few weeks ago I started using Warp a terminal written in rust. Though in it’s current state of development there are a few caveats (tab...
New
PragmaticBookshelf
Author Spotlight Jamis Buck @jamis This month, we have the pleasure of spotlighting author Jamis Buck, who has written Mazes for Prog...
New
PragmaticBookshelf
Get the comprehensive, insider information you need for Rails 8 with the new edition of this award-winning classic. Sam Ruby @rubys ...
New
PragmaticBookshelf
A concise guide to MySQL 9 database administration, covering fundamental concepts, techniques, and best practices. Neil Smyth MySQL...
New
PragmaticBookshelf
Use advanced functional programming principles, practical Domain-Driven Design techniques, and production-ready Elixir code to build scal...
New