Awesome

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. <br /> 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 ... ⏳ <br /> We consider Alpine.js a good declarative "successor" to jQuery.

Note: Alpine.js is not quite as elegant as svelte.<br /> However svelte wants to "own" the DOM which means it doesn't play nicely with LiveView ... <br /> 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