{"id":378,"date":"2013-05-27T08:14:11","date_gmt":"2013-05-27T06:14:11","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/piccola-guida-all-utilizzo-di-node\/"},"modified":"2013-05-27T08:14:11","modified_gmt":"2013-05-27T06:14:11","slug":"piccola-guida-all-utilizzo-di-node","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/piccola-guida-all-utilizzo-di-node\/","title":{"rendered":"Piccola guida all’utilizzo di Node"},"content":{"rendered":"
\n

Nel mio primo articolo, \u201cMigliori mockup nel browser con Node.js<\/a>\u201d, ho spiegato perch\u00e9 Node.js rende pi\u00f9 semplice la progettazione di applicazioni e come cominciare. Adesso \u00e8 il momento di vedere il nuovo processo di design in azione.<\/p>\n

Piuttosto che cercare di capire tutti i requisiti e gli schemi API solo per realizzare i comp con del contenuto fittizio inserito direttamente nel codice e con interazioni fittizie con il server, per poi dover buttare via tutto quando si tratta di dover implementare le cose “realmente”. Con Node.js potete evitare l’inserimento del contenuto e produrre codice lato client pronto per la beta version.<\/p>\n

Il processo sembra un po’ il buon vecchio design nel browser<\/a>, ma con pi\u00f9 JavaScript e con un livello aggiunti:<\/p>\n

    \n
  1. Design del layout e degli stili<\/li>\n
  2. Convertire il markup in un template JavaScript<\/li>\n
  3. Crere una funzione di inizializzazione<\/li>\n
  4. Creare un semplice server Node.js<\/li>\n
  5. Aggiungere al server un modello di “data object”<\/li>\n
  6. Aggiungere le funzioni server per mandare pagine statice e JSON<\/li>\n
  7. Richiedere e utilizzare il JSON lato client<\/li>\n<\/ol>\n

    Vi spaventa? Non preoccupatevi: il primo step richiede un’infinit\u00e0 di tempo in pi\u00f9 rispetto a qualunque altro step, quindi se avete gi\u00e0 il design, troverete tutti gli altri step molto pi\u00f9 che gestibili.<\/p>\n

    In questa guida, creeremo una feature per un finto negozio d’arte. Se volete seguire il tutto passo passo da casa, potete clonare il mio repository GitHub<\/a>. (Se avete bisogno di una mano per l’installazione, leggete il README<\/a>, o date una sbirciata alla live demo<\/a>. Spiegher\u00f2 pi\u00f9 avanti tutti gli step e commenter\u00f2 il codice qui sotto.)<\/p>\n<\/div>\n

    \n

    Creare i template<\/h2>\n

    Una volta che avete un design robusto e il markup che lo accompagna, convertirlo in un template che potete usare per tutti gli esempi \u00e8 pi\u00f9 efficiente che creare un markup duplicato per ciascuno. La parte difficile \u00e8 finita: avete gi\u00e0 pensato a dove verranno usati i data point nel design che avete realizzato. Con queste scelte ancora fresche nella vostra mente, andate indietro e contrassegnate l’HTML con i dati nel linguaggio di template che preferite.<\/p>\n

    Per il mio esempio, user\u00f2 un negozio che vende stampe artistiche. Ecco una snippet del mio markup iniziale:<\/p>\n

    <h2>Two Acrobats with a Dog<\/h2>\n<h3>Pablo Picasso<\/h3>\n<img src=\"img\/102.jpg\" alt=\"Two Acrobats with a Dog\" class=\"active\" \/>\n<ul class=\"info\">\n\t<li>8\" x 11\"<\/li>\n\t<li>acid-free paper<\/li>\n\t<li>suitable for matting<\/li>\n<\/ul>\n<span class=\"price\">$49.99<\/span><\/code><\/pre>\n
    Pensate ai vostri template come a posti in cui definire i requisiti sia per i dati sia per la loro formattazione lato client. \u00c8 fantastico se potete anche riutilizzarli per il rendering client-side, ma potrebbe non essere rilevante per la vostra applicazione. Fintanto che avrete dei buoni dati, \u00e8 irrilevante convertirli da un linguaggio di template all’altro, quindi non state a tormentarvi troppo su quale template engine usare.<\/p>\n
    Tuttavia, avete bisogno di un template engine che funzioni sia nel browser sia in Node.js. Se non siete sicuri, cercate il vostro template engine su GitHub<\/a> e verificate che ci sia una guida per l’installazione via npm<\/a> nel manuale, cos\u00ec come uno script minified per l’utilizzo sul client. Io prediligo doT.js<\/a>, quindi ecco di nuovo quella snipped con il markup per aggiungere i dati mediante doT:<\/p>\n
    <h2>{{=it.title}}<\/h2>\n<h3>{{=it.artist.name}}<\/h3>\n<img src=\"img\/{{=it.id}}.jpg\" alt=\"{{=it.title}}\" class=\"active\" \/>\n<ul class=\"info\">\n\t{{~it.info :info_item}}\n\t<li>{{=info_item}}<\/li>\n\t{{~}}\n<\/ul>\n<span class=\"price\">{{=it.price}}<\/span><\/code><\/pre>\n
    Mi piace salvare i miei template nella loro directory allo stesso livello della mia directory JavaScript, cos\u00ec adesso lo salvo come tmpl\/detail.dot<\/code>.<\/p>\n<\/div>\n
    \n
    Inizializzare il client<\/h2>\n
    Dal momento che vogliamo essere in grado di usare i nostri template sia in Node sia nel browser, hanno bisogno di essere memorizzati fuori dall’HTML e caricati e compilati quando apriamo la pagina. Per cominciare, salviamo la versione minified del template engine e aggiungiamo un tag script alla pagina, per includerlo. Una volta fatto ci\u00f2, potete caricare il template, compilarlo e poi continuare con qualunque altro lavoro di inizializzazione nel vostro file JavaScript principale. Sto usando jQuery nel mio esempio, pertanto il mio codice ha questo aspetto:<\/p>\n
    var detailTmpl;\n\n$.when( \n\t$.get( \"tmpl\/detail.dot\", function( tmpl ) {\n\t\tdetailTmpl = doT.template( tmpl );\n\t}, \"text\" ) \n).then( init );<\/code><\/pre>\n
    Cos’\u00e8 quella misteriosa funzione init<\/code>? \u00c8 dove metto qualsiasi interazione che voglio aggiungere al mio mockup statico. Per il momento sto solo creando un’interazione, quindi la mia funzione init<\/code> \u00e8 piuttosto semplice:<\/p>\n
    function init() {\n\t$( \"div.content\" ).on( \"click\", \"div.result\", showDetail );\n}<\/code><\/pre>\n
    Questo codice pu\u00f2 essere reso molto pi\u00f9 elegante usando Require.js<\/a> con il suo text plugin. Questo va oltre lo scopo di questa demo, ma vi incoraggio vivamente ad utilizzarlo in produzione.<\/p>\n
    Gestiremo il rendering del template in showDetail()<\/code>, ma dobbiamo aggiungere un server e un data store prima di scrivere quella funzione dal momento che adesso ci mancano i dati da<\/em> rendere.<\/p>\n<\/div>\n
    \n
    Creare un server<\/h2>\n
    Se ricarico adesso la mia pagina e apro la console del browser, ottengo un errore JavaScript. Questo succede perch\u00e9 sto cercando di caricare il mio template con una XMLHttpRequest (XHR) su una pagina che viene servita dal file system, in violazione alla same origin policy<\/a>. Non posso nemmeno controllare che il mio template funzioni finch\u00e8 non viene correttamente gestita (ad esempio, da un server).<\/p>\n
    Per creare un semplice server Node che mi permetta di far girare il mio XHR, faccio alcune cose:<\/p>\n