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.
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 assvelte
.
Howeversvelte
wants to “own” theDOM
which means it doesn’t play nicely withLiveView
…
So this is our best option for now.
@dwyl
team that want to understand how we’re building our Web App(s).Clone:
git clone git@github.com:dwyl/learn-alpine.js.git && cd learn-alpine.js
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
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
A Phoenix + Alpine.js application using drag and drop to sort items in table.
See drag-and-drop.md