0
0
0
dark
0
0
0
Hand-Picked Top-Read Stories
Trending Tags
3 minute read
No comments

Augmenting the client with Alpine.js

Olga Laul
October 3, 2024
augmenting-the-client-with-alpine.js
Total
0
Shares
0
0
0

This post is part of a series comparing different ways to implement asynchronous requests on the client, which is colloquially known as AJAX. I dedicated the previous post to Vue.js; I’ll dedicate this one to Alpine.js – not to be confused with Alpine Linux.

I’ll follow the same structure as previously.

Laying out the work

Here’s the setup, server- and client-side.

Server-side

Here is how I integrate Thymeleaf and Alpine.js in the POM: 


    
        org.springframework.boot
        spring-boot-starter-web        
    
    
        org.springframework.boot
        spring-boot-starter-thymeleaf  
    
    
        org.webjars
        webjars-locator                
        0.52
    
    
        org.webjars.npm
        alpinejs                       
        3.14.1
    
    
        org.webjars.npm
        axios                          
        1.7.3
  1. Same as last week with Vue
  2. Alpine instead of Vue

It’s similar to Vue’s setup.

Client-side

Here’s the code on the HTML side:
  1. Axios helps making HTTP requests
  2. Alpine itself
  3. Our client-side code
  4. Set the data

As for the POM, it’s the same code for Alpine as for Vue.

The Alpine code

We want to implement the same features as for Vue.

Our first steps into Alpine

The first step is to bootstrap the framework. We already added the link to our custom alpine.js file above. 

document.addEventListener('alpine:init', () => {                    //1
    Alpine.data('app', () => ({                                     //2
        // The next JavaScript code snippets will be inside the block
    }))
})
  1. Run the block when the alpine:init event is triggered; the triggering event is specific to Alpine.
  2. Bootstrap Alpine and configure it to manage the HTML fragment identified by app

We now set the app id on the HTML side. 

 id="app">

Until now, it’s very similar to Vue.js, a straight one-to-one mapping.

Unlike Vue.js, Alpine doesn’t seem to have templates. The official UI components are not free. I found an Open Source approach, but it’s unavailable on WebJars.

Basic interactions

Let’s implement the check of the complete checkbox.

Here’s the HTML code: 

 type="checkbox" :checked="todo.completed" @click="check(todo.id)"> 
 type="checkbox" :checked="todo.completed" @click="check" />
  1. Alpine code
  2. Vue code

The code is very similar, with the difference that Alpine allows passing parameters.

On the Javascript side, we must define the function, and that’s all: 

Alpine.data('app', () => ({
    check(id) {
        axios.patch(`/api/todo/${id}`, {checked: event.target.checked})
    }
}))

Client-side model

You might wonder where the todo above comes from. The answer is: from the local model.

We initialize it in the app or to be more precise, we initialize the list: 

Alpine.data('app', () => ({
    title: window.alpineData.title,                                 //1
    todos: window.alpineData.todos,                                 //2
}))
  1. Initialize the title even if it’s read-only
  2. Initialize the todos list;
    at this point, it’s read-only but we are going to update it the next section

Updating the model

In this section, we will implement adding a new Todo.

Here’s the HTML snippet: 


     class="form-group row">
         for="new-todo-label" class="col-auto col-form-label">New task
         class="col-10">
             type="text" id="new-todo-label" placeholder="Label" class="form-control" x-model="label" />
class="col-auto"> type="button" class="btn btn-success" @click="create()">Add
  1. The x-model defines a model and binds the label property defined in app
  2. Define the behavior of the button, as in the previous section

The related code is the following: 

Alpine.data('app', () => ({
    label: '',                                                      //1
    create() {
        axios.post('/api/todo', {label: this.label}).then(response => { //2
            this.todos.push(response.data)                          //3
        }).then(() => {
            this.label = ''                                         //4
        })
    }
}))
  1. Define a new label property
  2. Send a POST request with the label value as the JSON payload
  3. Get the response payload and add it to the local model of Todo
  4. Reset the label value

Conclusion

Alpine is very similar to Vue, with the notable difference of the lack of templating; components are only available via a price. All other features have an equivalent.

I may need to be corrected because the documentation is less extensive. Also, Vue is much more popular than Alpine.

The complete source code for this post can be found on GitHub:

GitHub logo

ajavageek
 /
compare-frontends

Demo code for the series on AJAX and SSR

To go further:

Originally published at A Java Geek on September 29th, 2024

Total
0
Shares
Share 0
Tweet 0
Pin it 0
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
from-datasnipper-to-compliancewise:-youssef-hounat-on-succeeding-as-a-startup’s-first-product-person

From DataSnipper to ComplianceWise: Youssef Hounat on succeeding as a startup’s first product person

October 3, 2024
Next Post
brand-tracking:-how-to-streamline-this-process-with-ai

Brand Tracking: How to Streamline This Process With AI

October 3, 2024
Related Posts