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”).

Mono 4.0 e C# 6.0

Mono 4.0 è la prima versione di Mono che contiene codice Microsoft .NET open source. In questa versione sono abilitate per default le nuove funzionalità del C# 6.0.

Queste sono le nuove funzionalità

• Auto property initializers
• Static members
• String interpolation
• Expression-bodied methods
• Expression-bodied properties
• Index initializers
• Null-conditional operators
• The nameof operator
• Exception filters
• Await in catch and finally

E questo un esempio di utilizzo (ho usato MonoDevelop 5.9)

using System;
using Newtonsoft.Json.Linq;
using System.Configuration;

//Con - Static members
using static System.Math;

namespace Azzan.Mono4Sample
{
    public class Point
    {
        /*
        //Prima di - Auto property initializers
        public int X {get; private set;}
        public int Y {get; private set;}

        public Point()
        {
            X = 4;
            Y = 9;
        }
        */

        //Con - Auto property initializers
        public int X {get; } = 4;
        public int Y {get; } = 9;

        public Point(int x, int y) { X = x; Y = y; }

        //Prima di Expression-bodied properties
        /*
        public double Dist
        {
            //Prima di - Static members
            //get { return Math.Sqrt(X * X + Y * Y); }

            //Con - Static members
            get { return Sqrt(X * X + Y * Y); }
        }
        */

        //Con - Expression-bodied properties
        public double Dist => Sqrt(X * X + Y * Y);

        //Prima di - Expression-bodied methods
        /*
        public override string ToString()
        {
            //Prima di - String interpolation
            //return string.Format("[Point: X={0}, Y={1}, Dist={2}]", X, Y, Dist);

            //Con - String interpolation
            return $"[Point: X={X}, Y={Y}, Dist={Dist}]";
        }
        */

        //Con - Expression-bodied methods
        public override string ToString() => $"[Point: X={X}, Y={Y}, Dist={Dist}]"; 

        //Prima di - Index initializers
        /*
        public JObject ToJson()
        {
            var result = new JObject();
            result["x"]  = X;
            result["y"]  = Y;
            return result;
        }
        */

        //Con - Index initializers
        public JObject ToJson() => new JObject() { ["x"]  = X, ["y"]  = Y };

        //Prima di - Null-conditional operators
        /*
        public static Point FromJson(JObject json)
        {
            if(json != null &&
                json["x"] != null &&
                json["x"].Type  == JTokenType.Integer &&
                json["y"] != null &&
                json["y"].Type  == JTokenType.Integer)
            {
                return new Point((int)json["x"], (int)json["y"]);
            }

            return null;
        }
        */

        //Con - Null-conditional operators
        public static Point FromJson(JObject json)
        {
            if(json?["x"]?.Type == JTokenType.Integer &&
               json?["y"]?.Type == JTokenType.Integer)
            {
                return new Point((int)json["x"], (int)json["y"]);
            }

            return null;
        }
            
        public Point Add(Point point)
        {
            if(point == null)
            {
                //Prima di - The nameof operator
                //throw new ArgumentNullException("point");

                //Con - The nameof operator
                throw new ArgumentNullException(nameof(point));
            }

            return point;
        }

        public void DoSomething()
        {
            //Prima di - Exception filters
            try
            {
                
            }                                //Con - Exception filters
            catch(ConfigurationException ex) //when (ex.IsSevere)
            {
                //Con - Await in catch and finally
                //await LogAsync(ex);
            }
            finally 
            {
                //Con - Await in catch and finally
                //await CloseAsync();
            }
        }
    }
}

Qui trovate i sorgenti dell'esempio creati con MonoDevelop 5.9: Download esempio

Purtroppo ho notato però che l'editor di MonoDevelop 5.9 ha ancora qualche problema nel riconoscere la sintassi C# 6.0 ma non sono cose gravi.
Invece gli "Exception filters" proprio non funzionano, se de-commentate il codice del mio esempio il compilatore vi da errore.

Che versione di Mono è installata?

Questo è un comando che potete lanciare tramite shell Linux, per vedere i dettagli della versione che avete installato:

mono --version