Javascript: l’importanza di conoscerlo

Obiettivo: apprendere le basi di JavaScript ed applicarle ad un progetto Full Stack

Gli obiettivi specifici definiti all’inizio del percorso sono stati i seguenti:

• Prendere confidenza con Node.js e npm.
• Comprendere i concetti fondamentali di JavaScript e la sua sintassi.
• Approfondire la conoscenza relativa all’esecuzione sincrona ed asincrona del codice.
• Implementare un server con set minimale di API REST.
• Sviluppare un validatore per le API.
• Capire come gestire la documentazione delle API.
• Pensare ed implementare un frontend per fruire delle API.

L’importanza di JavaScript

Secondo un sondaggio condotto da StackOverflow sulla propria community di sviluppatori, JavaScript è il linguaggio di programmazione più diffuso ed utilizzato. Il primato è detenuto da ben sette anni consecutivi.

JavaScript è attualmente utilizzato dalla quasi totalità dei siti Web ed è estremamente versatile: nonostante fosse stato originariamente pensato come linguaggio client-side (incorporato in pagine Web, poi scaricato ed eseguito direttamente dal browser), JavaScript è in realtà utilizzato anche lato server (grazie a Node.js) sia su dispositivi mobili (grazie a framework quali React Native e Ionic), che per scrivere applicazioni desktop (con Electron). Di conseguenza, chi lo impara ha enormi possibilità di applicazione.

Per la gilda è stato deciso di riferire il percorso di studi ad un caso pratico e vicino alle esigenze quotidiane. L’obiettivo da raggiungere è stato quindi sviluppare un piccolo sistema Web che consentisse di mettere in pratica le conoscenze acquisite.

Per organizzare il percorso di apprendimento è stata adottata una strategia bottom-up: partire dalle fondamenta del linguaggio (strumenti, paradigmi, convenzioni, best practices etc.) per poi implementare un semplice backend in grado di esporre alcune API REST ed infine un frontend in Angular.

La sintassi di JavaScript è tendenzialmente semplice da apprendere, soprattutto per chi ha già maturato competenze con altri linguaggi. Di conseguenza, dopo una breve introduzione alle istruzioni di base, ci si è potuti concentrare su alcune peculiarità come la modalità di esecuzione asincrona delle operazioni. E’ stato dedicato del tempo per comprendere pro ed i contro di questa caratteristica, analizzando strategie come callback, promise, e async / await per avere un controllo più preciso del flusso di esecuzione di un programma.

Le tappe del percorso

Node.js e npm

Node.js è un framework Open source multipiattaforma per l’esecuzione di codice JavaScript, sviluppato sul motore JavaScript V8 di Google Chrome. In pratica Node.js consente di eseguire codice JavaScript in maniera autonoma rispetto ad un browser, quindi come applicazione isolata o come server. Con l’ausilio di particolari moduli si possono implementare funzionalità specifiche per una moltitudine di casi d’uso. Molti dei suoi moduli base sono scritti in JavaScript, e gli sviluppatori possono scriverne di nuovi.

Per la gestione dei moduli a disposizione si può usare npm (Node Package Manager), ovvero un sistema costituito da un client a linea di comando che si collega ad un database (registry) di pacchetti pubblici o privati. Utilizzando npm è molto semplice mantenere aggiornate le librerie incluse in un progetto, o assicurarsi che siano in uso delle versioni specifiche, ed assicurarsi che siano rispettate eventuali dipendenze fra librerie. Per una panoramica su npm suggeriamo di consultare questa pagina.

Fastify

Fastify è un framework leggero e ad alte prestazioni per l’implementazione di servizi Web, ovvero per creare API che possono essere richiamate da interfacce utente.

La scelta di Fastify per il progetto di gilda sta nel fatto che è già utilizzato in altri progetti aziendali. Avevamo la certezza che fosse un sistema utilizzabile per sistemi in produzione sia per efficienza (in termini di prestazioni), che per affidabilità.

Oltre alla capacità di gestire in maniera eccellente picchi di carico, Fastify consente di utilizzare un’ampia gamma di plugin dando modo di analizzare e sviluppare anche aspetti non secondari di un software come la documentazione (con il plugin per Swagger) e la validazione (con ajv).

AJV

Ajv è un validatore di JSON Schema per Node.js molto efficiente. Viene utilizzato per verificare che le chiamate alle API esposte siano eseguite in maniera corretta, ovvero che ricevono e ritornano dei valori rispondenti allo schema dichiarato. In questo modo la gestione dei casi eccezionali risulta notevolmente semplificata. Come per Fastify, la scelta di questa tecnologia è spiegata dal fatto che è già ampiamente collaudato in progetti aziendali.

