Preact VS Alpine.js

> React is a small rendering library

Sorry, can't agree. React is a state management library that also attaches efficient rendering on top of the DOM diff it computes as it propagates the state changes.

This allows React apps to remain so simple (one function per component) and so composable without turning into an unmanageable dish of callback / future spaghetti.

There is a number of other VDOM libraries, but what sets React apart is the data / state flow strictly in one direction. This allows to reap many of the benefits of functional programming along the way, like everything the developer sees being immutable; not a coincidence.

Regarding the size, preact [1] is mostly API-compatible, but also absurdly small (3-4 kB minified), actually smaller than HTMX (10 kB). But with preact you likely also want preact-iso, so the size grows a little bit.

[1]: https://preactjs.com/

Performance and user experience have become the lifeline of modern web development. Two libraries that have gained immense popularity among developers for developing interactive user interfaces are React and Preact.

For rendering the map, I went with Preact and deck.gl.

This command creates a new Vite project with React. Feel free to replace “react” with “vue” or “vanilla” if that’s more your jam. Svelte, Preact, Qwik, and others are supported, too!

Note: Astro supports a variety of popular frameworks including React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit with official integrations. While for other frameworks e.g. Angular and Qwik, you may still benefit from this tutorial and you would need to further set up the community maintained framework integrations.

GitHub | npm | website

In this post, we get to know more about Preact, one of this year's trending libraries. And we'll compare it to React to see which one suits better for our projects.

Similarly to Promises/A+, this effort focuses on aligning the JavaScript ecosystem. If this alignment is successful, then a standard could emerge, based on that experience. Several framework authors are collaborating here on a common model which could back their reactivity core. The current draft is based on design input from the authors/maintainers of Angular, Bubble, Ember, FAST, MobX, Preact, Qwik, RxJS, Solid, Starbeam, Svelte, Vue, Wiz, and more…

Those who want to develop a library that can be used by any other reactive framework. I often see SignalLike type that tries to subtype it.

https://github.com/preactjs/preact/blob/757746a915d186a90954...

The official Preact documentation.

That's why I grew fond of libraries such as Alpine.js and htmx, which require no setup and are easy to use. However, I felt these had some limitations. Since they were mostly designed for client-side usage, it wasn't really possible to use them in server-side rendering contexts (including static generation).

In fact, it is really good as an alternative to modules like htmx and alpine.js, because it allows you to create dynamic interfaces with a minimum set of configurable parameters, as well as the size of the output files. This is achieved by working with the server, when we prepare the UI there, and we only transfer it to the client via API.

It is created by Caleb Porzio (the guy behind Livewire and AlpineJS), Sushi simplifies your data when a full database table is unnecessary.

Here's a step-by-step example of creating a simple carousel using Alpine.js. Alpine.js is a lightweight JavaScript framework that provides reactivity and can be used to build interactive components without a lot of JavaScript.

The web app was made using AlpineJS for interactivity, TailwindCSS for styling, Clerk for user authentication, and Vercel for deployments. This stack allowed me to quickly build and deploy an MVP within 24 hours.

Alpine.js is another lightweight JavaScript framework used to add interactivity. It plays nicely with Django’s template structure and provides quick, declarative behavior for things like modals, dropdowns, or toggles. In combination with HTMX, Alpine can give you just enough JavaScript to enhance the UX without having to deal with something like React or Vue. For instance, you can use Alpine to manage state in the frontend, like opening and closing modals or handling client-side validation.

That’s a mostly solved problem. If you’re in the Laravel ecosystem:

https://livewire.laravel.com/

https://alpinejs.dev/

AlpineJS is for your menus and simple client-side interactivity. Livewire lets you render templates server-side while handling routing, interactivity, updates, morphing, everything you need all in one.

Combine the two, you’ll be counting the lines of JavaScript you right in the dozens, on one hand.

This post is part of a series comparing different ways to implement asynchronous requests on the client, which is colloquially known as AJAX. I dedicated the previous post to Vue.js; I'll dedicate this one to Alpine.js - not to be confused with Alpine Linux.

We must recognize the benefits that client-side rendering offers, but perhaps the pendulum has swung too far. Is it possible to have the best of both worlds? In some corners of the industry, cooler heads have prevailed, and the term SSR has been coined to describe a return to what we've been doing for ages—albeit with some modern enhancements. The idea is to leverage AJAX, JavaScript, and browser improvements without the unnecessary bloat. While many tools are available, I frequently hear about Vue. js and HTMX. A recent search also led me to Alpine.js. And I've long been a proponent of Vaadin.

In this blog post, we'll delve into the process of creating a shopping cart using Alpine.js. We'll explore how to structure components, manage state with Alpine's store, and implement essential features such as fetching new products, adding and removing items, calculating total price, and handling UI interactions.