Blog | Contattami | Elenco corsi

MASTERING ANGULAR

Due giornate di approfondimento sul framework per la creazione di progetti modulari, scalabili e performanti, applicando pattern e best practice

angular-mastering



INTRODUZIONE
Acquisire il know-how necessario per la creazione di progetti Angular di una certa complessità applicando pattern, best practice e affrontando diversi aspetti fondamentali nella creazione di Single Page Application: gestire lo stato applicativo, autenticazione JWT e sicurezza, ottimizzazione performance e bundle-size, creare nested routes e applicare strategie di lazy loading, creazione codice scalabile ed efficiente, organizzare e strutturare l'applicazione in componenti e moduli.
OBIETTIVO DEL CORSO
Approfondimento sul framework, utilizzo di pattern e best practice:
approccio component-based; applicazioni modulari tramite la creazione di custom ngModules (core, features, shared); approfondimento su router, guardie, lazy loading e nested routes; gestire l'intero processo di autenticazione; approfondimenti su componenti, direttive e depedency injection; ottimizzazione performane; manipolazione DOM e molto altro.
REQUISITI
Conoscere le fondamenta del framework: binding, direttive incluse nel framework, form, dependency injection e comunicazione con REST API, ovvero gli argomenti alla base del corso introduttivo Angular Core Concepts

Durata: 16 ore
Livello: Intermedio
Versione Angular: 14.x
Versione Typescript: 4.x+
Tipologia: in aula o da remoto


TRASCRIZIONE DEL VIDEO
Ciao, mi chiamo Fabio Biondi, sono Google Developer Expert in web technologies e Angular.

Mastering Angular è in assoluto uno dei corsi più apprezzati da quando mi occupo di formazione. Il motivo principale del suo successo è che questo corso permette agli sviluppatori che già utilizzano Angular di fare un salto di qualità notevole nella creazione di codice manutenibile, scalabile e più performante attraverso l'utilizzo di best practice, pattern e con molti approfondimenti sul framework.

Durante la prima parte del corso darò ampio spazio alla creazione di componenti analizzando funzionalità come input, output, content projection e LifeCycle, mettendo in pratica i concetti tramite la creazione diversi componenti riutilizzabili come Collapsable Panel, TabBar, Mappe e molto altro. Gli stessi concetti saranno poi sfruttati per organizzare i template HTML delle view tramite un approccio component-based e creando applicazioni quasi totalmente stateless.

Evitare l'abuso della dependency injection, organizzare il codice per la gestione di side effect e stato applicativo in un unico punto piuttosto che disperderlo tra vari componenti e organizzare successivamente l'applicazione in custom modules, ovvero collezioni di componenti, servizi, direttive e pipe, non solo porterà vantaggi in termini di performance, soprattutto se in connubio con l'utilizzo del concetto di immutabilità e alcune strategie di change detection per l'ottimizzazione dei rendering dei componenti, ma renderà il codice più leggibile, manutenibile, scalabile e permetterà in futuro di migrare facilmente a state manager più sofisticati come Redux e NGRX, senza dover stravolgere l'attuale applicazione o effettuare complesse e rischiose operazioni di refactoring.

Un approccio modulare, suddividendo l'applicazione in moduli core, shared e features, semplificherà inoltre sia l'integrazione del lazy loading, per evitare che il bundle generato per la distribuzione abbia una dimensione troppo elevata, sia un utilizzo del router più avanzato, organizzando le viste (dette features usando terminologia angular) in sotto viste, creando router-outlet nidificati, proteggendo intere sezioni e sotto-sezioni da accessi non desiderati e agevolerà l'integrazione di state manager come NGRX che integrano funzionalità dedicate

Ampio spazio sarà dato inoltre all'aspetto sicurezza, affrontando passo-passo tutti gli aspetti legati al processo di autenticazione: login, gestione token, interceptor, protezione view attraverso le guardie del router, processi di autologin, gestione ruoli e molto altro.

Per apprezzare il contenuto di questo corso è preferibile che i partecipanti abbiano già utilizzato Angular per un po' di tempo o si siano iscritti in precedenza al corso Angular Core Concepts
PROGRAMMA
Custom Components
Input properties
Output Event emitters
Content Projection
Sibling Components communication
Comunicazione tra componenti "padre" e "figli"
Componenti riutilizzabili: Collapsable, Tabbar, Map, ...
Component-based approach: organizzare la UI in componenti stateless
Stateful vs Stateless components
Approfondimenti sul Router
API, componenti e direttive fornite dal modulo router
Creare applicazioni multiview
Creare custom modules per le regole di routing
Gestire route con parametri
Router e Lazy Loading
Children Routes
Nested Routes e multipli router-outlet
Router Events
Manipolazione DOM in Angular
DOM e local template reference variables
@ViewChild and DOM references
Il servizio ElementRef e nativeElement
Introduzione: direttive custom
Introduzione: creazione custom Pipe
Organizzazione modulare dei progetti
Strutture progetti scalabili e manutenibili
Creazione applicazioni modulari e custom ngModule
Applicazioni modulari e custom ngModule
Differenze tra moduli Core, Shared & Features
Domain vs Widget vs Service Modules
Build & Deploy
Convenzioni, styleguide, best practice
Data Architectures in Angular
State management con servizi e dependency injection
Gestione Stato e Side Effect
Immutabilità? Perchè è utile e quando?
Ottimizzazione performance con le strategie di ChangeDetection onPush
Bad (e Good) Practices nell'utilizzo della Dependency Injection
Sicurezza e Authentication
Autenticazione con JWT
Procedure di Login e Logout
Utilizzo REST API protette da token
Creare HTTP “interceptors”
Gestione errori HTTP
CORS, preflight e OPTIONS
Router Guards: protezione routes
Local Storage & Auto-login
Creare direttive custom per la gestione dei ruoli utente
MODALITÀ LEZIONI
TEORIA
angular-mastering-mode1
Approfondimento su API, tecniche e funzionalità del framework. Decine di slide, diagrammi e materiale esclusivo incluso nel corso
LIVE CODING
angular-mastering-mode2
La maggior parte degli argomenti sono esposti tramite sessioni di live coding, affrontando scenari reali e creando codice riutilizzabile
REAL APPS
angular-mastering-mode3
I concetti descritti durante il corso saranno messi in pratica tramite la realizzazione di una Single Page Application



