Web Development Unlocked (Part 2) — AlpineJS
The holy trinity of tools that made web development more accessible to a lost Designer — TailwindCSS, AlpineJS, and Netlify.
This is a 3-part series showcasing the main tools and principles that helped me (a Designer) make the transition to shipping production code at work and releasing my own side projects.
On this journey, the biggest challenge I faced was simply wrapping my head around the basics. I struggled to build a layout, create basic interactions or to make things live on the web.
There’s still quite a bit to learn, but I feel like these tools have really provided that momentum for me to get my foot in the door and help level up my skills. Hopefully they can help you too.
Part One — Tailwind
First, we’ll take a look at Tailwind; a utility-first CSS framework that helped me easily build responsive layouts and components.
Part Two — Alpine (this post)
Next, we’ll have a look at the struggles of trying to learn JavaScript and how Alpine allowed me to create powerful interactions and user experiences with minimal knowledge.
Part Three — Netlify
Finally, we’ll learn how to make our projects live and put them out into the world for others to use with Netlify and GitHub.
Note: I’ll also mention that I’m not sponsored or being paid by any of these companies. I just love what they’re doing and appreciate how much they’ve helped me on my journey 🤜
Part Two — AlpineJS
Now that we’ve crossed the bridge of handling styles and layout with Tailwind, let’s solve the big next pain point: interactivity.
Even with a solid foundation in web development, building interactions can sometimes feel like an uphill battle. This is especially prevalent when first dealing with any form of logic requiring javascript.
Creating websites that are actually interactable (and that can react) was always a blocker for me until Alpine came to the rescue. If you want to focus more time designing, creating, and shipping your projects, then read on!
Adding a dash of magic with Alpine
Alpine describes itself as a “rugged, minimal framework for composing JavaScript behavior in your markup”.
It’s is a small (~7KB gzipped) JavaScript framework with similar functionalities to JQuery and syntax borrowed from Vue.js
Think of it as Tailwind for Javascript.
First up, let’s jump in using JQuery and see how you might traditionally build some interactivity in javascript, then we’ll see how that compares to Alpine.
Note: I’ve omitted any style classes, so we can focus on what’s happening.
Example 1: Using JQuery to build a dropdown menu
This might be what you see with the typical JQuery way of building out a dropdown component.
- We’ve added IDs to our component parts so we can target them
- Now we can set the dropdown to be initially hidden on load
- Then we’re telling our site once it’s loaded to pull in our function which simply toggles
display: hiddenon the element.
You might think this is pretty straight forward and easy to understand, but the logic is a little bit broken. I don’t mean that in the working-sense… it works! It does its job, but it’s hard to understand if you don’t really know Javascript.
With JQuery you have to manually change how things might work. In comparison with Alpine you essentially just describe what should happen, and Alpine will make all the changes for you.
Let’s see how Alpine might handle this.
Example 2: Using AlpineJS to build a dropdown menu
BOOM. Look at that. We’ve straight up just added 4 tiny snippets of code, and we have a working menu… It blows my mind.
Let’s break down what’s happening:
- We’ve set our component scope we’re about to use and the default parameter with
x-data— basically the main reference for our functionality - When we click our button set the menuOpen state to true with
@click - When menuOpen is set to true, show this element/div with
x-show - When we click away, set the menuOpen to false, so it hides our dropdown with
@click.away
This is just a little example of how Alpine works, but here are 4 reasons why I’ve become a fan of Alpine:
1. Reintroducing context to development
You might think this sounds familiar, and you’d be correct — it was the first point in the previous article about Tailwind.
Once again we’ve gained context of what is happening to our actions and their relationship with other elements. This is a massive part of design.
We no longer have to worry about the logic in a different place. We no longer have to context switch or arbitrarily name things just for the sake of it.
We can achieve design manipulation with reduced cognitive load because everything we need to know is in one related place. No more finding files or sifting through tabs.
2. Human-readable and actionable insights
It’s human-readable language — we don’t have to deal with dollar signs, excessive brackets, or strange syntax.
The intent of the component is available within the context, so that forces us to write about the intended action. Want this button to open a modal? Then we can use language that tells us that. Want the modal to close when we click away? The language tells us that.
Alpine components self-document their intent in an easy way to understand.
3. Non-committal
Because Alpine is a minimal JS library, it means we don’t have to commit to a larger framework purely to inject some interaction into our designs.
We can build simple HTML websites with impressive interactions.
4. You don’t need to understand JavaScript
The amount that we need to learn before we can create and build is drastically reduced.
Alpine is essentially adding a cleaner user interface for how we interact with JavaScript.
It’s removing the things that people struggle with to understand. The logic, the syntax, the layout.
It does what we Designers do for a living — simplify complexity.
Having said that, if you want to add deeper functionality or pull in data, then you might need to tap into using JavaScript eventually. But for minor interactions and components, we’re good to go.
Just the tip of the iceberg
The dropdown menu example above is merely a drop in the ocean of what we can accomplish with Alpine. We’re only using a handful of directives to build out a component.
We can inject dynamic text, make components react to states, repeat and map data, fetch and load data, the list goes on.
Get building
I am by no means an expert on Alpine yet, but it has helped me do something I didn’t think I could. Make the websites I want to. Make the interactions I want to.
It allowed me to build a simple one-page site for an icon set I released, by giving me the power to easily accomplish these things:
- Create a dynamic grid based on an array
- Create a searchable list
- Trigger different click actions
Before Alpine, I would have struggled with where to start to build this.
Next: Head on over to Alpine’s GitHub page and read the docs, and start messing around with all those interactions you’ve wanted to implement.
I also highly recommend hitting up Alpine Collective GitHub who have a tonne of amazing resources to help you hit the ground running.
I’d love to hear your thoughts on not just this article, but on AlpineJS in general — if you’re a fan, or maybe why you‘re not! Hit me up on Twitter and let’s chat 🤜
Also shoutout to good friends Patima Tantiprasut and Tom Leenders that provided invaluable feedback and suggestions for these articles.
