Manning Early Access Program (MEAP)
Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
Development teams increasingly face pressure to future-proof their code—and that makes framework lock-in a serious liability. 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. Built on W3C standards and supported natively by every modern browser, web components let you build UI elements once and reuse them anywhere, in React, Vue, Angular, Svelte, plain HTML, or even Markdown documents. No framework downloads and no immovable dependencies.
The early chapters introduce Web Awesome, one of the most popular web component libraries. Using Web Awesome, you’ll build a UI complete with color-changing radio buttons, animated progress indicators, and more. Then, as you progress into the middle chapters,, you’ll dive into creating your own web components in vanilla JavaScript, and discover 15 essential best practices that separate professional-grade components from ones that won’t stand the test of time.
Once you’ve learned how web components work, you’ll get a leg up with libraries like Google’s Lit, Microsoft’s FAST, Ionic’s Stencil, and wrec—a library created author Mark Volkmann. You’ll then integrate components with Angular, React, Solid, Svelte, and Vue, apply professional tooling for documentation, testing, and demonstration, and tackle server-side rendering. Finally, finish up with solid advice on utilizing LLMs to implement web components and use them in web applications.
In each chapter, you’ll work on progressively more sophisticated example components including hello-world, google-button, radio-group, sortable-table, and traffic-light. Every example is chosen to illustrate concepts in a flexible way you can adapt to your own real-world projects. And unlike scattered blog posts and lightweight video tutorials, this substantial book provides both a clear structured learning path and a valuable reference for your future projects.
what's inside
Implement vanilla web components
Augment development with Custom Elements Manifest, Storybook, and Playwright
Generate web component code with AI coding agents
about the reader
For working web developers who know basic HTML, CSS, and JavaScript.
about the author
Mark Volkmann is a Partner and Distinguished Engineer at Object Computing, Inc. (OCI) in St. Louis where he provides software consulting and training. He has assisted many companies with JavaScript, Node.js, Svelte, React, Vue, Angular, Swift/SwiftUI, and more. He has also authored Svelte and Sapper in Action, and Server-Driven Web Apps with htmx.
Introductory offer Save 50% for a limited time!
eBook
pdf, ePub, online
$55.99
$27.99
you save $28.00 (50%)
Introductory offer Save 50% for a limited time!
print
includes eBook
$69.99
$34.99
you save $35.00 (50%)
with subscription
free or 50% off
$24.99
pro $24.99 per month
access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!