Avete mai creato un sito Web e utilizzato jQuery, Bootstrap, Vue.js o React per ottenere un’interazione di base con l’utente?
Alpine.js è una frazione delle dimensioni di questi framework perché non prevede alcun build step e fornisce tutti gli strumenti necessari per creare un’interfaccia utente di base.
In questo articolo, daremo un’occhiata più da vicino a Alpine.js e come può sostituire JQuery o librerie JavaScript più complesse per creare siti Web interattivi.
Se crei regolarmente siti che richiedono anche Javascript per modificare l’interfaccia utente in base ad alcune interazioni dell’utente, allora questo articolo fa per te.
Anche se nell’articolo facciamo riferimento a Vue.js, non preoccuparti se non hai esperienza perchè non è necessario. Infatti, parte di ciò che rende eccezionale Alpine.js è che a malapena è necessario conoscere JavaScript.
Ora, iniziamo.
Che Cos’è Alpine.Js?
Consideriamo un modello di interfaccia utente di base come Tabs . Il nostro obiettivo finale è che quando un utente fa clic su una scheda, il contenuto della scheda venga visualizzato. Se proveniamo da un background PHP, potremmo facilmente ottenere questo lato server. Ma l’aggiornamento della pagina ad ogni clic sulla scheda non è molto “reattiva”.
Per creare un’esperienza migliore nel corso degli anni, gli sviluppatori hanno introdotto librerie come jQuery e/o Bootstrap. In questo modo, creiamo un listener di eventi nella scheda: quando un utente fa clic, l’evento si attiva e diciamo al browser cosa fare.
Tuttavia, questo stile di codifica in cui diciamo al browser esattamente cosa fare (codifica imperativa), può portarci dei problemi. Immagina se volessimo disabilitare il pulsante dopo che è stato cliccato o se volessimo cambiare il colore di sfondo della pagina.
Gli sviluppatori hanno risolto questo problema introducendo framework come Vue, Angular e React. Questi framework ci consentono di scrivere codice più pulito utilizzando il virtual DOM: una sorta di mirror dell’interfaccia utente archiviata nella memoria del browser. Il risultato è che quando “nascondi” un elemento DOM (come una scheda) in uno di questi framework, questo non aggiunge un attributo display:none; ma scompare letteralmente dal DOM “reale”.
Questo ci consente di scrivere un codice più pulito e più facile da leggere. Ma ha un costo. In genere, la dimensione del pacchetto di questi framework è ampia e per coloro che provengono da un background jQuery, la curva di apprendimento è incredibilmente ripida, soprattutto quando tutto ciò che vuoi fare è attivare/disattivare le schede! Ed è qui che interviene Alpine.js.
Come Vue e React, Alpine.js ci consente di scrivere codice in maniera dichiarativa ma utilizza il DOM “reale”, modificando i contenuti e gli attributi degli stessi nodi che potremmo modificare quando apriamo un editor di testo o strumenti di sviluppo. Di conseguenza, puoi perdere la dimensione del file e il carico cognitivo di un framework più ampio ma mantenere la metodologia di programmazione. Questo lo ottieni senza bundler, nessun processo di compilazione e nessun tag di script. Basta caricare 6kb di Alpine.js e il gioco è fatto!
Quando dovrei usare Alpine.js?
La forza di Alpine sta nella facilità di manipolazione del DOM.
Facciamo degli esempi:
- Mostrare e nascondere i nodi DOM in determinate condizioni;
- Input utente vincolante;
- Ascoltare gli eventi e modificare di conseguenza l’interfaccia utente;
- Classi in accodamento;
Puoi anche utilizzare Alpine.js per la creazione di modelli se i tuoi dati sono disponibili in JSON.
Quando Alpine.js non è utile?
Se stai recuperando dati o devi eseguire funzioni aggiuntive come la convalida o l’archiviazione dei dati, probabilmente Alpine.js non fa al caso tuo. Anche i framework più grandi sono dotati di strumenti di sviluppo che possono essere preziosi quando si creano interfacce utente più grandi.
La sintassi di Alpine è quasi interamente rimossa da Vue.js. In totale, ci sono 13 direttive.
Per iniziare:
Come Vue e jQuery, non è richiesto alcun processo di compilazione. A differenza di Vue, Alpine si inizializza da solo, quindi non è necessario creare una nuova istanza.
Basta copiare:
<script src=”https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js” defer></script>
L’ambito di un determinato componente viene dichiarato utilizzando la direttiva x-data. Questo dà il via alle cose e imposta alcuni valori predefiniti, se necessario copia:
<div x-data=”{ foo: ‘bar’ }”>…</div>
Acquisizione degli input dell’utente:
x-model ci consentono di mantenere sincronizzato qualsiasi elemento di input con i valori impostati utilizzando x-data.
Nell’esempio seguente, impostiamo il valore del nome su una stringa vuota (all’interno del tag form). Usando x-model leghiamo questo valore al campo di input. Usando x-text, iniettiamo il valore nell’elemento innerText del paragrafo. Ciò evidenzia le differenze chiave con Alpine.js e sia jQuery che Vue.js.
L’aggiornamento del tag di paragrafo in jQuery richiederebbe l’ascolto di eventi specifici, l’identificazione esplicita del nodo che desideriamo aggiornare e le modifiche che desideriamo apportare. La sintassi di Alpine, d’altra parte, specifica solo cosa dovrebbe accadere. Questo è ciò che si intende per programmazione dichiarativa.
L’aggiornamento del paragrafo in Vue, sebbene semplice, richiederebbe un nuovo tag di script; se necessario copia:
new Vue({ el: ‘#app’, data: { name: ” } });
Questo evidenzia il primo grande vantaggio con Alpine.
Non c’è cambio di contesto. Tutto è fatto proprio lì nell’HTML, non è necessario alcun JavaScript aggiuntivo.
Come con Vue, funge da scorciatoia per x-bind (che lega gli attributi) ed è un’abbreviazione per x-on (che indica che Alpine dovrebbe ascoltare gli eventi).
Nell’esempio seguente, istanziamo un nuovo componente usando x-data e impostiamo il valore predefinito di show su false. Quando si fa clic sul pulsante, si cambia il valore di show. Quando questo valore è true, indichiamo ad Alpine di aggiungere l’attributo aria-expanded.
x-bind funziona diversamente per le classi: passiamo in oggetto dove la chiave è il class-name (active nel nostro caso) e il valore è un’espressione booleana (show).
Nascondere e mostrare
La sintassi che mostra e nasconde è quasi identica a Vue.
Questo imposterà un dato nodo DOM su display:none. Se è necessario rimuovere completamente un elemento DOM, x-if può essere utilizzato. Tuttavia, poiché Alpine.js non utilizza il DOM virtuale, x-if può essere utilizzato solo su un <template></template>(tag che racchiude l’elemento che desideri nascondere).
Oltre alle direttive precedenti, ci sono tre proprietà che forniscono alcune funzionalità aggiuntive. Tutti questi saranno familiari a chiunque lavori in Vue.js:
- $el recupera il componente radice (l’oggetto con l’attributo x-data);
- $refs permette di prendere un elemento DOM;
- $nextTick assicura che le espressioni vengano eseguite solo dopo che Alpine ha fatto il suo dovere;
- $event può essere utilizzato per acquisire un evento del browser della natura;
Adesso costruiamo:
È tempo di costruire.
Per motivi di brevità useremo Bootstrap per gli stili e per tutto il resto Alpine.js.
La pagina che stiamo costruendo è una semplice pagina di destinazione con un modulo di contatto visualizzato all’interno di un modale che viene inviato a un gestore di moduli e mostra un bel messaggio di successo.
Per farlo funzionare, potremmo aggiungere jQuery e Bootstrap.js, ma questo è troppo sovraccarico per così poche funzionalità.
Facciamolo funzionare con Alpine.js.
Per prima cosa, impostiamo un ambito e alcuni valori iniziali;
Copia:
<body class=”text-center text-white bg-dark h-100 d-flex flex-column” x-data=”{ showModal: false, name: ”, email: ”, success: false }”>
Ora, facciamo in modo che il nostro pulsante imposti il valore showModal su true;
Copia:
<button class=”btn btn-lg btn-secondary” @click=”showModal = true” >Get in touch</button>
Quando showModal è true, dobbiamo visualizzare il modale e aggiungere alcune classi;
Copia:
<div class=”modal fade text-dark” :class=”{ ‘show d-block’: showModal }” x-show=”showModal” role=”dialog”>
Associamo i valori di input ad Alpine;
Copia:
<input type=”text” class=”form-control” name=”name” x-model=”name” ><input type=”email” class=”form-control” name=”email” x-model=”email” >
E disabilita il pulsante “Invia”, fino a quando non vengono impostati quei valori;
Copia:
<button type=”button” class=”btn btn-primary” :disabled=”!name || !email”>Submit</button>
Infine, inviamo i dati a una sorta di funzione asincrona e nascondiamo il modale quando abbiamo finito;
Copia:
<button type=”button” class=”btn btn-primary” :disabled=”!name || !email” @click=”submitForm({name: name, email: email}).then(() => {showModal = false; success= true;})”>Submit</button>
E questo è tutto!
Ti aspettiamo Mercoledì 23 Febbraio al prossimo evento di Commit University, dalle 18:30 alle 19:30, presso la Sala Hack delle Murate Idea Park, per parlarne insieme a Claudio Bisconti!
Registrazione gratuita ma obbligatoria al seguente link, ti aspettiamo!👇🏻
https://www.eventbrite.it/e/255947203977