Always bet on Alpine.js

There’s been a flurry of activity recently on the Alpine.js GitHub repo, it seems like we’re getting closer to getting “x-bind object of directives” syntax, which looks like:

<div x-data="modal()">
  <button x-bind="trigger">Toggle</button>
  <span x-bind="dialogue">Modal Body</span>
</div>
<script>
function modal() {
  return {
    show: false,
    trigger: {
      ['x-on:click']() { this.show = ! this.show }
    },
    dialogue: {
      ['x-show']() { return this.show }
    },
  }
}
</script>

That would make it easier to share Alpine.js components since Alpine-specific directives can be put into the “function component” instead of the markup.

This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).

Here’s this week’s glowing endorsements of Alpine.js:

If you are building a webpage, a landing page or even a small application where you need to add some javascript flavour, try AlpineJS.

You will be amazed by its simplicity and the plethora of nifty directives it offers ❤️ https://t.co/ouizShvE5D #javascript #webdevelopment

— Marios Fakiolas (@fakiolinho) June 1, 2020

Second one, even more powerful:

I tried Alpine JS this past week. Two takeaways:

1. Having no build step is a huge benefit for quick projects
2. JavaScript behavior integrated with markup is easy to combine with other templating languages (e.g. Twig)https://t.co/bwRU3ub1Jb

— Jesse Janowiak - Black Lives Matter (@JanoWebdev) June 1, 2020

Final recommendation for jQuery users who find the migration to Vue too much. This situation reminds me of Taylor Otwell integrating Vue into Laravel Mix because React was too much of a headache.

If jQuery -> Vue.js seems hard

Try jQuery -> @Alpine_JS today

— Gaurav Makhecha (@gauravmakhecha) June 3, 2020

Made with Alpine.js

The new “x-bind with object of directives” could pave the way for Tailwind UI to use Alpine.js as the “vanilla” (opposed to Vue/React) option, for production use.

Demos:

• Todo application with Tailwind and Alpine by @mr_alaraj
• simple modal-based validation with Alpine.js and TailwindCSS by @TIkhlasul
• Tabs using TailwindCSS & Alpine.js
• Simple card carousel with Alpine.js by @georgejustin22
• Help Center Card with TailwindCSS and Alpine.js by @mr_alaraj
• Alerts with Alpine.js and TailwindCSS by @TIkhlasul

Codecourse are launching a new Livewire + Alpine.js course building a realtime messaging dashboard.

Articles & Tutorials

Animate with Alpine.js surfaced by @theprogrammer

Creating powerful tabs with Alpine.js in less than 5 minutes by @mtownsend5512

How to Access Alpine.js Magic Properties from inline handlers and function/component methods by @hugo__df

For more posts like this, you can join the Alpine.js Handbook Knowledge Base (Paid), it’s a great way to support the newsletter and get early access to Alpine.js content.

Code & Tools

github.com/edbarbe/malt Minimal - Alpine.js Laravel TailwindCSS template

github.com/sstottelaar/Chime An Awesome Starter Kit for Umbraco CMS with Alpine.js and TailwindCSS by @sjoerds

github.com/Miaababikir/Laravel-Tailwind-CSS-Dashboard-Preset by @miaababikir now supports Alpine.js.

No new releases but we’ve got Chinese and Russian translations for the README (in addition to Japanese and English).