I'm thinking about starting a new side project and I'm currently using React and Material-UI for my front-end development. However, I'm starting to wonder if it's finally time to switch gears and try out Web Components. I see a few challenges that Web Components might face compared to React, especially in terms of packaging and data binding.
For packaging, React's TSX (or JSX) makes it easy to bundle HTML templates, CSS, and JS together, while Web Components seem to require you to either put your HTML and CSS directly in your HTML files, use an iframe, or embed them in your TypeScript code as strings. I wonder if there's a straightforward solution out there that wraps this up nicely, or do I have to code my own mock of React?
When it comes to data binding, most Web Component tutorials I've looked into suggest manually updating the DOM in response to data changes and setting up event handlers for user interactions. I found libraries like MobX that could help, but much of their documentation leans toward React integration, not really focusing on Web Components.
I want to avoid having to come up with my own half-baked solutions for these issues. Are there any existing tools or libraries that tackle these challenges for Web Components?
4 Answers
I don’t think you have to choose strictly between React and Web Components! For my next project, I'm planning to use the WebAwesome component library, which is created with Web Components, but I’ll still be leveraging React. Mixing them can work, but you might need to be disciplined about structure to keep things tidy. By the way, that WebAwesome library has a unique way of handling packaging—definitely worth a look!
From what I understand, React and Web Components are designed for different purposes. Web Components offer strong reusability while React provides a declarative way to sync the DOM with your data. Each has its strengths, and sometimes they're better together. You might want to check out Lit—it's a library that could work well for your needs, especially if you want both features.
Honestly, I’ve moved away from both of them. I’ve been using AlpineJS and HTMX lately, which lets me stick to plain HTML and small bits of attributes to bring it to life. It's less bulky than using a big framework. For custom components, I just create them as AlpineJS components and it’s been great. Web Components have been stable for a few years now, especially for reusable inputs; you can even deploy them via CDNs.
Why not consider using Vue? It can be set up to utilize components as Web Components, giving you the best of both worlds! You might find it a smoother experience than mixing frameworks.
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads