![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2013\/05\/n74a1web.png\")
Progettare direttamente nel browser ha tantissimi benefici, come produrre risultati pi\u00f9 accurati e completi e rimuovere lo step extra di conversione del file immagine in markup e CSS. Tuttavia, anche i siti progettati nel browser richiedono ancora l’inserimento dei contenuti, la simulazione di interazioni con il server e la creazione di JavaScript temporaneo che non saranno poi riutilizzabili nel sito live.<\/p>\n
Non sarebbe bello se potessimo passare dal progettare semplicemente layout ed interazioni alla progettazione dell’intero client side dell’applicazione durante lo stesso processo?<\/p>\n
\u00c8 proprio qui che entra in gioco Node.<\/p>\n
Node.js \u00e8 una piattaforma JavaScript server-side. Non \u00e8 un web server, ma ci permette di crearne uno facilmente. Possiamo anche crearci delle utility che girano sul web server, come ad esempio delle utility di setup e “minification” e realizzarci dei tool command line generici.<\/p>\n
Node prese le mosse nel 2009 e sollev\u00f2 da subito un considerevole interesse, probabilmente perch\u00e9 dava agli sviluppatori JavaScript l’opportunit\u00e0 per scrivere codice server-side anche se non avevano un background di programmazione lato server. Non era male nemmeno il fatto che Chrome si fosse fatto la reputazione di essere solido e veloce e Node usava il suo engine V8.<\/p>\n
Oggi, \u00e8 possibile far girare i server di produzione su Node e molte persone stanno facendo con successo proprio questo. Spingersi cos\u00ec in l\u00e0, comunque, \u00e8 un investimento. Il progetto Node e tutti i moduli creati dalla community che lo rendono fantastico, \u00e8 ancora un obiettivo in movimento. Ma anche se non siete pronti per scrivere e lanciare interi siti con Node, \u00e8 totalmente stabile per essere usato come tool di sviluppo.<\/p>\n
\u00c8 JavaScript, perci\u00f2 se sapete collegare un event handler jQuery, potete scrivere un web server. \u00c8 leggero, cos\u00ec potete farlo girare sul vostro laptop continuando a tenere la musica in streaming in sottofondo. \u00c8 semplicissimo da scaricare, impostare e crearci cose, perci\u00f2 non c’\u00e8 bisogno della conoscenza esoterica di una persona che fa supporto IT per cominciare ad usarlo. Il payoff \u00e8 che invece dei mockup e dei dati “hard-coded” potete progettare un insieme di asset lato client, tempate di pagina e schemi di dati che si potranno lanciare in produzione.<\/p>\n
Installare Node in locale \u00e8 facilissimo per gli ambienti pi\u00f9 comuni. Potete scaricare degli installer<\/a> che includono Node cos\u00ec come npm, il suo package manager, dal sito del progetto. Installarlo su un server remoto non \u00e8 altrettanto semplice, ma abbiamo a disposizione della buona documentazione<\/a> che pu\u00f2 esserci d’aiuto. Dopo aver eseguito il processo di installazione, dovreste essere in grado di andare nel terminal o nella command line e testarlo.<\/p>\n Se non dite a Node di far girare un file specifico, avrete il Read-Eval-Print Loop, o REPL. Se scrivete Per uscire dal REPL, o per porre fine a qualunque altra esecuzione di Node (come un web server funzionante), premete Ctrl+C. Nel caso del REPL, dovrete farlo due volte per confermare.<\/p>\n Sebbene sia carino sapere che Node pu\u00f2 fare un po’ di aritmetica base e di concatenazione di stringhe, il suo valore per noi developer sta nel far girare i programmi. Potete vedere un esempio di tale programma, un web server basilare, sulla homepage del progetto. Suggeriscono di creare un file chiamato Questo utilizza solo un modulo, il modulo core Il modulo Una cosa da notare \u00e8 che il lavoro in questo caso \u00e8 svolto nell’event handler, come la maggior parte delle cose in Node. Il callback in Per ottenere un qualunque valore serio da un server Node, anche uno che non andr\u00e0 mai in produzione, \u00e8 meglio acquisire un po’ di familiarit\u00e0 con i moduli in npm. Ce ne sono migliaia disponibili, ma quelli di cui avrete bisogno per creare un’applicazione web elementare sono alcuni tra i pi\u00f9 vecchi e stabili, quindi non sentitevi in dovere di cercarli tutti prima di cominciare. Uno che sicuramente vi torner\u00e0 comodo per progettare un’applicazione \u00e8 Express<\/a>, un framework per applicazioni web tutt’altro che complicato.<\/p>\n Se siete abituati ad installare dei progetti open source clonando un repository GitHub o scaricando un file zip, probabilmente vi piacer\u00e0 npm. Per installare Express con npm, per esempio, andate nel terminal o sulla riga di comando e scrivete Lo use cas ideale per progettare le vostre applicazioni con Node \u00e8 un’applicazione di una sola pagina nella quale il server fornisce la maggior parte dei dati, ma Node \u00e8 ancora utile per un sito pi\u00f9 tradizionale. Ovviamente, dovrete cominciare lo sviluppo con i requisiti definiti nella maniera pi\u00f9 precisa possibile, ma l’implementazione di solito fa emergere dei requisiti che non erano stati considerati e alcuni di questi possono avere un considerevole impatto sulla vostra timeline. Anche in un’applicazione server-driven in cui potrebbe non essere possibile riutilizzare le strutture dati e i template cos\u00ec come sono, creare una versione client-only aiuta a testare le proprie supposizioni riguardanti i dati di cui si avr\u00e0 bisogno e come li userete.<\/p>\n Se state sviluppando una app da una sola pagina, la giustificazione \u00e8 molto pi\u00f9 facile. Avrete bisogno di pensare all’ottimizzazione della comunicazione con il server perch\u00e9 vengano fatte meno richieste possibili, il che vuol dire conosce come i dati dovranno essere impacchettati da ogni estremit\u00e0 del server e il modo in cui metterete in cache i dati alla ricezione (sempre che ci sia).<\/p>\n Un vantaggio dell’avere JavaScript sul server \u00e8 che i template possono essere resi dallo stesso template engine sia lato client sia lato server. Questo vi permette di sperimentare su entrambe i lati ed ottimizzare per la vostra situazione. \u00c8 anche una cosa che fa risparmiare tempo rendere i template con oggetti JavaScript e considerare solo il modo in cui i dati saranno raggruppati alla fine (non come saranno memorizzati nel database). Progettare questi raggruppamenti di dati \u00e8 il grosso del lavoro che possiamo fare con Node verso la fine di quella che consideriamo tradizionalmente la progettazione dell’applicazione.<\/p>\n Mettere insieme ciascuna pagina da parti diverse su tutto il server \u00e8 difficile per una applicazione in qualsiasi linguaggio. Al contrario, qualunque cosa renda una pagina dovrebbe avere delle dipendenze chiare e il risultato di ciascuna pagina o di richiesta dati dovrebbe combinare queste dipendenze in un’unit\u00e0 integrata e sensatamente organizzata.<\/p>\n Se avete lavorato in un framework server-side nel quale una pagina o una view \u00e8 legata a un singolo oggetto o modello e in cui i dati aggiuntivi sono importati ed esposti in modi diversi, probabilmente comprendete come l’alternativa diventi un fastidio. Sarete anche coscienti del fatto che la soluzione \u00e8 un buon view-model i cui dati sono definiti da ciascuna view, non dai modelli che lo alimentano. Con questo esercizio, puntiamo a tracciare cosa va in questi view-model.<\/p>\n<\/div>\nnode<\/code> in terminal o sul prompt di comando, potete iniziare ad eseguire del JavaScript arbitrario. Per esempio, dopo aver avviato REPL, scrivete var a = 9;<\/code>. REPL risponder\u00e0 con “undefined”. Ora, scrivete a * 3<\/code> (o un qualsiasi altro numero) e vi risponder\u00e0 con il risultato corretto. Potete rendere le cose pi\u00f9 interessanti definendo una funzione e poi chiamandola:<\/p>\n> function sayHello( name ) { return \u201cHello, \u201c + name; }\nundefined\n> sayHello( \u201cA List Apart\u201d );\n\u2018Hello, A List Apart\u2019<\/code><\/pre>\nexample.js<\/code> con questo codice:<\/p>\nvar http = require(\u2019http\u2019);\nhttp.createServer(function (req, res) {\n res.writeHead(200, {\u2019Content-Type\u2019: \u2018text\/plain\u2019});\n res.end(\u2019Hello World\\n\u2019);\n}).listen(1337, \u2018127.0.0.1\u2019);\nconsole.log(\u2019Server running at http:\/\/127.0.0.1:1337\/\u2019);<\/code><\/pre>\nhttp<\/code>. Come potrete immaginare, il modulo http<\/code> contiene tutte le cose di base che ci servono per un sito su HTTP. Node contiene una collezione diligentemente editata di moduli core<\/a> che forniscono cose come gli event handler, l’accesso al file system e le astrazioni di vari protcolli di rete. Ma proprio come probabilmente usereste una libreria JavaScript o un framework per accelerare e blindare lo sviluppo sul lato client, per lo sviluppo con Node oltre al semplice “Hello World” generalmente si aggiungono altri moduli non-core che usano npm.<\/p>\nhttp<\/code> contiene una funzione createServer<\/code>, comunque, che \u00e8 tutto quello di cui hai bisogno per creare un web server molto basilare. Nel codice qui sopra, una volta che il server \u00e8 stato creato, ascolta sulla porta 1337 sulla vostra macchina locale. Quando riceve una richiesta, rimanda indietro una risposta testuale.<\/p>\ncreateServer()<\/code> gestisce un connection event, che occorre ogni volta che un nuovo cliente contatta il server. Per avviare questo server, scrivete node example.js<\/code> nel termina e poi aprite un browser all’indirizzo http:\/\/127.0.0.1:1337. Questo fa partire un connection event e dovreste vedere il messaggio nel callback.<\/p>\nnpm install express<\/code>. Fintanto che sarete online e avrete il permesso di scrivere sulla vostra macchina, questo far\u00e0 il fetch di tutto il codice e di tutti gli asset di cui ha bisogno Express per girare, cos\u00ec come i moduli da cui ha dipendenze. La prima volta che farete girare npm dalla vostra directory di lavoro, tutti questi elementi finiranno in una nuova sotto-directory node_modules<\/code>. Ora il modulo \u00e8 pronto per essere usato nei programmi Node allo stesso modo in cui usavamo http<\/code>, attraverso la funzione require<\/code>.<\/p>\n<\/div>\n\nProgettare applicazioni<\/h2>\n