Linux Microsoft Code NodeJs e Google Starterkit - Introduzione

Prefazione

Sentire parlare di starterkit mi ricorda gli inizi della mia carriera lavorativa. quando giocavo con gli asp.net starterkit per creare i miei primi siti web interattivi.
Da qualche giorno c'è stato un restiling della sezione Google developers. Sotto la voce web, troviamo in beta un nuovo starter kit. Ma di cosa si tratta?

In poche parole, questo starterkit, è un punto di partenza per far vedere come sia possibile visualizzare web application compatibili su tutti i device, dagli smartphone alle tv, garantendo alte performance in termini di leggerezza, responsività e velocità di caricamento. Inoltre è possibile sincronizzare in realtime layout e dati su diversi device e tenere traccia delle metrice di performance, mobile e desktop.

Iniziamo

Lo starterkit è basato sui seguenti componenti:

NodeJs: Possiamo definirlo un framework che permette l'utilizzo server-side di Javascript.
Npm: E' per Node cio che NuGet è per .Net, e cioè un package manager, che permette di produrre e consumare pacchetti di software (addin, frameworks, ecc..)
Sass: Syntactically Awesome Style Sheets, un preprocessore CSS serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso.

Controlliamo che node sia installato correttamente, da terminal digitate:

node -v

Se non siete all’ultima versione potete aggiornare il tutto tramite Npm con i seguenti comandi:

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Setup del Google starterkit

Per prima cosa scaricare lo starterkit da qui: download
Decomprimete i file in una nuova cartella ed aggiungervi il componente Glup tramite Npm:

cd my-project
npm install #(mi raccomando è un processo lungo, abbiate pazienza...)
npm install gulp -g

Ora per fare una prova lanciamo il server locale tramite il comando

gulp serve #(si apre il browser Chrome, premte Ctrl-R per attivare reload automatico)

Installare Code

A questo punto abbiamo bisogno di un editor. Google ci consiglia Sublime, ma io ho optato per Microsoft Code perchè mi piace l'idea di vedere girare sotto Linux cose Microsoft e per imparare ad usarlo.

Scaricate Code al seguente indirizzo web: download

Seguite le istruzioni di installazione qui: istruzioni setup

Se volete fare l’update, su windows è abilitato di defaut, su MAC lo includeranno ma non sarà automatico, su Linux non è previsto (anche se nel menu lo ho trovato ma non fa niente), quindi dobbiamo verificare ogni tanto e farlo da soli.

Su Linux mi raccomando di estrarre i file dallo zip, con il comando: unzip VSCode-linux-x64.zip -d /home/rudy/Develop/VSCode
se usate un gestore d’archivi grafico vi può dare errori strani.

Funzionalità

Per compilare il nostro progetto Code supporta Glup (che possiamo definire un compressore di html, javascript, css ed immagini. Unisce più file assieme e rimuove le parti superflue che non incidono sul normale funzionamento).

Connessione di device fisici

Per connettere i nostri device (nel mio caso Nexus 5 e Nexus 9) per prima cosa abilitiamo il debug USB (link ad abilitazione) e colleghiamoli al PC tramite USB.
Apriamo il browser al seguente URL: chrome://inspect
Ed abilitiamo il port forwarding.

Debug dei device in realtime
Ogni device ha il suo modo per eseguire il debug.

Con Android

utilizziamo i Chrome DevTools che possiamo impostare al seguente indirizzo: chrome://inspect per impostare il tuo device leggi qui: debug setup

Con Safari for iOS

Apri Safari su tuo device iOS.
Connettilo via USB.
Apri Safari sul tuo PC.
Nel menu di Safari’s menu vai su Develop e seleziona il nome del tuo dispositivo.
Seleziona quale tab vuoi debuggare.

Con IE Windows Phone

Al momento non esiste un supporto al debug nativo, ma si può emulare il browser mobile sul desktop con IE 11, vedi qui: win emulator

Debug Nexus 5 e Nexus 9 in realtime

Per prima cosa collego i 2 device alle porte USB del PC e vado all’indirizzo: chrome://inspect su Google Chrome

Otteniamo l’indirizzo ip del PC, nel caso Linux tramite riga di comando “ifconfig”, con windows “ipconfig”.

Sui device apriamo il browser Chrome all’indirizzo ip del PC ottenuto precedentemente e ci colleghiamo alla porta del server Gulp: x.y.z.n:3000 (Es.: 192.168.1.2:3000)

Dal PC all’indirizzo chrome://inspect, vediamo comparire i device collegati e a quale URL.

Editing con Code in realtime

A questo punto da linea di comando raggiungiamo la cartella dello starter kit ed apriamo Code con il comando: “code .”
Clicchiamo sul menu “File” ed abilitiamo il flag “Enable autosave”.

A questo punto possiamo modificare il codice sorgente del programma e vedere in realtime il cambiamento. Inoltre scrollando e navigando sui vari link, da uno device collegati al PC (o dal PC stesso), tutti gli altri lo seguiranno (questo è possibile tramite la funzionalità “browsersync”).