React VS Alpine.js

In mid-2000s Gmail revolutionized web development by becoming the first true SPA project. Its seamless user experience inspired developers worldwide to adopt this new model, leading to the creation of frameworks like React, Angular and Vue.js. SPAs became the go-to solution for many applications, which required real-time interactions and a fluid user experience.

React because it’s a widely popular front end library

Vite Documentation Next.js Documentation React Docs

Source: React.js Github

🔵 React

Metadata is huge - One may expect package metadata to be smaller than package contents. The results show, that exactly the opposite is true with package content size being about 53 MB, while package metadata size being about 77 MB (or 81 MB for Nexus). This should be no surprise since metadata contains all package versions, which can easily be more than a thousand as evidenced above for the react package.

React Documentation: https://react.dev/

I first tried to use growthbook. They had only react support. I thought - I could use the js sdk and work around it. Ok fine. It seemed a bit complicated to use in terms of their UI. Okay fine, I try to find an easier one maybe I can self-host. That way I could even put it behind cloudflare CDN and use caching on it and clever cache-busting when I change values could help propagate changes. Okay fine I have a plan. I ended up going with Flagsmith instead. It was even easier. Perfect.

As far as I'm aware, TC39 hasn't yet specified which shape of literal is "ok" and which one is "wrong" to run on a computer, depending on wether this computer has a screen or not. I imagine this is why V8, JSC and SpiderMonkey let you create objects of any shape you want on any environment. I don't understand what's wrong about using this shape on the server.

[1] https://github.com/facebook/react/blob/e71d4205aed6c41b88e36...

A couple of months ago I wrote a similar article about HTMX, and now I can finally write about the benefits you can get by using HMPL instead of Alpine.js.

Alpine.js

Alpine.js alpinejs.dev Minimal framework for declarative DOM interactions.

As usual, there are a few possibilities here; one is to render both the with the title, and a form with for each row, and use plain Javascript (or AlpineJS) to toggle edit mode.

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.