I'm currently revamping several components of the admin panel for my ecommerce website builder SaaS. The backend uses Swoole (a high-speed PHP runtime), while the frontend is built with vanilla JavaScript. One of the key components I'm focused on is the product variant editor, which is fairly complex. Although I can't detail every feature here, if you're familiar with Shopify's variant system, you'll get the idea—my system includes all of those features and some additional ones.
I've been considering Svelte since I did a little test with a basic counter that compiled down to a custom element (web component), making it possible to embed into my app. However, I'm not sure if there might be other frameworks out there that could maybe simplify the process even more. I'm not particularly knowledgeable about React, Vue, Solid, or Qwik but I'm open to learning something new if it's more suitable for my use case.
10 Answers
For extending a web app, Svelte could be ideal due to its lightweight runtime. It’s compiled at build time, which means it doesn't bloat your app unnecessarily. If you're okay with build steps, Svelte or any other framework should work well. If you don’t want a build step, Vue might be the best option for you.
If you're considering integration within an existing app, Solid is a solid choice. It compiles to native DOM nodes and integrates smoothly with JavaScript—plus, there's no tricky syntax to learn, which is a great advantage.
What makes Solid better than Svelte? I've heard it's similar to React, but that's about it.
If Svelte fits your needs, go with it! It generates web components well. For simpler components, Lit might also be a good alternative.
The complexity of your widget may dictate your choice. For something primarily HTML-based, consider using Facet. It's straightforward and works nicely with vanilla JS.
If you're working with a strictly vanilla JavaScript app, Web Components might be the route to explore. It's a bit confusing to ask for frameworks when you've mentioned that the component is complex but haven’t shared specifics. Just to clarify, are you looking for a specific feature set or just general advice?
By vanilla JS, I mean my admin panel doesn't use any frameworks at all. The product variant editor is definitely complicated; I'm just trying to find the best way to implement it.
Check out this library I'm working on. It's built for developing web components, and I’d love your feedback since it might align well with your project goals. It emphasizes minimalism while providing a fully type-safe prop API.
Have you looked into Stencil for creating web components? It’s pretty flexible for your needs.
With frameworks like Vue, you can actually skip the compilation step, though it's advised to use it for the best results. I’ve tried various frameworks, and Vue stands out as my favorite.
Rimmel.js allows for optional build steps and operates on a different paradigm with reactive streams. It mixes well with vanilla JS and might be exactly what you're looking for if you're comfortable with RxJS.
For a user-friendly integration, try petite-vue or Preact—great options for embedding without a full framework overhead.
Thanks for the suggestions! I’m considering Preact for light usage and Lit for more complex needs.
You can technically use React without JSX, but it gets a bit complicated. It may not be the best fit for your complex widget.