June 19, 2021, 12:30 p.m.

Alpine.js Weekly #65

Alpine.js Weekly

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

pic.twitter.com/z0vgqAKrno

โ€” 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 ๐Ÿค”

pic.twitter.com/dqeFKBRSuo

โ€” Wali Razzaq (@Wali_Razzaq) June 17, 2021


Just learned about click.stop with @Alpine_JS ๐Ÿงก

pic.twitter.com/m6BFpUiXN8

โ€” 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

You just read issue #65 of Alpine.js Weekly. You can also browse the full archives of this newsletter.

Share on Facebook Share on Twitter Share via email
Brought to you by Buttondown, the easiest way to start and grow your newsletter.