Avanscoperta
TypeScript e React Workshop per web app flessibili ed evolvibili

TypeScript e React Workshop per web app flessibili ed evolvibili

Come usare TypeScript e React per domare la complessità e facilitare l'evoluzione e la manutenzione

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.

F.A.Q.

Sono previsti requisiti minimi per poter partecipare a questo corso?

Per partecipare al workshop è necessario avere:

  • 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).

Sono un back-end developer: in che modo posso partecipare a questo corso?

Consigliamo la partecipazione al corso a chiunque abbia una conoscenza base di JavaScript. Suggeriamo di seguire le letture consigliate qui sotto su React e TypeScript per poter per seguire il corso con successo.

Come posso prepararmi per partecipare al corso? Letture consigliate? Altro?

React: Se non hai mai visto React, ti consigliamo di seguire questo tutorial ufficiale che spiega i concetti base della libreria https://beta.reactjs.org/learn. Questa introduzione ti sarà sufficiente per seguire il corso.

Linguaggi tipizzati: Se non hai mai visto un linguaggio tipizzato, ti consigliamo questa introduzione: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html, pensata per programmatori JavaScript.

TypeScript: Se hai esperienza con linguaggi tipizzati (Java, C# o simili) ma non hai mai visto TypeScript, ti consigliamo questo articolo https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html

Cosa devo assolutamente avere per potermi iscrivere a questo corso online?

Un computer con un ambiente di sviluppo per creare applicazione web (NodeJS 16+, terminale, editor/IDE). Consigliamo Visual Studio Code come editor, l’ambiente utilizzato dal docente.
Riceverete istruzioni più dettagliate sull’ambiente che userà il docente e sulla configurazione della codebase di partenza su cui si baserà il corso 10-15 giorni prima della data del corso.

N.B.

Il workshop verrà confermato al raggiungimento dei numeri minimi di partecipanti utili alla sua attivazione. Invieremo comunicazione agli iscritti 10-15 giorni prima del workshop.

Last chance! L’ultimo giorno utile per acquistare il biglietto per questo workshop è lunedì 30 ottobre 2023. Se non raggiungiamo i numeri minimi di partecipanti richiesti per attivarlo, il corso non sarà confermato e verrà posticipato… non aspettare all’ultimo per comprare il tuo biglietto!

Prima raggiungiamo i numeri minimi utili alla sua attivazione, prima saremo in grado di confermare il corso e garantirne l’esecuzione.

Info pratiche sul workshop

Lingua: inglese.
Numero massimo di partecipanti: 10.
Strumenti e postazione: il corso si svolgerà online e in diretta, attraverso l’uso di alcuni strumenti digitali. Una volta confermato, riceverai tutti i dettagli su come accedere al corso e interagire con il docente e gli altri partecipanti, e su come prepararti al meglio.
È consigliato che ciascun partecipante segua il corso dalla sua postazione: è preferibile non condividere il laptop e la stanza con altre persone e colleghi per una migliore esperienza da remoto.

Porta il corso in azienda

Contattaci utilizzando il form in fondo alla pagina per chiedere informazioni sull’erogazione in forma privata e personalizzabile di TypeScript e React Workshop per web app flessibili ed evolvibili.

Testimonials

A fantastic hands-on introduction to codecs, discriminated unions, branded types and related concepts. Delivered in a real-world applicable context.Daniel Haarhoff

A fully comprehensive TypeScript and React workshop where you’ll understand the principles and the techniques to develop flexible products that can scale over time.Omar Diop

If you already know TypeScript and React but you’re looking for a boost… this workshop is for you!Matteo Tortelli

Gabriele Petronella

Gabriele è co-founder di buildo, azienda di consulenza software milanese, dove lavora come lead software engineer. È appassionato di architetture front-end e back-end, e ha un’esperienza di lungo corso con React, TypeScript e Scala.

Video

Small Talk

Meetup: Live coding with TypeScript e React

Blog

La nostra intervista con Gabriele Petronella: TypeScript and React for Scalability

Chi siamo, in breve :)

Avanscoperta è un ecosistema in espansione fatto di professionisti con una grande passione per l’apprendimento: ci piace imparare cose nuove e scambiare esperienze e idee, esplorando territori finora inesplorati in ambito software, nella sua accezione più ampia possibile.

Selezioniamo con attenzione gli argomenti più rilevanti e i migliori docenti da tutto il mondo, e diamo particolare importanza alle tecniche di insegnamento, preferendo approcci pratici e coinvolgenti.
Unisciti a noi!

Ti interessa questo corso?

Se hai delle domande specifiche, o vuoi ricevere maggiori informazioni, scrivici. Saremo felici di risponderti!







    NEWSLETTER

    Vuoi ricevere una volta a settimana i nostri contenuti esclusivi su tecnologia, sviluppo software, business e design?

    ISCRIVITI ALLA NEWSLETTER :-)

    Iscriviti alla newsletter!