Abstract
React è una delle tecnologie dominanti per lo sviluppo di applicazioni frontend. TypeScript è un linguaggio che aggiunge static typing a JavaScript.
Entrambe le tecnologie promettono “scalabilità”, ma cosa significa questa parola? Un’applicazione si può definire scalabile se permette di:
- aggiungere nuove funzionalità senza che la complessità aumenti in maniera significativa nel tempo;
- effettuare refactor di funzionalità esistenti senza forti rischi di introdurre bug;
- aggiungere nuove persone al team con facilità.
Creare applicazioni scalabili non è scontato: chi lavora nel campo sa bene quanto la complessità di una codebase ‘esploda’ facilmente e diventi difficilmente gestibile e fortemente dipendente da specifiche persone del team.
React e TypeScript sono ottimi strumenti per raggiungere gli obiettivi di scalabilità e in questo corso con Gabriele Petronella vedremo come usarli insieme possa far sì che 2 + 2 faccia 5, ossia come sfruttare veramente e in modo consapevole la combinazione di queste due tecnologie, e non solo affiancarle in maniera passiva.
Target Audience
Il corso si rivolge a front-end developer o architect con conoscenza professionale di JavaScript che si stanno approcciando all’ecosistema React e TypeScript e che vogliono imparare come sfruttare al meglio le potenzialità del loro utilizzo combinato.
I prerequisiti per il corso sono:
- conoscenza professionale di JavaScript e della programmazione web;
- conoscere le basi di come funziona React;
- sapere cosa sia un linguaggio tipizzato (preferibilmente TypeScript, ma anche Java, Go, C# o simili sono esempi validi).
Programma
In questo corso vogliamo vedere come impostare applicazioni front-end in modo che siano manutenibili nel tempo, siano resistenti ai refactor e sia semplice introdurvi nuove persone nel team.
Durante il corso svilupperemo insieme un’applicazione web che andrà a toccare in maniera realistica i problemi più comuni che possono compromettere la scalabilità.
Per ognuno di questi problemi, illustreremo uno o più approcci con cui gestire la complessità e creeremo insieme delle soluzioni pratiche e funzionanti all’interno dell’applicazione.
Le soluzioni che vedremo saranno molto concrete (per esempio vedremo specifiche librerie), ma per ognuna di esse alterneremo momenti teorici in cui vedremo i principi che vi stanno dietro, in modo che possano essere applicate anche ad altri strumenti o contesti.
Agenda
Sessione 1
- Connessione a una API e visualizzazione dei dati
- Come riconciliare type-safety e dati che arrivano da fonti esterne utilizzando io-ts.
Sessione 2
- Come gestire loading ed errori in React con react-query
- Sum types vs product types
Sessione 3
- Come modificare i dati utilizzando le mutation react-query
- App multi-lingua: come react-i18n-next e TypeScript possono aiutarci a eliminare intere categorie di errori dalle nostre applicazioni
- Come non scordarsi di tradurre qualcosa e mantenere coerenti le traduzioni cross-linguaggio.
Sessione 4
- Lean coffee
- Spazio per affrontare insieme temi come: Routing e navigazione, Pattern matching in TypeScript, Functional programming in TypeScript con fp-ts, Full-stack type-safety.
Cosa impareremo
L’obiettivo principale di questo corso è fornire strumenti e metodologie per progettare applicazioni scalabili in React e TypeScript.
Alla fine del corso avremo imparato sia specifiche tecnologie correlate che possono aiutarci, sia la teoria che sta dietro alle soluzioni in modo da poterla applicare ad altri contesti.
Expect to get your hands dirty
Ci sporcheremo le mani incontrando in prima persona i problemi che andremo a trattare e capendo quindi le ragioni dietro alle soluzioni proposte. Partiremo sempre da problemi realistici, in modo che sia chiaro il vantaggio di un determinato approccio e che non rimanga tutto in astratto.
Ogni partecipante dovrà dotarsi del proprio editor preferito e degli strumenti necessari a implementare l’applicazione. Lavoreremo in gruppi e in coppie.
Perché partecipare
Alla fine di questo corso avrai visto come affrontare i principali problemi di scalabilità di un’applicazione front-end e avrai in mano gli strumenti per progettare applicazioni React e TypeScript che li possano rendere gestibili e controllabili.
Come si svolge
Il corso si svolgerà online e in diretta per un massimo di 10 persone: il docente e tutti i partecipanti saranno in video conferenza e avranno a disposizione una serie di strumenti digitali per interagire tra di loro e lavorare hands-on.
Nonostante la modalità online, il corso mantiene il suo approccio interattivo e partecipativo.
Per questo motivo, è richiesto che tutti i partecipanti abbiano la telecamera accesa per tutta la durata del workshop per una migliore fruizione e comunicazione.
Non sarà un corso passivo, fatto solo di slide e video pre-registrati.
Applicheremo alcuni principi del metodo Training from the back of the room, con prevalenza di attività su lectures.
Alle poche definizioni teoriche si affiancano numerosi esercizi ed attività pratiche.
La condivisione tra i partecipanti ed il supporto del trainer completano il quadro formativo.
