Lezione 1Gestione e validazione dei form (controllati vs non controllati, librerie: Formik, React Hook Form, VeeValidate)Implementate una gestione robusta dei form e validazione. Confrontate input controllati e non controllati, usate librerie come Formik, React Hook Form e VeeValidate, e progettate validazione, messaggi di errore e flussi di invio per form complessi.
Strategie input controllati vs non controllatiFormik e React Hook Form in praticaVeeValidate e pattern form VueRegole validazione sincrone e asincroneMessaggi errore, UX e accessibilitàLezione 2Librerie componenti UI e pratiche accessibilità (Tailwind, Material, Chakra, ruoli ARIA, navigazione tastiera)Imparate a usare librerie UI moderne mantenendo forte accessibilità. Esplorate Tailwind, Material UI e Chakra, applicate ruoli ARIA, gestione focus e pattern navigazione tastiera per interfacce inclusive e pronte per produzione.
Sistemi design con Tailwind e classi utilityPattern componenti Material UI e ChakraHTML semantico e strategie ruoli ARIAGestione focus e navigazione tastieraContrasto colori, temi e motion ridottoLezione 3Scelta framework frontend e giustificazione (React, Vue, Svelte) e compromessi ecosistemaValutate e giustificate la scelta del framework frontend. Confrontate architetture React, Vue e Svelte, maturità ecosistema, performance e curve di apprendimento per selezionare e difendere la migliore opzione per ogni contesto progetto.
Concetti core React, Vue e SvelteMaturità ecosistema e supporto communityCompromessi performance e dimensione bundleIntegrazione TypeScript e toolingFramework decisione per progetti realiLezione 4Build, bundling e ottimizzazione: Webpack/Vite/Rollup, code splitting, tree-shaking, gestione assetPadroneggiate tooling build moderno per frontend performanti. Confrontate Webpack, Vite e Rollup, configurate code splitting e tree-shaking, ottimizzate gestione asset, caching e source map per bundle produzione veloci e manutenibili.
Confronto setup Webpack, Vite e RollupCode splitting e import dinamiciTree-shaking ed eliminazione dead codeOttimizzazione immagini, font e asset staticiStrategie caching, hash e source mapLezione 5Test client-side: unit testing componenti, test integrazione, scelte librerie testing ed esempiSviluppate una strategia testing client-side robusta. Imparate unit testing per componenti, test integrazione su route e API, e come scegliere tra Jest, Vitest, Cypress e Testing Library per suite test affidabili e manutenibili.
Unit testing componenti UI in isolamentoTest integrazione per flussi e routingUso Testing Library per test user-centricScelta Jest, Vitest, Cypress o PlaywrightMocking API e gestione test flakyLezione 6Configurazione dev locale e ambiente: variabili env, file .env, feature flags per frontendConfigurate ambienti frontend affidabili per setup locali e cloud. Imparate a gestire variabili ambiente, file .env, iniezione build-time e feature flags per attivare/disattivare funzionalità tra sviluppo, staging e produzione in sicurezza.
Gestione file .env e variabili build-timeSeparazione config dev, staging e produzioneConfigurazione runtime e sicurezza ambienteImplementazione feature flags frontendGestione segreti e trappole configurazioneLezione 7Struttura progetto e convenzioni cartelle per single-page app (componenti, pagine, servizi, hook)Progettate strutture progetto scalabili per single-page app. Imparate convenzioni cartelle per componenti, pagine, servizi e hook, e come organizzare utility condivise, test e stili per mantenere codebase grandi discoveribili e manutenibili.
Organizzazione componenti, pagine e layoutServizi, hook e layer accesso datiUtility condivise, tipi e costantiStrutturazione test e file storyRefactoring verso confini modulariLezione 8Pattern integrazione API: client REST vs GraphQL, gestione errori, retry richieste, timeoutImplementate pattern integrazione API robusti sul client. Confrontate client REST e GraphQL, configurate Axios o Fetch, gestite errori e retry, progettate timeout, cancellazione e normalizzazione per layer fetching dati resilienti.
Configurazione client REST con Axios o FetchUso client GraphQL come Apollo o URQLGestione errori globali e messaggistica utenteRetry richieste, backoff e timeoutCancellazione, abort controller e cachingLezione 9Autenticazione frontend: storage token, flussi refresh, approcci cookie sicuriCapite pattern autenticazione frontend sicuri. Confrontate localStorage, sessionStorage e cookie, progettate flussi refresh token, implementate cookie HttpOnly, difese CSRF e strategie logout che proteggono utenti in applicazioni reali.
Storage token: localStorage vs cookieImplementazione flussi refresh token sicuriCookie HttpOnly e protezione CSRFGestione logout, revoca e rotazioneGestione errori auth e feedback utenteLezione 10Opzioni e pattern gestione stato (stato componente locale, Context, Redux/Pinia/MobX, React Query)Confrontate opzioni gestione stato per frontend complessi. Esplorate stato locale, Context, Redux, Pinia, MobX e React Query, imparate pattern per caching, normalizzazione e evitare re-render inutili in applicazioni grandi.
Stato componente locale e pattern liftingContext API per concern cross-cuttingDesign store Redux, Pinia e MobXStato server con React Query o SWROttimizzazione performance e pattern selettoriLezione 11Routing e route protette: routing client-side, guard route, lazy loadingCostruite routing client-side affidabile con route protette. Imparate configurazione route, route annidate, lazy loading e guard route che impongono autenticazione e autorizzazione mantenendo navigazione veloce e accessibile.
Configurazione router e route client-sideRoute annidate e gerarchie layoutImplementazione lazy loading e code splittingGuard route basati su auth e redirectGestione pagine 404 e route fallback
