Contattami | Tutti i 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 SPA: 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, 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), router, guardie e lazy loading, HTTP interceptors, approfondimenti su componenti, direttive e depedency injection, strategie di Change Detection, manipolazione DOM e molto altro.
REQUISITI
Conoscere le fondamenta del framework: binding, direttive incluse nel framework, form, dependency injection e comunicazione con REST API, gli argomenti alla base del corso introduttivo Angular Core Concepts

Durata: 16 ore (2gg)
Livello: Intermedio
Versione Angular: 8.x
Versione Typescript: 3.x
Tipologia: Corso in aula


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, ...
Stateful vs Stateless components
Mastering 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
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
Organizzazione progetti e Best Practice
Convenzioni, styleguide, best practice
Strutture progetti scalabili e manutenibili
Component-based approach: organizzare la UI in componenti stateless
Applicazioni modulari e custom ngModule
Core, Shared & Features custom ngModules
Production Build
Deploy
Ottimizzazione performance con le strategie di ChangeDetection onPush
Data Architectures in Angular
Sfruttare la Dependency Injection per gestione di stato e side effect
Gestire lo stato applicativo
Utilizzo dell’immutabilità
Ottimizzazione performance con le strategie di ChangeDetection onPush
Utilizzare Observable e RxJS per gestione e manipolazione dei dati
Panoramica sugli state manager: Redux e NGRX
WORKING WITH DOM
DOM e local template reference variables
@ViewChild and DOM references
DOM nativeElement
Introduzione alle direttive custom: attributes e structural
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

profile-round-gde-1



TRAINER, SPEAKER, DEVELOPER
Fabio Biondi, front-end developer da quasi 20 anni, si occupa di formazione, sviluppo e consulenza in ambito enterprise.
Attualmente focalizzato principalmente su Angular, React, Redux, Fabio ha inoltre un solido background nella creazione di interfacce interattive, componenti e infografiche in HTML Canvas e D3.js.

Membro attivo e fondatore di diverse community italiane, collabora attivamente con molte realtà italiane per l'organizzazione di eventi, master, campus e corsi di specializzazione in cui ha formato centinaia di sviluppatori, studenti e team.

Nel 2018 ha ottenuto la qualifica di Google Developer Expert in Web Technologies e Angular e per diversi anni (2004-2011) è stato Adobe Certified Expert & Instructor (Flex, AIR, Flash PRO, Flash Catalyst).

2019-GDE-Angular-Badge
2019-GDE-Web-Technologies-Badge
RECENSIONIUTENTI

COSA INCLUDE IL CORSO
Corso di formazione on-site
16 ore (2gg)
CheatSheet Angular
PDF formato A4
CheatSheet Javascript ES6
PDF formato A4
Centinaia di slides
Accesso Area Riservata
Esercitazioni post-corso
Accesso Area Riservata
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 persone (10-30).
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
Non sono sicuro che questo corso sia adatto al mio team. Puoi aiutarmi ad orientarmi?
Assolutamente sì. Utilizza il form di contatto e organizzeremo volentieri una skype call o telefonata di confronto
Posso modificare il programma e creare un corso personalizzato ?
Sì. Puoi scegliere gli argomenti che preferisci da questo e altri corsi e possiamo definire un programma ad hoc tarato sulle vostre necessità e skill. 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 12/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?
Vivendo a Trieste, i viaggi per raggiungere le sedi dei corsi sono spesso lunghi, faticosi e non privi di imprevisti.
Per questo motivo il numero di giornate minimo affinché si possa organizzare un corso è due, nel caso la durata del viaggio sia inferiore alle 3 ore. Tre giornate, invece, nel caso di una durata maggiore
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?
È 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)