ESEMPIO LEZIONE
In questa lezione:

Utilizzo della CLI (Command Line Interface)
Generazione di componenti e moduli custom
Approccio component-based
Organizzazione progetti modulari
Creazione di “features” custom modules
ISTRUTTORE:
FABIO BIONDI

codemotion-2019-circle



TRAINER, SPEAKER, DEVELOPER
Mi chiamo Fabio Biondi, sono Microsoft MVP e Google Developer Expert in Angular e Web Technologies, e ho più di 15 anni di esperienza nella creazione di applicazioni web enterprise.

Sviluppatore, Istruttore e Speaker in numerosi eventi. Ho fondato e gestisco diverse community italiane che si occupano di Javascript, Angular, React e Opportunità per gli sviluppatori (più di 30000 membri).

Attualmente mi occupo di formazione e mentoring su Javascript / Typescript, Angular, React, Redux, NGRX, RxJS, Next e, recentemente, Lit e Web Components.
Mi occupo, inoltre, di creazione contenuti tecnici su YouTube (in italiano e in inglese) e sono partner su Twitch in cui mi trovate spesso in streaming (con ospiti, sessioni di formazione, live coding e studio di nuove tecnologie).
CERTIFICATIONI & AWARDS

  • Dal 2019: Microsoft MVP
  • Dal 2018: Google Developer Expert in Web Technologies e Angular
  • 2004-2011: Adobe Certified Expert & Instructor (Flex, AIR, Flash).

  • Awards Google & Microsoft
    RECENSIONIUTENTI

    COSA INCLUDE IL CORSO
    Corso di formazione on-site
    16 ore
    CheatSheet Angular
    PDF formato A4
    CheatSheet Javascript ES6
    PDF formato A4
    Centinaia di slides
    Accesso Area Studenti
    Esercitazioni post-corso
    Accesso Area Studenti
    Codice Sorgente
    Incluso
    Attestato di partecipazione
    PDF formato A4


    FAQ
    A chi è rivolto?
    Principalmente a team e società che intendono organizzare corsi di formazione per un ristretto gruppo di partecipanti (da 3 a 30 persone).
    Tuttavia, organizzo spesso corsi ed eventi aperti al pubblico in cui chiunque può partecipare (freelance, appassionati, dipendenti). Ti invito a seguirmi sui vari canali social o di iscriverti alla newsletter per rimanere aggiornato sulle iniziative
    Non sono sicuro che questo corso sia adatto al mio team. Puoi aiutarmi ad orientarmi?
    Assolutamente sì. Utilizza il form di contatto per organizzare una riunione Skype / telefono
    Posso modificare il programma e creare un corso personalizzato ?
    Sì. Puoi scegliere gli argomenti che preferisci da questo e altri corsi e possiamo stilare insieme un programma personalizzato sulla base dei vostri obiettivi e del background dei partecipanti. Per i corsi più avanzati, solitamente, organizzo una skype call con i partecipanti in modo da valutare il grado di preparazione attraverso un'intervista e/o una sessione di code review (gratuita, della durata di 30/60 minuti)
    Dove può essere erogato il corso?
    • In Friuli, Ronchi dei Legionari (Gorizia) - Max 14 posti con seduta e tavolo oppure 80 posti solo seduta.
    • On-Site, presso la vostra sede, in tutta Italia
    Quanto costa?
    Richiedi le mie tariffe attraverso il form di contatto specificando indirizzo in cui erogare il corso, il periodo e la durata
    C'è un quantitativo minimo di giornate da acquistare?
    Almeno 2 giornate se la durata del viaggio (da Trieste, la provincia in cui risiedo) è inferiore alle 4 ore.
    Tre giornate, invece, nel caso di una durata superiore.
    Il corso prevede esercitazioni per gli studenti?
    La scelta è vostra. È possibile effettuare 1 o 2 ore di esercitazioni al giorno oppure lasciare spazio agli argomenti del corso ed approfondimenti
    Devo portare il mio laptop?
    Lo consiglio ma non è indispensabile. È necessario solo se intendete configurare l'ambiente di lavoro o effettuare esercitazioni. Un blocco appunti e una penna sono più che sufficienti dato che, dopo il corso, avrete comunque accesso al materiale tramite un'area riservata (slide, esercitazioni, source code)