Come si lavora con Meteor
Per usare Meteor serve un sistema Unix o un Mac. Un ambiente per Windows è in arrivo, ma al momento è ancora in beta. Ci si può registrare per avere una notifica quando sarà rilasciato, oppure si può iniziare a sperimentare con il file puntato dalla pagina github.com/meteor/meteor/wiki/Preview-of-Meteor-on-Windows.
L’installazione, per il momento, è quanto di più Unix si possa immaginare: una url che punta a uno shell script da lanciare da riga di comando, così:
curl https://install.meteor.com | /bin/sh
Lo script, 216 righe in totale, provvede a scaricare e installare tutto il necessario verificando che il sistema operativo sia OS X o Linux e che non ci siano versioni troppo vecchie del pacchetto già installate.
L’applicazione dimostrativa in esecuzione nell’emulatore Android
Dopo l’installazione siamo pronti per creare uno scheletro di applicazione, con
meteor create meteor_app
Questo crea una directory chiamata meteor_app nella posizione in cui siamo, per esempio $HOME/src, e crea i file di base per un’applicazione web, cioè
meteor_app.css
meteor_app.html
meteor_app.js
Per vedere l’applicazione in esecuzione, basta eseguire il comando meteor e aprire il browser all’indirizzo localhost:3000.
Il file html è quello che abbiamo mostrato prima e contiene uno scheletro di pagina e un semplice template. Il codice JavaScript è altrettanto breve:
if (Meteor.isClient) {
// imposta il contatore a 0
Session.setDefault(‘counter', 0);
Template.hello.helpers({
counter: function () {
return Session.get(‘counter');
}
});
Template.hello.events({
‘click button': function () {
// incrementa il contatore quando si preme il pulsante
Session.set(‘counter', Session.get(‘counter') + 1);
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// codice che verrà eseguito sul server
});
}
Notiamo due cose interessanti. La prima è che il codice è diviso in due sezioni, una per il client e una per il server. L’applicazione, quindi, è unitaria a un livello profondo. La seconda è che il codice client, oltre a un’inizializzazione, contiene funzioni destinate a innestarsi su un template di nome hello, perché entrambe iniziano con Template.hello. La parte helpers definisce variabili per il template, in questo caso una sola, chiamata counter. L’argomento fra le parentesi tonde di Template.hello.helpers è la sintassi JavaScript per definire un oggetto anonimo e inizializzare una proprietà chiamata counter. Si tratta di uno di quei casi in cui ci ripetiamo che JavaScript è un Lisp con le graffe, che è un complimento. Questa proprietà verrà usata nella parte del template fra doppie graffe, come mostrato nelle linee di codice che ripetiamo qua sotto:
<template name="hello">
<button>Clicca qui</button>
<p>Hai premuto il pulsante {{counter}} volte.</p>
</template>
A questo punto, dovrebbe essere chiaro come si usa la sostituzione di variabili tipica di ogni linguaggio web, da Asp e Php in poi.
Per quello che riguarda gli eventi, l’aggancio è automatico. Come nell’esempio, si crea un oggetto con delle proprietà che sono selettori. In questo caso
Template.hello.events({
‘click button': function () {
// incrementa il contatore quando si preme il pulsante
Session.set(‘counter', Session.get(‘counter') + 1);
}
});
il selettore è ‘click button’. La prima parte è il nome dell’evento, che può essere appunto click, focus, keypress, eccetera. Dopo lo spazio c’è un selettore, in questo caso button, per una classe di oggetti a cui attaccare l’evento. Potremmo essere più specifici e dare una classe al pulsante
<button class="my-button">My button</button>
e rendere più preciso il selettore dell’evento
"click .my-button": function (event, template) {
alert("My button was clicked!");
}
Questa sintassi dei selettori permette di unificare il codice, mettendo tutte le uova nello stesso cesto, all’interno di una funzione top Template.name.events. Nello stesso tempo, c’è la flessibilità che occorre per mettere ogni funzione al suo posto. Il template e il suo codice associato sono facilmente trattabili come unità di codice.