Alpine JS – the pint sized framework that packs a punch

With Alpine JS – we don’t need to over-do things anymore. No more, will we need to include JQuery, Vue, React or another fully-fledged JavaScript library to achieve simple and straightforward user interactions in small applications.

What is Alpine?

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behaviour as you see fit.

Alpine takes inspiration from Tailwind CSS, indeed the Alpine project is actually sponsored by Tailwind. Alpine even directly describes itself as “Tailwind for JavaScript” – and they’re not wrong. Tailwind’s main purpose is in offering CSS utility classes, allowing you to work entirely in HTML and fully styling your application without ever touching a CSS file. This is what Alpine does for JavaScript.

Why Alpine?

Alpine’s showstopper is it’s really small 6.4kb file size, with the added bonus of not requiring the use of a bundler or build process. Just load the tiny js file and you’re off.

Naturally this reduced file-size comes at a cost: there is no shadow DOM, and there is a limited set of built-in directives and magic properties to use (14 and 6 respectively). Don’t expect it to be right for every project.

But where Alpine succeeds is its ease of DOM manipulation: showing and hiding elements, binding user input, event listening, setting attributes dynamically.

Obviously this can all be done with an almost limitless number of existing frameworks already in the ecosystem, but again, the overhead with Alpine is miniscule.

What’s more? If you’re already familiar with Vue, you’ll be able to jump into Alpine straight away without any troubles, as the syntax is almost entirely borrowed from Vue (and by extension, Angular).

Want to learn more?

Head over to the alpine git repo for documentation and examples.