Swagger

Swagger è uno strumento che consente di generare la documentazione per API REST in maniera immediata ed interattiva. In pratica, grazie ad una particolare sintassi (YAML, non particolarmente complessa) è possibile far generare a Swagger delle pagine Web con una descrizione delle API e di tutti i relativi parametri (sia di input che output) che si stanno realizzando. In questa maniera è possibile capire, per ogni parametro, se è obbligatorio, vedere un esempio di uso, etc. Da una pagina generata con Swagger è possibile eseguire dei test in loco tramite chiamate da browser  con parametri arbitrari, generando anche la sintassi curl in automatico, e vedendo esattamente ed istantaneamente il risultato ottenuto.
Per una panoramica su Swagger, consigliamo di leggere questa pagina.

Angular

Angular è un framework per l’implementazione di applicazioni Web interattive (single-page application) sviluppato principalmente da Google con il supporto di una comunità internazionale di developer.

Nell’ambito della gilda è stato organizzato un corso, aperto a tutta l’azienda e ad ospiti esterni, tenuto da Gabor Heves. Vi riportiamo di seguito la registrazione dell’evento:

Un progetto di esempio – Gestione di anagrafiche

L’idea è stata di sviluppare un sistema molto semplice per la gestione di anagrafiche, un classico esempio di CRUD (Create, Read, Update, Delete) perché è un elemento ricorrente in qualsiasi progetto software. Oltre a Node è stato utilizzato MongoDB per la memorizzazione persistente dei dati.

Le API del backend

A livello di backend le API REST implementate sono le seguenti:

• GET: recupero della lista anagrafiche disponibili.
• GET: recupero del dettaglio di una specifica anagrafica.
• PUT: sovrascrittura completa di una specifica anagrafica.
• PATCH: modifica di campi specifici di una singola anagrafica.
• DELETE: cancellazione di un’anagrafica.
• POST: inserimento di una nuova anagrafica.

Mediante fastify-swagger (plugin per fastify) è stato possibile generare una documentazione Swagger molto chiara.

L’immagine seguente mostra l’elenco delle API generato tramite Swagger:

Esempio di chiamata di API
Di seguito viene mostrato, a titolo puramente esemplificativo, l’implementazione della chiamata per recuperare tramite GET i dettagli di un’anagrafica:

Schema JSON di una API
Di seguito l’esempio di schema JSON relativo alla API

{
  "schema": {
    "tags": "people",
    "description": "Get element by id",
    "params": {
      "type": "object",
      "properties": {
        "id": {
          "type": "string",
          "format": "uuid",
          "description": "Element id",
          "example": "element-id"
        },
        "name": {
          "type": "string",
          "minLength": 1,
          "description": "Name",
          "example": "Mario"
        },
        "surname": {
          "type": "string",
          "minLength": 1,
          "description": "Surname",
          "example": "Rossi"
        },
        "birthDate": {
          "type": "string",
          "format": "date", 
          "description": "Birth date",
          "example": "1970-08-12"
        },
        "email": {
          "type": "string",
          "format": "email", 
          "description": "Email",
          "example": "mario.rossi@intre.it"
        }
      },
      "response": {
        "200": {
          "type": "object",
          "properties": {
            "id": {
              "type": "string",
              "format": "uuid",
              "description": "Element id",  
              "example": "element-id"
            } 
          }
        }
      }
    }
  }
}

Documentazione di una API
Di seguito viene mostrata la documentazione generata in automatico:

La struttura del frontend

Il front-end è stato implementato con una piccola applicazione Angular che permette di:

• Visualizzare l’elenco delle anagrafiche presenti sul database.
• Vedere il dettaglio di una singola anagrafica.
• Inserire una nuova anagrafica.
• Modificare o cancellare un’anagrafica esistente.

La galleria di immagini successiva contiene screenshot dell’applicazione.

Il seguente codice di esempio è preso dal componente ‘people’ per la gestione di una anagrafica:

Conclusioni e risultati della gilda JS4dummies

Questa gilda è stata molto interessante e istruttiva. Ogni componente ha accresciuto le competenze sugli aspetti del mondo JavaScript su cui si sentiva più in difetto: chi su Node.js, chi su Angular.

E’ stata anche un’interessante esperienza di trasferimento di conoscenze tra programmatori e un utile esercizio per preparare gli interventi e materiali per le lezioni.

Una gilda di questo tipo è un momento di formazione estremamente importante per riuscire ad affrontare al meglio i progetti in cui siamo coinvolti, e quelli futuri.