Al giorno d’oggi, il linguaggio Javascript permette alle pagine web di fare ben altro che comuni interazioni lato client. Una delle attività sicuramente in voga al momento è lo sviluppo di web app, una tipologia di applicazione informatica che vive all’interno di un browser, viene invocata come una normale pagina web, ma contiene codice Javascript con cui l’utente interagisce con un sistema remoto, tipicamente un backend su server che offre API in rete. Ciò che anima le web app sono framework Javascript che offrono funzionalità interessanti, architetture applicative in cui disporre componenti in modo da offrire efficienza per l’utente e produttività per il programmatore. Oggi iniziamo a conoscerne uno molto diffuso e apprezzato da anni: Knockout.js.
Knockout.js: caratteristiche e vantaggi
Innanzitutto non dobbiamo confondere Knockout.js con altre librerie fondamentali come jQuery che nasce con lo scopo di semplificare l’accesso alla struttura DOM della pagina web. Knockout.js offre un insieme di strumenti applicativi per diminuire notevolmente la quantità di codice da scrivere.
Un elemento che l’ha reso famoso è il data-binding, con cui possiamo legare tra loro un elemento visuale – pensiamo ad un campo input di un form – ed una variabile del codice Javascript. Il loro legame sarà bidirezionale pertanto il valore della variabile apparirà sempre aggiornato nell’elemento visuale seguendone ogni modifica e, analogamente, ogni nuovo input inserito tramite il medesimo campo form verrà immediatamente immesso nella variabile. Se si pensa al tempo speso per anni a passare valori dal form alle variabili e viceversa si intuisce quanto il data binding acceleri il lavoro dello sviluppatore.
Il modo in cui vengono mantenute queste dipendenze è l’utilizzo di un particolare tipo di oggetti detti observables: una volta che un elemento della pagina viene definito “osservabile”, Knockout.js segue l’evoluzione dei suoi valori e attua le modifiche di cui l’abbiamo incaricato in base alla configurazione assegnata al data-binding.
L’architettura posta alla base di Knockout.js – adottata con successo da altri ottimi framework Javascript – è il Model-View-ViewModel che permette di gestire in maniera strutturata l’interfaccia utente per tutto il suo ciclo di vita, dalla prima visualizzazione fino al termine del suo utilizzo.
Iniziamo ad usare Knockout.js con un primo esempio di data-binding. Innanzitutto scarichiamo il framework: possiamo farlo manualmente dal sito ufficiale o tramite bower, le istruzioni delle diverse possibilità sono comunque contenute nell’apposita pagina dei Downloads dal sito ufficiale del progetto. Knockout.js è una libreria in puro Javascript quindi non necessita di ulteriori dipendenze.
L’esempio: Echo app
L’esempio che proponiamo qui è un classico Echo: scriviamo qualcosa in un campo, il suo valore viene automaticamente riflesso in un altro campo. Questo funzionamento, seppur semplice, richiederebbe alcune righe di codice Javascript, magari addolcite dall’utilizzo di jQuery: qui il funzionamento sarà automatico tramite il data-binding di Knockout.js.
Questo il codice HTML/Javascript che useremo:
<html>
<head>
</head>
<body>
<p>Scrivi qua: <input data-bind="value: cosascrivi"></input></p>
<p>Leggi qua: <span data-bind="text: cosaleggi"></span></p>
<script type='text/javascript' src="js/knockout-3.4.0.js"></script>
<script type='text/javascript'>
function viewModel(){
cosascrivi=ko.observable("testo di esempio");
cosaleggi=ko.computed(function(){ return cosascrivi();});
}
ko.applyBindings(viewModel);
</script>
</body>
</html>
Nel codice troviamo, due semplici campi HTML, seguiti dal codice Javascript che inizia proprio con l’inclusione della versione di Knockout.js che abbiamo scaricato.
Notiamo, per prima cosa, che i due elementi HTML inseriti consistono uno in un campo, in cui inseriremo un valore, e l’altro in uno span che delimita l’area in cui vorremo vedere apparire lo stesso valore. Questi due elementi sono contraddistinti dall’attributo data-binding richiesto dalla libreria. Come si può vedere il suo valore è composto da due parti:
<input data-bind="value: cosascrivi">
La prima parte indica il tipo di data-binding da attuare – in questo caso value – che indica un valore raccolto in input che verrà passato ad una variabile Javascript: tale variabile sarà quella indicata nella seconda parte del valore, in questo caso si chiama cosascrivi.
Il binding dell’elemento span sarà invece di tipo text in quanto riceverà un valore dalla variabile indicata, di nome cosaleggi.
Le variabili in questione saranno definite nel ViewModel scritto in Javascript: lo si può fare come funzione – come abbiamo fatto noi – o sotto forma di oggetto.
Per definire un ViewModel dobbiamo intanto specificare quali variabili saranno degli observable: lo facciamo tramite il metodo observable, messo a disposizione dall’oggetto ko che per noi rappresenta il punto di accesso al framework Knockout.js.
Notiamo che il secondo oggetto “osservabile” è creato tramite il metodo computed in quanto viene calcolato di volta in volta: in questo caso il calcolo è la semplice restituzione del valore impresso nella variabile cosascrivi ma potrebbe essere un’operazione di qualsiasi genere.
Fondamentale ricordare alla fine di invocare il metodo applyBindings che determina l’aggancio tra ViewModel e interfaccia.
In questo tutorial, abbiamo conosciuto il data-binding di Knockout.js apprendendone i principi base con un esempio molto semplice: prossimamente, ne approfondiremo lo studio vedendolo al lavoro in una web app dal funzionamento più completo.
No Responses to “Introduzione a Knockout.js”