Svelte VS Alpine.js

[1] The question of removing the shadow DOM or creating the topic has been reported at the webcomponents/polyfills repository under issue #82 , and svelte/sveltjs issue #1748 .

I opened an issue on Svelte's GitHub here and they didn't like that feature :)

But if you're going to be guaranteed coding all your components from scratch anyway, i'd recommend svelte instead. Because it has less bloat (no vDOM / less complicated state lifecycle to care about), and is easier to style without other libs like tailwind or vanilla-extract.

The next step is to create and set up a new Svelte project for the ecommerce project. This Svelte commerce will use SvelteKit since it is the recommended setup method.

Svelte is a JavaScript framework that compiles your code into efficient JavaScript that surgically updates the DOM. It is a compiler that converts your code into a more efficient version of itself.

If I were starting something, (or even if I were incrementally moving over pages from a larger project as they were touched), I would use Svelte / Svelte Kit 100% of the time. It's effectively a language (the use of JS/TS, CSS, and HTML together but nicer) with a compiler rather than a runtime framework. It's dead simple and it produces insanely small and performant output by default. Both of those have excellent tutorials you can use right on their website without installing anything.

In 2023 there are a wealth of developer options for front-end: React, Vue, Svelte, Solid and many more.

There are many libraries and frameworks that try to change the roles like Svelte, that creates precompiled JS code from a source, which is made of a melange of HTML and JS. Finally you have the choice to run your code on server- oder client side.

If your app requires high performance, consider using a framework that is specifically designed for performance, such as Svelte, Vue, or React. If you insist on using Angular, you can still optimize your application by following the tips below...

It depends a lot on what your project actually needs, but something like HTMX, AlpineJS, or even just plain old Typescript/Javascript might well be enough. If the majority of the work will be happening on the back end in Kotlin, and all you need is some UI to occasionally update itself or toggle a menu or something, then you don't really need to touch any of the heavyweight options at all.

To get started, I created a new project folder and created an empty html file. I chose not to use npm and instead opt for link and script tags from CDNs. I threw in Bootstrap and Alpine.js. Alpine is basically the modern version of jQuery, and I'm more comfortable with Alpine from the copious amount of classes my school had on it that one year. Bootstrap provided me with a pre-built user interface that I could customize, and Alpine.js allowed me to add interactivity to my app.

I disagree with u/AgreeableLeg3672 - jQuery is fine if you want to add some interactivity to an admin panel and don't want to bother with a full install of React, Vue, etc. but even then something like AlpineJS is more modern.

Others have given good options/advice, but I would also like to point out AlpineJS as another option. You can get a lot of SPA-like functionality out of it without writing much JS. Fancy !== good.

Personally I would use htmx and roundtrips for all sorts of modification including data (such as reorganizing two rows in a table). But you'd also do that in an SPA, right? How do you prevent desyncs there? Also for e.g. sorting you'd need a server roundtrip anyway in the (likely) case where you use something like pagination or lazy loading.

For sending data, you would just have a reply that instructs HTMX to display a success message. On an SPA you'd have the same. With both, you can interact with the page while the data is being sent.

Of course, sometimes you want purely 'cosmetic' actions, such as an "add row" button that pops open some data entry fields. For something like that you should not use htmx itself, but instead something like https://alpinejs.dev/.

Should check out htmx and alpinejs. Much cleaner if you're not going full SPA. jQuery quickly turns into a spaghetti mess.

I render everything on the server with Go templates and use AlpineJS to sprinkle interactivity.