Tirocinio scolastico 2021 in Dreamonkey con A. C.

[nota del tutor]: A. ha trascorso con noi il suo tirocinio scolastico, durante il quale si è cimentato con alcune esercitazioni inerenti i temi informatici che riteniamo più significativi nel nostro ambito operativo. Abbiamo seguito il suo percorso ogni giorno, coltivando un mindset guidato dalle best practices e fornendogli nuove risorse per arricchire il suo bagaglio tecnico. In questo articolo gli abbiamo dato spazio per raccontare l’esperienza con le sue parole.

Poco più di una settimana dall’inizio prefissato dello stage, mi sono accordato con Federico, l’amministratore delegato, e sono entrato negli uffici dell’azienda per la prima volta.
Il motivo principale della visita era la compilazione dei moduli relativi al PCTO: grazie a questa occasione, ho potuto fare un tour del quartier generale.

Più avanti mi è stata introdotta l’agenda descrittiva del percorso, che conteneva letture, prove pratiche e didattiche su tooling, basi della programmazione e linguaggi/framework; per finire un progetto con Quasar Framework.

Primi giorni (studio intensivo)

Durante i primi giorni di stage, ho ricevuto una calorosa accoglienza da parte di tutti i membri dell’azienda e mi è stato assegnato come tutor Alessandro, sviluppatore di applicazioni web. Come già anticipato durante la prima visita, il lavoro è iniziato con l’introduzione ai primi concetti, generali, che mi sarebbero serviti per i passi successivi del percorso.

Come prima fase, Alessandro mi ha introdotto i seguenti argomenti:

• Package managers
• Node.js
• Programmazione asincrona
• Integrated Development Environments (IDE)

Una volta studiati questi argomenti attraverso ricerche sulle documentazioni ufficiali e le pagine relative su Wikipedia, mi sono confrontato con Alessandro. Dopo il confronto mi ha corretto in caso di errori oppure ha integrato alcune informazioni mancanti dal mio studio autonomo.

Questo processo di introduzione-studio-integrazione si è poi ripetuto per tutti gli altri argomenti assegnatimi successivamente:

• Compilazione
• WebPack, SnowPack, Rollup, Parcel e Vite.js
• Traspilazione e Linting
• Error-prone practices e Best practices
• Automatic formatting e automatic testing
• Test Driven Development (TDD)
• Git
• GitFlow

Dopo aver introdotto-studiato-integrato gli ultimi due argomenti, ho fatto la mia prima esercitazione pratica su Git, grazie al sito Learn Git Branching; dopodiché ho concluso la fase di studio, con questi argomenti:

• Continuous integration e continuous delivery
• Search Engine Optimization (SEO)
• Cordova e Capacitor
• SPA, PWA, SSR

Primo progetto (programmazione web)

Una volta terminato il lungo percorso di studio delle basi, ho concordato assieme ad Alessandro lo schema base del progetto che successivamente avrei iniziato a realizzare in HTML, CSS e JavaScript.

Nei giorni seguenti ho sviluppato, corretto, testato e finito il progetto HTML/CSS/JS, sotto la guida di Alessandro, che mi ha aiutato in caso mi fossi bloccato e corretto in caso di errori e/o mancata mia osservazione delle best practices.

Implementazione Custom Events e Web Components

Una volta terminato il progetto in HTML/CSS/JS con le conoscenze acquisite a scuola, è venuto il tempo di introdurre nuove tecnologie: l’uso di Custom Events e Web Components; dopo il solito processo introduttivo, ho cominciato ad implementare queste tecnologie nel mio codice JavaScript, incrementando così la complessità del progetto.

L’utilizzo dei Components mi ha introdotto ai concetti di Shadow-DOM e trasmissione di dati tra Components.
In particolare il modo di trasferire dati tra vari Components fratelli (allo stesso livello gerarchico) richiede un processo abbastanza complesso:

• Emissione di un evento contenente i dati da trasmettere da parte del Component emittente
• Ascolto e lettura dei dati dell’evento da parte del padre dei Components
• Assegnazione da parte del padre di varie proprietà (nome e valore), corrispondenti ai dati da trasmettere, al Component ricevente

Implementazione Vue.js (programmazione web con framework)

Al termine dell’implementazione dei Custom Events e dei Components è invece iniziata una nuova fase di studio, stavolta riguardo all’utilizzo del framework Vue.js, decisamente più ricco e complesso di tutto ciò che avevo fatto sino a quel momento; grazie all’aiuto di Alessandro ho imparato molti dei concetti alla base della versione 2 del framework, tra cui il ruolo fondamentale dei Components di Vue, più complessi di quelli del semplice JS.

Una volta studiato il funzionamento di methods, props, watch e computed (parti fondamentali della logica dei Components di Vue 2), mi sono messo al lavoro e ho iniziato a ricostruire il progetto.

Un altro concetto introdotto con Vue è la Single Page Application: questa modalità di visualizzazione di applicazioni web utilizza il Routing per mostrare varie views (vedute) senza ricaricare la pagina, risparmiando così memoria per il deploy (la costruzione effettiva del sito complessivo) del progetto completo: c’è un solo “index.html” più dei bundle (insiemi di fogli) CSS e JS.

Implementazione SCSS e TypeScript (refactoring)

Durante il refactoring con Vue 2 nel mio progetto, mi è stato anche introdotto SCSS, un linguaggio preprocessore di CSS: il suo scopo è semplificare la stesura dei fogli di stile, attraverso controllo di flusso e variabili.

L’aggiunta delle configurazioni del progetto per mettere anche questo al suo interno ha però portato a numerosi errori; dopo un giorno di troubleshooting, io, Alessandro e Francesco (Full Stack Developer e socio) siamo riusciti a creare un progetto che supportava l’utilizzo del preprocessore.

Nello stesso progetto era inoltre presente l’integrazione di TypeScript, un superset di JavaScript (che già conoscevo) che introduce la tipizzazione statica. Con queste nuove implementazioni ho ricostruito il progetto, sfruttando le feature appena acquisite, e lo ho terminato.

Ricostruzione con Quasar (programmazione web con framework)

Alla conclusione del progetto in Vue 2 era finalmente arrivato il momento dell’utilizzo di Quasar, un framework basato sulla versione 3 di Vue; questo framework è quello utilizzato dai membri dell’azienda, per i loro progetti correnti.

Le novità principali erano:

• La Composition API, il nuovo modo di costruire i components di Vue 3
• I QComponents, elementi forniti da Quasar, che rispettano le linee guida del Material Design (Cos’è il Material Design di Google?) e sono compresi di API per l’interfacciamento

Una volta studiati questi nuovi elementi, ho ricostruito, migliorato, testato, perfezionato il mio progetto, sempre con l’aiuto del mio tutor.

Alla fine del progetto con Quasar, tutto ciò che mi rimaneva da fare è scrivere questo articolo per il blog dell’azienda, ed infatti eccomi qua…

Lo stage in Dreamonkey è stato fantastico; tutti sono sempre stati amichevoli, gentili, disponibili con me, ed è stato enormemente formativo, sia dal punto di vista delle mie conoscenze e abilità tecniche, sia dal punto di vista delle relazioni e meccaniche del mondo del lavoro.