React VS Alpine.js

For the purpose of this hands on, let's build a basic React project to showcase the features. Once you have cloned the repository, change the working directory to the Mergify directory and then run the following command to create a new React application.

We used React Three Fiber at my job 2-3 years ago (when it was "early") and it was already amazing then, we could do really cool stuff easily. We wrote our own wrappers to easily do and similar things and published it as OSS[1], but TBH documentation was scarce since it was an internal project and there were virtually no resources dedicated to publish it, just a couple of devs pushing for it. We even published one of the first bridges[2]. We didn't want to totally opt out of the React render loop so we had to do a lot of hacks and optimizations, but it was a great experience overall.

Nowadays React Three Fiber is very mature and you have the "drei" collection[3], which have all the things I mentioned and a lot more. Though now looking at the source and timing (we published a blog [4] with our solution and their commit few weeks later with almost the same code[5]) it seems they might've copied our solution as part of their package, would've loved a heads up or ack but well happy to make open source better.

[1] https://www.npmjs.com/package/@standard/view

[2] https://github.com/facebook/react/issues/13332#issuecomment-...

[3] https://github.com/pmndrs/drei

[4] https://standard.ai/blog/introducing-standard-view-and-react...

[5] https://github.com/pmndrs/drei/pull/137/files

context loss - https://github.com/facebook/react/issues/13332 AND the most beauty of it is that the store it provides is a hook and you can put objects or functions in it. How awesome is that!

If your component depends on useContext(), React.memo() is useless. The component would rerender irrespective if the memo.

Most of us will be using Create React App for creating React App. It supports all the configurations out of the box. But when your project code grows you might face higher build times, a slower start in the development server and waiting 2 to 5 secs to reflect the changes you have made in code and this might increase rapidly when the app grows on a larger scale.

Three weeks ago I began learning the JavaScript React framework.

Next.js is a React based open-source frontend framework, with features like SSR (Server Side Rendering) and SSG (Static Site Generation). Next.js also comes SEO optimized right out the box so you don't have to do it yourself from the scratch.

It can be a bit verbose/granular, but the project’s CHANGELOG is a feed of new features and bug fixes.

I wanted to make a custom gradient for a client, but found it very annoying to do manually, so I found the Color.js library and used that together with Alpine.js to make this little tool:

My go-to these days is AlpineJS since it's familiar enough due to being designed after Vue, no shadow DOM and no scoped styles to deal with, and lightweight. I'd probably just bundle them into components using bind. You can use modules and import an AlpineJS CDN in your AlpineJS components, which you can serve from a CDN if you wanted.

Having (real) components, sets it apart from other no-build / small runtime frameworks (like Alpine.js and Vue-Petite), because this allows for the creation of advanced full-size SPAs.

However, since bootstrap is the css of jQuery, Tailwind is the css of Alpine js, And since tailwind is an alternative for bootstrap, then alpine is said to be the alternative to jQuery.

Then I thought this is a good opportunity of being a smart ass and implement it with Alpine.js, and it was just a mess—but I found out a few things.

Mini-frameworks like AlpineJS, Vue-Petite, and Stimulus exist exactly to fill this space. But whenever I consider reaching for one of these, I usually find that the job can just as easily be done in Vanilla JS. And if it can't, it typically requires the big-framework-X anyway.

I was going by Github language stats indicating 90% HTML / 10% JS https://github.com/alpinejs/alpine

The other poster's answer covers htmx. Another approach is to use alpine.js, which is a minimal JS library. Regardless, if you want to fetch data without a full page refresh, you have to use AJAX.

One of our clients asked for Alpine.js in combination with Laravel Livewire. It turns out those work well together. Let us see if we want to use it more often in the future.