JavaScript Sprinkles with AlpineJS

March 24, 2020

I’m a big of <a href="https://reactjs.org">ReactJS</a>, but sometimes it is way too heavy for what I need. The majority of the applications I create are server-rendered and just need some “sprinkles” of JavaScript. In the past, I’ve leaned on <a href="https://jquery.com">jQuery</a> for this, but I’m not a fan of the imperative nature of it. Recently, I stumbled upon AlpineJS, which is a super minimalist framework that lets you write declarative sprinkles of JavaScript without resorting to something heavier like React or <a href="https://vuejs.org">Vue</a>. It comes in at just 6.4kb (compressed), less than a quarter of the size of Vue, React, or jQuery. And everything is done inline within your HTML, so, like React, your logic is co-located with your markup. Unlike React and Vue, AlpineJS does not use a virtual DOM and relies and the actual DOM. So for a dead simple example, let’s say you wanted a button that toggled a piece of content. You use the <code>x-data</code> attribute to declare your component scope and initial data, <code>x-show</code> to toggle your content, and <code>x-on:click</code> to add the click behavior. <div class="highlight"><pre class="highlight html"><code><div x-data="{isOpen: false}"> <button x-on:click="isOpen = true">Show Content</button> <p x-show="isOpen">Content goes here. </div> </code></pre></div> That’s it! Simple and easy to follow. If we wanted to add a little pizazz, we could use <code>x-show.transition</code> instead and this will animate our content when it’s shown and hidden. My only real complaint with this, which is the same complaint I have about Angular (1.x) and Vue, is the placement of logic inside strings. The programming purist in me is not a fan of this, but I know it makes sense from a practical standpoint given the historical baggage of HTML. Let’s move on to a slightly more complex example. Here we’ll keep the value of a text input in sync with the text in a <code></code> tag. The <code>x-model</code> attribute is used for input 2-way binding and <code>x-text</code> is used for outputting the variable. <div class="highlight"><pre class="highlight html"><code><div x-data="{fullName: ''}"> <label>Full Name</label> <input x-model="fullName" /> <p x-text='fullName'> </div> </code></pre></div> But let’s say we want to prefix the name with “My name is” and only show it when the name has been filled in. We’ll use the <code>x-if</code> attribute on a <code><template></code> tag. <div class="highlight"><pre class="highlight html"><code><div x-data="{fullName: ''}"> <label>Full Name</label> <input x-model="fullName" /> <template x-if="fullName.length > 0"> My name is <span x-text='fullName'> </template> </div> </code></pre></div> Lastly, let’s do about as complex of an example as I’d recommend with Alpine. We’ll loop over an array of users and display them in a table along with a form to add another user. <div class="highlight"><pre class="highlight html"><code><div x-data="{newUser: { name: '', age: 10 }, users: [{name: 'John', age: 30}, {name: 'Mary', age: 40}]}"> <table> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <template x-for="user in users" :key="users"> <tr> <td x-text="user.name" /> <td x-text="user.age" /> </tr> </template> </tbody> </table> <div> <label for='name'>Name</label> <input id='name' type='text' x-model='newUser.name' /> <label for='age'>Age</label> <select id='age' x-model='newUser.age'> <option value='10'>10</option> <option value='20'>20</option> <option value='30'>30</option> <option value='40'>40</option> <option value='50'>50</option> <option value='60'>60</option> <option value='70'>70</option> <option value='80'>80</option> <option value='90'>90</option> <option value='100'>100</option> </select> <button x-on:click="users.push(newUser); newUser = {name: '', age: 10};">Add User</button> </div> </div> </code></pre></div> Like I said, this is about as complex as you’d want to get with Alpine. But I think that’s a feature, not a bug. Sometimes when you use something as powerful as React or Vue, it’s tempting to push more and more of your app into that paradigm, all while forgetting that there are rough edges around doing so.

#javascript #alpinejs