I’ve recently been trying out a number of JavaScript frameworks. My goal is to liven up the front-end user experience on a couple of the sites that I work on.
I got a fair way down the track with Vue.js, and was impressed with what it can do. Ultimately, though, I decided that it was slightly over the top for what I needed. I didn’t need to go to a full SPA, but Vue was leading me towards that. I could of course just use Vue’s CDN script to plug in to existing pages, but you get the best out of Vue if it’s compiled and that was getting too complicated.
I then discovered Alpine JS, which is a lightweight JS framework that delivers reactivity on the client. Alpine claims that its objective is only to supplement server-side-rendered pages, and not to replace them. In my case, having the pages built mainly in PHP and then having Alpine added to them made sense, and it works really well.
Alpine comes with a range of directives that you add to your HTML elements, and they provide a high percentage of the needs. Many of these are similar to Vue or Angular. For example, adding the x-show attribute to this div means that it will only be shown if the loginError variable is true.
<div x-show="loginError">Your user name / password were not recognised</div>
A bonus with Alpine is its extensibility, so if the out-of-box directives are not enough, it’s straightforward to define new ones with custom functionality.
I plan to post some Alpine examples, extensions and experiences here.