Exploring Alpine.js

Go Beyond the Basics with Alpine.js

Alpine.js lets you easily add bits of reactivity to your website without needing to setup a front-end build process. All you have to do is:

1. Add the CDN link
2. Sprinkle in some HTML attributes
3. Poof ✨ magic happens

It is especially great for adding simple animations and interactive behavior to a WordPress website.

But…it can be challenging to go beyond some basic examples. After piecing together disparate articles, learning on my own via trial and error, and using Alpine.js to build over three dozen components across multiple production websites I wanted to share what I’ve learned to help you too Go Beyond the Basics.

Through a series of videos we will explore how to use Alpine.js in more advanced ways so that you can level up 🚀 your game.

The videos are organized into modules named after prominent peaks 🏔️ in the Alps.

1. Intro and Framework Features (Eiger)

This is a great module to start with if you have limited experience with Alpine.js.

We get started by looking at a sample Alpine.js component then build a firm foundation with a basic project setup. Next, we’ll look at some features of the framework that I learned about the hard way and wrap up with a discussion on how to leverage native events on the window 🪟 object.

2. Code Organization and Communication (Jungfrau)

Now that we’ve got a foundation, we’ll look at how to extract our component code into external files for better organization 📁 and re-use. We’ll also dig into nested components to see how to leverage the cascade from outer to inner and explore options to pass data between non-nested components.

3. Using External Data (Zugspitze)

Showing data (especially tabular data) from an external data source is a fantastic use case for Alpine.js. In this module we’ll look at a bunch of different permutations and capabilities:

• Loading data from an external source
• Caching ⏳
• Loading in chunks
• Paginating 📖
• Sorting
• Filtering
• Searching 🔍

4. Animation and Intersection (Mont Blanc)

Don’t just react to user input, see how to add animation and whimsy 🦄 to your projects with intersection and scrolling triggers. We’ll also look at controlling a Lottie animation and leveraging Mutation Observer to react to other page changes.

5. Real World Components (Matterhorn)

Learn from real-world components. We will walk through the actual code that I’ve used on production websites to deliver Alpine.js components to meet design and content requirements.

• Scoring on a Curve 💯
• (Fun With) Statistics
• Annotating 🖼️ Images
• Avoiding Underlap
• Dynamic 🧨 Datacards
• Image Marquee