Prefazione
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
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 -vSe 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
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 -gOra 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à
Connessione di device fisici
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”).
