Learn how to use Alpine.js to build declarative + responsive UI fast!

Why? 🤷

We heard a lot about Alpine.js online and wanted to know what the fuss was about.
We weren't disappointed. You won't be either. It's a compact, functional and performant library.

What? 💡

Alpine.js lets you add progressive enhancements to any HTML page with minimal in-line declarative code. This makes it easy to add attractive/useful UI elements such as toggle, fade-in/out, transitions and other effects.

If you've been building websites since the jQuery days ... ⏳
We consider Alpine.js a good declarative "successor" to jQuery.

Note: Alpine.js is not quite as elegant as svelte.
However svelte wants to "own" the DOM which means it doesn't play nicely with LiveView ...
So this is our best option for now.

Who? 👤

• Anyone building a Static website that needs good UI enhancements.
• People in the @dwyl team that want to understand how we're building our Web App(s).

How? 💻

Clone:

git clone git@github.com:dwyl/learn-alpine.js.git && cd learn-alpine.js

Install ⬇️

We are using Phoenix to render the Alpine.js examples.

Run the following commands in your terminal:

mix deps.get
mix phx.server

Don't hesitate to open issues if you have any questions linked to Phoenix!

Visit localhost:4000 where you can see a list of examples we have created, for example:

e.g: https://dwyl.github.io/learn-alpine.js

Then you can follow the tutorial: https://alpinejs.dev/start-here

Or if you have a decent internet connection this video is a good intro: https://youtu.be/r5iWCtfltso

Stopwatch! ⏱️

Once you have a basic understanding of how Alpine.js's directives work. checkout our Stopwatch example: https://dwyl.github.io/learn-alpine.js/stopwatch.html

Code: stopwatch.html

Drag and drop

A Phoenix + Alpine.js application using drag and drop to sort items in table.

See drag-and-drop.md