Alpine JS


2 min read

I recently did a small project with CSS and JS, so I thought I'd try out Alpine JS. I'd come across it ages ago, been intrigued, but not got round to trying it out. Since it's good for small projects it seemed like a good time to try it.

For some things I found it so much simpler than JS. If I wanted to change a class on something based on a mouse click, that was easy. Similarly showing and hiding things.

Getting slightly more complicated was harder though. I was trying to do a timer. Doing that in JS is easy, but I also had to update what was shown on screen and the data stored in Alpine. Which was itself connected to the screen display. I tried a few different things before my Googling led me to enough examples that I worked out how to do the whole thing in Alpine JS.

In Summary, if you don't need a lot of JS and you're only using it to change the display, then Alpine is going to be a lot quicker and easier - it's written in the HTML, so you don't need a separate script file. Beyond that, I think JS is going to be quicker. But I really enjoyed playing with Alpine JS and figuring out how it worked. Getting it to work definitely felt like an achievement!