Recently, I started to use Vue for a job-related single-page application – migrating from Ractive which actually did a good job so far but unfortunately has some shortcomings regarding documentation and third-party support (think IDE integration and such).

While Vue feels like a good choice so far (definitely a better one than React which in fact I really appreciated in 2014 but nowadays looks more like an intended one-way lane to becoming dogmatically locked-in with the big, corporate content silo starting with f), it still does not fit for an application like Antville which is (still? again?) rendered on the server…

Thanks to the wonderful thing called coïncidence I stumbled over Alpine (via smashingmagazine.com).

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit.

In fact, it is very similar to Vue’s template syntax:

<div x-data="{ tab: 'foo' }">
    <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
    <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>

    <div x-show="tab === 'foo'">Tab Foo</div>
    <div x-show="tab === 'bar'">Tab Bar</div>
</div>

– And it seems like a perfect fit for getting client-side things done in Antville right now.

Nevertheless, once I looked around for more resources suddenly a lot of references to similar tools popped up (in loose order):

• Unpoly
• Intercooler
• Stimulus
• Turbolinks
• Drab

So a lot to evaluate and learn – which is great because to me this appears like an exciting parallel universe I was unaware and/or ignorant for the longest time of being uncovered in front of my client-side-behemoth-weary eyes!