L’evoluzione da JavaScript a TypeScript, la scelta degli ingegneri che lavorano alla piattaforma Slope

Tutte le applicazioni web sono composte da due macro-componenti:

1. una parte server (backend), cioè quella che gira su server (locali o remoti che siamo)
2. una parte client (frontend), cioè quella in esecuzione all’interno del browser (Chrome, Firefox, ecc…)

Con questo articolo vogliamo illustrare i due principali linguaggi di programmazione comunemente utilizzati per la parte frontend, ma nati in periodi e contesti molto differenti:

• JavaScript (JS), i cui albori  risalgono circa al 1995;
• TypeScript (TS), nato nel 2012.

Il nostro obiettivo è quello di spiegare le principali differenze tra i due e le motivazioni che hanno spinto gli ingegneri di Slope a riscrivere alcune parti dell’applicazione da JS a TS.

Che cos’è JavaScript?

TypeScript nasce dalla necessità di ottenere un linguaggio di programmazione più strutturato che dia la possibilità di scrivere codice che sia più robusto e facile da mantenere.
Tuttavia i browser web sono ad oggi in grado di comprendere solo 3 “linguaggi”: 

• HTML
• CSS
• JavaScript

Come potete vedere TypeScript non è fra questi.

L’HTML è un linguaggio di markup (marcatura) che si utilizza per definire la struttura “logica” delle pagine web.

Il CSS permette invece di definire lo stile grafico delle pagine, come ad esempio i colori, i caratteri, le forme e il posizionamento dei vari elementi.

Il JavaScript, infine, permette di definire la logica di interazione della pagina. In altre parole è responsabile di tutte (o quasi) le operazioni dinamiche e/o le animazioni della pagina che avvengono senza che essa si ricarichi.

Quando uno sviluppatore scrive un’applicazione con il linguaggio di programmazione TypeScript è consapevole che questo codice deve essere trasformato (traspilato) in puro JavaScript per fare in modo che questo possa essere eseguito dal browser.

Da un punto di vista strettamente pratico, se si guarda il risultato finale, non c’è differenza tra un programma scritto in TypeScript e uno scritto in JavaScript per l’utente che naviga un sito web o utilizza un’applicazione web based.

Il browser riceverà lo stesso set di istruzioni sia che il codice di partenza sia stato scritto in TypeScript sia che questo sia stato scritto direttamente in JavaScript da parte del programmatore.

Quali vantaggi si hanno nello scegliere il TypeScript?

TypeScript non aggiunge nessuna funzionalità ad un’applicazione rispetto a quelle che si possono implementare in JavaScript. 

Il vero vantaggio riguarda il processo di sviluppo, progettazione e il mantenimento dell’applicazione.

Come accennavamo all’inizio dell’articolo il JavaScript, di per sé, è un linguaggio relativamente semplice (viene definito “di scripting”) che per esempio non ha tipizzazione statica ma soltanto dinamica, ciò significa che, mentre il programmatore scrive il codice JavaScript non utilizza una sintassi che permette di definire i tipi primitivi di una variabile (alcuni esempi di tipi sono: String, int, boolean…) come invece farebbe in un linguaggio fortemente tipizzato, come ad esempio il Java.

Per fare un esempio pratico possiamo considerare una semplice istruzione che consiste nella dichiarazione di una variabile.

In JavaScript:

let name = ‘Alessandro’;

In TypeScript:

let name: string = ‘Alessandro’;

Come si può vedere fin da subito nel caso di JavaScript non vi è alcuna informazione sul tipo della variabile “name”, mentre in TypeScript è presente il tipo della variabile al momento della sua dichiarazione (in questo caso “string”).

Mentre in TypeScript sarà soltanto possibile assegnare stringhe alla variabile “name”, In JavaScript è per esempio possibile assegnare un intero alla variabile che prima conteneva una stringa:

name = 4;

Provando la stessa cosa in TypeScript verrebbe lanciata subito un’eccezione del tipo:

Type 'number' is not assignable to type 'string'.

L’eccezione è molto chiara ed esplicativa, ci dice che il valore 4 non può essere salvato nella variabile nome perché abbiamo specificato che questa può contenere solo stringhe.

Questo è solo un piccolo esempio delle varie funzionalità del TypeScript che mancano invece in JavaScript.

JavaScript a TypeScript: la scelta degli ingegneri che lavorano alla piattaforma Slope

Il codice sopra elencato, sebbene molto banale, è un esempio lampante di come un linguaggio più strutturato possa permettere di sviluppare codice più robusto e più facile da gestire.

Nel nostro caso, per i vari componenti client della piattaforma Slope facciamo largo uso di JavaScript per la parte client. Negli ultimi due anni abbiamo però iniziato ad utilizzare attivamente TypeScript per convertire gradualmente il nostro codice e guadagnare in robustezza.

Il Planning contenuto nel backoffice è un componente che prevede un largo utilizzo di codice JavaScript, poiché l’utente deve poter effettuare molte azioni in maniera fluida e con un’interfaccia chiara e piacevole.

Nei mesi passati abbiamo lavorando per riprogettare un nuovo planning utilizzando TypeScript e VueJS (un popolare framework per sviluppare applicazioni client), questo ci ha permesso di ottenere una struttura dell’applicativo molto più solida e semplice da manutenere.

Dal punto di vista dell’ingegneria del software la manutenzione del codice non è una cosa da sottovalutare, in un ecosistema software grande come la piattaforma Slope che evolve e che segue l’andamento del mercato è importante costruire applicazioni per cui sia facile e sicuro aggiungere nuove funzionalità nel tempo.

Oltre al “planning” ci sono anche alcuni componenti di Slope che sono stati concepiti nativamente in TypeScript, un esempio è l’applicazione “Food and Beverage” che è stata la prima a venire scritta interamente in questo nuovo e moderno linguaggio.

La complessità di un software cresce con il tempo e con le funzionalità che si aggiungono giorno dopo giorno. Gli ingegneri che lavorano alla piattaforma cambiano o, anche se questi sono gli stessi, ci si tende a dimenticare delle ragioni per cui si è fatta una determinata scelta tecnica. 

Scrivere codice che sia chiaro e ben strutturato permette quindi di risparmiare molto tempo sul lungo periodo e rende il software sempre più robusto e affidabile, creando un vantaggio innegabile sia per noi che per i nostri clienti.

Alessandro Magionami– Twitter @Alemagionami

---

Se siete curiosi di saperne di più sulla piattaforma Slope o se sei un ingegnere informatico che vuole lavorare con il nostro team di ingegneri mandaci il tuo CV all’indirizzo jobs@slope.it !
We are (always) hiring!