Insanely Fast Devs – acceleriamo lo sviluppo software
Durante la gilda “Insanely Fast Devs” sono stati messi alla prova alcuni tool e framework che accelerano lo sviluppo scoprendo che è possibile ottenere un valido output in pochissimo tempo.
Il focus è stato su strumenti per lo sviluppo di frontend e backend che dessero un punto di partenza estendibile e production ready.
Obiettivo della gilda
Come suggerisce il nome, l’idea che ha portato alla nascita della gilda è provare alcuni tool e soluzioni che permettano di accelerare lo sviluppo garantendo comunque un risultato di qualità.
Come già spiegato all’Intré camp del 24 Marzo, questa gilda ha prodotto diversi output:
- Sito delle gilde correnti, implementato con Gatsby.js.
- Sito dell’Intré Virtual Camp, implementato con Gatsby.js (frontend) e Parse Server con MongoDB (backend).
- Gioco del tris con Gatsby.js e Firestore.
- Progetti di esempio con Spring Boot.
- Google Sheet e applicazione generata per interagire con i dati del foglio, tramite AppSheet.
Per questa gildonferenza virtuale i portavoce della gilda Damiano Salvi e Francesco Sacchi hanno curato un approfondimento sul progetto del sito utilizzabile durante la versione virtuale del nostro Intré Camp.
Sito Intré Virtual Camp – frontend
Gatsby.js [1] è un generatore di sito statici basato su React. Il concetto di “generatore di siti statici” esiste da un po’ di tempo, Gatsby fa compiere un passo avanti portando a sviluppi simili ai moderno framework frontend. Viene racchiuso il meglio dei più noti tool e framework quali React, webpack [2], react-router [3], GraphQL.
GraphQL [4] è un linguaggio di query per le API che a runtime soddisfa tali query con i dati esistenti. Fornisce una descrizione completa e comprensibile dei dati nella API, offre ai clienti la possibilità di chiedere esattamente ciò di cui hanno bisogno e nient’altro, semplificando lo sviluppo e l’evoluzione delle API.
JSX
Damiano ha mostrato la struttura dei file del progetto, spiegando che all’interno della folder pages troviamo i file Javascript, ognuno dei quali esporta un componente React, corrispondenti alle pagine del sito.
E’ stato utilizzato codice React JSX [5], ovvero un’estensione di Javascript. React riconosce il fatto che la logica di renderizzazione è per sua stessa natura accoppiata con le altre logiche che governano la UI: la gestione degli eventi, il cambiamento dello stato nel tempo, la preparazione dei dati per la visualizzazione.
Invece di separare artificialmente le tecnologie inserendo il codice di markup e la logica in file separati, React separa le responsabilità [6] utilizzando unità debolmente accoppiate chiamate componenti che contengono entrambi. React non obbliga a utilizzare JSX, ma la maggior parte delle persone lo trovano utile come aiuto visuale quando lavorano con la UI all’interno del codice JavaScript.
Damiano ha proseguito nel suo intervento spiegandoci il contenuto del file admin.js: l’uso di diversi componenti React (ad esempio “Proponi gilda”, “Annulla Iscrizione”) e la logica che permette di recuperare dinamicamente alcune sezioni della pagina. Viene sottolineato che ogni modifica richieda la ricompilazione di tutto il progetto e il caricamento sul web server.
GraphQL
Durante il camp abbiamo ognuno votato per una delle gilde proposte.
Come vengono gestite tutte le persone?
In un file .yml sono state salvate le informazioni delle persone che Gatsby gestisce tramite il plugin di GraphQL, uno dei tanti plugin messi a disposizione. Attraverso l’uso di hook e StaticQuery poi questi dati vengono utilizzati attraverso GraphQL. Il server GraphQL è utile sia in fase di sviluppo che in fase di build per preparare i risultati delle query come asset statici da usare nelle pagine del sito. Il che rende tutto molto più leggero e veloce.
Perché Gatsby
Dall’esperienza che hanno avuto per la gilda, Damiano e il resto del team concorda sul fatto che Gatsby sia uno strumento potente. Attraverso l’uso di componenti già pronti come Link, che gestisce la navigazione tra pagine, lo sviluppatore non si deve prendere carico di diversi dettagli implementativi come la gestione del routing. Un altro aspetto interessante è sulla gestione degli asset che vengono precaricati quando si seleziona un altro topic nella pagina. Damiano e Francesco hanno concluso questa parte di gildonferenza accennando a due categorie di plugin per Gatsby, quella del recupero dati e della trasformazione dei dati.
Sito Intré Virtual Camp – backend
Parse Server [7] è uno strumento che fornisce backend “preconfezionati” e che può essere deployato su qualsiasi infrastruttura che può eseguire Node.js. È basato sul framework express e può essere aggiunto ad applicazioni Web esistenti o eseguito da solo.
Francesco ci ha mostrato il file index.js per mostrarci come in poche righe di codice sia possibile ottenere un’istanza di Parse Server, ovvero un ambiente CRUD composto da REST di base che funzionano man mano che il backend viene popolato da nuovi oggetti.
Parse LiveQuery
Parse.Query è uno dei concetti chiave di Parse. Consente di recuperare Parse.Objects specificando alcune condizioni, facilitando lo sviluppo di app come una dashboard oppure una to-do list. Tuttavia, Parse.Query si basa su un modello pull, che non è adatto per le app che richiedono supporto real-time.
Supponiamo che si stia sviluppando una app che consente a più utenti di accedere e modificare lo stesso file contemporaneamente (come la sezione Scegli del sito del camp virtuale). Parse.Query non sarebbe uno strumento ideale poiché non è possibile sapere quando eseguire una query dal server per ottenere gli aggiornamenti. Per risolvere questo problema, viene in aiuto Parse LiveQuery. Questo strumento consente di sottoscriversi ad una Parse.Query e ricevere feedback dal server client ogni volta che un oggetto Parse.Object, che matcha ad una Parse.Query, viene creato o aggiornato, in tempo reale.
Gestione registrazione e autenticazione utenti
Francesco ha proseguito spiegandoci altre direttive di Parse, in particolare Parse.User utili per la gestione della pagina di Login del sito (utilizzata dagli amministratori). Grazie alle direttive Parse.User.logIn(…), Parse.User.signUp(…) e Parse.User.logOut(…) è stato possibile implementare senza troppi sforzi la registrazione e l’autenticazione degli utenti.
Cloud Code
Per app sempre più complesse, sarebbe comodo avere la logica, o parte di essa, non in esecuzione sul dispositivo. Cloud Code [8] rende possibile tutto ciò. Basato sullo facile da usare perché si basa sullo stesso Parse Javscript SDK che alimenta migliaia di app, è semplice da usare. L’unica differenza è che questo codice viene eseguito nel Parse Server anziché sul dispositivo mobile. Ogni volta che si aggiorna il proprio Cloud Code, questo diventa immediatamente disponibile per tutti gli ambienti mobile. Non si deve aspettare una nuova versione dell’applicazione. Ciò consente di modificare il comportamento delle app al volo e di aggiungere nuove funzionalità più rapidamente.
Francesco ha spiegato alcune direttive quali Parse.Cloud.define(…) usato per definire i permessi degli utenti nel sito, e altre funzionalità per la gestione dei file e GraphQL.