Alpine.js Weekly #65
v3 is picking up some steam, if you’ve missed it, here are the launch tweets:
🎉 If you didn’t catch it, Alpine Version 3 has been officially released!
You can watch the Alpine Day keynote where I show all the changes and show off the new features here:
✌️⛷️https://alpinejs.dev/upgrade-guide
— Caleb Porzio (@calebporzio) June 17, 2021
Hey folks, still lots to do so I’ll put something more official out soon, but for now…
Alpine V3 has been released. Install instructions here: https://alpinejs.dev/essentials/installation
Livewire v2.5.1 now has built-in support for Alpine V3 as well!
— Caleb Porzio (@calebporzio) June 15, 2021
And some benchmarks from Ryan Carniato:
So playing around with the latest @Alpine_JS. V3 is 16kb vs V2’s 8.5kb. That’s mostly since it now uses @vuejs‘s reactivity (~6kb). But on the positive in tentative testing performance is way better.
V2(left), V3(right) vs VanillaJS
— Ryan Carniato (@RyanCarniato) June 14, 2021
This newsletter supported by my GitHub Sponsors.
Tips
Basic support for turbo with Alpine:
At least from mine and Jack’s quick pair, this is all you need to make Alpine V3 and TL work:
https://gist.github.com/calebporzio/20cf74af4a015644c7bef5166cffd86c
— Caleb Porzio (@calebporzio) June 16, 2021
@Alpine_JS pro tip: 🚀🚀
If you are like me a forgot x-cloak all the time
Am I missing something @calebporzio 🤔
— Wali Razzaq (@Wali_Razzaq) June 17, 2021
Just learned about
click.stopwith @Alpine_JS 🧡
— Tim L. (@timuism) June 15, 2021
Made with Alpine.js
If you’ve got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.
Here are this week’s Alpine.js adopters:
- mam.org.mm Medical Action Myanmar is a non profit organisation aiming to improve healthcare for all people in Myanmar. Built with Statamic, Tailwind and Alpine, designed & built by @studio1902.
- stop-contrat.com is using Alpine.js as part of the TALL stack, good spot by @HenocKhouilla
- peshcash.af is a website for sharing best offers and discounts in Afghanistan, built with Laravel and AlpineJS, by @ahangarha
- alpine-cart.herokuapp.com, Sinatra + Tailwind + Alpine JS by @soulchildpls
Demos:
- Drag and Drop example using AlpineJS and TailwindCSS by @soulchildpls
- Windows 11 UI in the browser with Alpine and Tailwind by @pixelcave_john
- Demoing out the built-in state functionality of Alpine.js with a notes app by @alexjgarrett
Articles & Tutorials
The Magic Behind Reactivity - Proxies by @ryangjchandler
[Video] SeaJUG Front End Java 2021 - easy full stack Java web apps with Spring Boot, Alpine, Tailwind and HTMX by @wiverson
The Benefits of Container Queries by @robmcfadden (code samples use Alpine)
Code & Tools
v3.0.6
Initial v3 release as demo-ed at Alpine Day (or close to it).
Features/breaking changes from v2: https://alpinejs.dev/upgrade-guide
v3.0.7
Features:
- “alpine:init” event which is an alias of “alpine:initializing”
Fixes:
- binding the value of a missing nested object value to be empty string
- x-bind:class directive using object syntax
- store’s init() function not receiving reactive “this” context
Plugins & extensions
Fern - Persisted global stores for Alpine 3.x. by @ryangjchandler
Tailwind Layouts now supports Alpine, see https://tailwind-layouts.vercel.app/patterns/image?environment=alpinejs, by @lxsmnsyc
@inxilpro has submitted some bugfixes to the IntellijAlpine plugin: github.com/inxilpro/Intel…
[github.com/imacrayon/alpine-ajax]https://github.com/imacrayon/alpine-ajax) adds turbo-frame-like behavior to components by @ima_crayon
Adopter Reactions
Converted some of jQuery code last night over to @Alpine_JS. First time using it. Excellent!
— Latency (@latentuser) June 18, 2021
After some tinkering tonight with some @Alpine_JS and reading the docs I’ve decided that I really like it! Lightweight but so powerful. Top work by @calebporzio and the community. It’s going to be perfect for my side project.🙂
— Greg Robson (@GregRobson_UK) June 16, 2021
LOL @Alpine_JS “x-html was a seldom used directive in Alpine V2. In an effort to keep the API slimmed down to only valued features, V3 is removing this directive.”https://t.co/KrXVrQ5NqH
They never developed with WordPress, apparently 😂😂
— Alex Standiford (@AlexStandiford) June 14, 2021