Perché usare uno static type checker nello sviluppo di app JavaScript

JavaScript è una delle principali tecnologie che utilizziamo nei nostri progetti. JavaScript è evoluto negli anni passando da semplice linguaggio di scripting a vero e proprio ambiente di sviluppo, adatto a realizzare applicazioni web sempre più interattive e complesse.

Gestione della complessità

La diffusione di librerie di rendering come React ha accelerato questa transizione, permettendo di sviluppare siti e applicazioni web client-side usando un paradigma dichiarativo (il programmatore si focalizza cioè sul “cosa” e non sul “come”) e orientato a componenti. Oggi JavaScript non è più solamente il linguaggio adottato per gestire l’interattività dell’interfaccia utente, ma anche per generare gran parte del markup HTML che compone le pagine di una soluzione web.

Se il codice diviene via via più complesso, aumenta di conseguenza la probabilità di incorrere in bug, spesso riguardanti aspetti banali della programmazione e quindi facilmente evitabili. Per esempio, possono riguardare il passaggio di un parametro di tipo errato ad una funzione – magari perché parte di una porzione di codice datata o frutto del contributo poco leggibile di un altro sviluppatore.

Static type checking

Per risolvere questa tipologia di problemi, in alcuni progetti abbiamo adottato il linguaggio TypeScript. Si tratta di una tecnologia open source, realizzata da Microsoft, che permette di estendere le funzionalità di JavaScript aggiungendo un sistema di tipi (type system). La particolarità di TypeScript è che questa tecnologia segnala l’occorrenza di errori durante la scrittura del codice, prima che questo venga eseguito a runtime.

Nella progettazione di componenti React, per esempio, usiamo TypeScript per definire la tipologia di valori che la funzione o la classe si aspetta come parametri. Lavorando in questo modo riduciamo la probabilità di bug grazie alla segnalazione preventiva di un errore nel codice e – aspetto non meno importante – scriviamo una “documentazione vivente” del codice, che può far risparmiare parecchio tempo quando torniamo a lavorarci dopo diverso tempo, o nel caso in cui altri sviluppatori dovessero metterci mano successivamente.

Utilizzare TypeScript in un progetto è un po’ come avere una persona accanto che ti corregge e ti avvisa dei problemi man mano che scrivi il codice di un’applicazione.

Il tempismo è tutto

In passato ci è capitato di avviare un progetto di sviluppo web senza poter includere un sistema di type checking: in fase iniziale non abbiamo avvertito particolari problemi, ma con l’espandersi della codebase e con l’aggiunta di nuovi sviluppatori al team, è aumentato di molto il numero di bug e il tempo necessario a riutilizzare componenti e funzioni esistenti. Utilizzare TypeScript (o un altro type checker) all’inizio di un nuovo progetto è buona pratica per evitare di trovarsi in affanno quando, successivamente, la complessità inevitabilmente tenderà ad aumentare. A onor del vero, utilizzare uno static type checker comporta generalmente più lavoro per il programmatore, perché dovrà progettare in anticipo la gestione dei tipi per ogni funzionalità da implementare; lo sforzo aggiuntivo sarà però ampiamente ripagato in futuro dal minor numero di bug e dalla facilità di lettura di vecchie porzioni di codice.

TypeScript e Flow

Oltre a TypeScript, abbiamo maturato esperienza nell’utilizzo di Flow, uno static type checker open source creato da Facebook. In questo caso non si tratta di un linguaggio di programmazione, ma di una semplice libreria che è possibile installare nell’ambiente locale di sviluppo. È davvero difficile dire quale, tra le due soluzioni, sia la migliore: entrambe hanno punti di forza che le contraddistinguono. Flow, essendo un add-on al normale processo di sviluppo, rappresenta un cambiamento meno radicale rispetto all’adozione di un nuovo linguaggio di programmazione (come TypeScript), sebbene questo rappresenti un superset di JavaScript (cioè un componente in grado di estenderne le funzionalità). Un altro aspetto che potrebbe incidere nella scelta è la maggiore popolarità di TypeScript, che si traduce in un maggior supporto da parte della community di sviluppo.

Questi sono i motivi per cui, nello sviluppo di nuovi progetti fortemente basati su JavaScript, suggeriamo di adottare uno static type checker come TypeScript o Flow –  minimizzando il numero di bug e facilitando la leggibilità del codice da parte di altri sviluppatori.