Contattami | Tutti i corsi

ANGULAR MASTERING UI

Approfondimento sulla creazione di componenti & UIKit, dependency injection, custom pipes, attribute & structural directives

angular-ui



INTRODUZIONE
Tre giornate di formazione in cui si analizzano metodologie, scenari e strumenti inclusi nel framework Angular, spesso poco noti, per padroneggiare la creazione di componenti custom, sfruttare al massimo il motore di dependency injection, creare custom pipes, attribute & structural direttive, custom ngModules e una breve introduzione alla creazione di unit test.
OBIETTIVO DEL CORSO
Approfondire diversi costrutti e API del framework, solitamente poco utilizzati, allo scopo di sfruttarne tutto il potenziale, creando codice riutilizzabile, testabile ed efficiente.
REQUISITI
Conoscere le fondamenta del framework e/o aver partecipato ai corsi Angular Core Concepts e Mastering Angular. E’ preferibile aver già creato in precedenza progetti Angular per trarre il massimo beneficio dal corso e apprezzarne i contenuti.

Durata: 24 ore (3gg)
Livello: Avanzato
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.

In questo corso analizzeremo tecniche, metodologie e API del framework Angular, spesso poco documentate, per lo sviluppo di componenti, direttive, pipes e un'utilizzo avanzato del motore di dependency injection.

Per questo motivo, questo corso è infatti apprezzato soprattutto da coloro che già utilizzano Angular da un po' di tempo ma desiderano un approfondimento su 4 dei pilastri fondamentli del framework:

• il primo è la creazione di componenti custom: descriverò infatti in dettaglio ogni fase del ciclo di vita, useremo le QueryList tramite decoratori ViewChildren e ContentChildren, creremo istanze di componenti a runtime, vi mostrerò come sfruttare strategie di change detection per ottimizzare le performance, animations, integrazione librerie terze parti e altro ancora creando componenti come accordion, chart, google map, componenti di layout come griglie, collapsable panels e organizzandoli in moduli custom.

• creeremo direttive custom, sia attribute che structural (ovvero direttive che hanno l'asterisco come prefisso), per la manipolazione del DOM, la gestione della sicurezza, applicare styling, automatizzare processi e gestire eventi. Ho notato che la direttiva custom è uno degli strumenti meno utilizzati e sottovalutati dagli sviluppatori Angular ma se ci pensate, la maggior parte delle funzionalità del framework per la gestione della UI sono basate su questo costrutto, basti pensare a ngIf, ngFor, ngClass, routerLink e così via.

• custom pipes: formattare dati, filtrare elenchi con ngFor, creare pipe sincrone, asincrone, pure e impure.

• ampio spazio sarà dato anche al motore di dependency injection, un altro argomento spesso sottovalutato e la cui padronanza vi permetterà, non solo di evitare diversi bug o comportamenti anomali generati soprattutto quando si utilizzano moduli custom e lazy loading, ma anche di sfruttare il motore di injection per creare codice più scalabile e spesso più conciso. E' quindi fondamentale comprendere come funziona la gerarchia degli injector, comprendere l'utilizzo di InjectionToken, useClass, useExisting, useFactory, l'utilizzo di forRoot() (usatissimo in quasi tutte le librerie Angular di terze parti che già integrate nella vostra app).

Creeremo e pubblicheremo inoltre una libreria di componenti e servizi su npm, allo scopo di creare uno uikit di funzionalità riutilizzabili su più progetti, scriveremo alcuni unit test, organizzeremo le funzionalità in moduli e molto altro.

Gli argomenti sono tantissimi e vi consiglio di dare un'occhiata al programma dettagliato.
PROGRAMMA
Custom Components
@Input, @Output e Content (multiple) Projection
Component-based approchat e 1-way data flow architectures
stateless vs stateful components
Ciclo di vita dei componenti
Componenti riutilizzabili
Componenti compositi
Comunicazione tra componenti
Components Techniques
Local CSS e ViewEncapsulation
Gestione errori e messaggi eccezioni personalizzati
"@ViewChildren" vs "@ContentChildren" decorator
Creare istanze di componenti a runtime
"ViewContainerRef" e "ComponentFactoryResolver"
Utilizzo dell’immutabilità
Ottimizzazione performance e strategie di ChangeDetection
Component providers e approfondimento dependency injection
Dependency Injection, configurazione provider nei componenti
Componenti riutilizzabili per UIKit
Grid e layout components
Typography, List, TabBar, Cards
Collapsable, Side Panel, Divider e molto altro
Accordion e componenti “compositi”
Integrazione 3rd party libraries / types
Mappe: integrazione Google Map API
Chart riutilizzabili: integrazione ChartJS
Creare custom modules per l'organizzazione dei componenti
Generare e pubblicare lo UIKit su NPM
Generazione librarie di componenti e servizi riutilizzabili
Pubblicazione della libreria su npm
Utilizzo e aggiornamento della libreria
Analisi del bundle size e composizione della libreria
Generazione automatica della documentazione
Documentation Coverage
Introduzione e integrazione Unit Test
Unit Test vs E2E
Introduzione a Jasmine
Introduzione e configurazione Karma
Utilizzo di TestBed
Testing Components
Testing Services
Mocking dependencies
Spies
Mastering Dependency Injection
Creare servizi e routine riutilizzabili
Condividere dati tra componenti e views
@Injectable e providedIn
Gerarchia degli injectors
@Inject and useValue
InjectionToken
useClass vs useFactory vs useExisting
Gestione providers in moduli e componenti
utilizzo di forRoot() per i moduli “shared”
environments & dependency injection: development e production
Custom Pipes
Built-in formatter: "date", "number", "json"
Cicli su oggetti con "ngFor" e "keyvalue" pipe
"ngIf...as" & "async" pipe
Creazione custom pipes
Pure vs Impure Pipes
Pipe di conversione di formato
Creare Pipe per filtrare elenchi di dati tramite "ngFor"
Pipe asincrone e richieste HTTP
Custom pipes per generare immagini
Custom pipes e 3rd party REST API
Attribute Custom Directives
Creare direttive per la manipolazione del DOM
Manipolazione DOM con "@HostBinding" decorator
Gestione eventi con "@HostListener" decorator
Utilizzare l’"@Input" decorator come setter e getter
Structural directives VS attribute directives
Il ciclo di vita di una direttiva
Creare direttive “non visuali”
Gestione layout responsive con le direttive
Integrazione 3rd party API
Animazioni CSS
Creare custom Form validator per i template-driven forms
Structural Custom Directives
Direttive strutturali: utilizzo del simbolo “asterisk” *
Utilizzo delle direttive per gestione sicurezza e ruoli utenti
DOM: ElementRef vs TemplateRef
Usare le direttive per creare istanze a runtime di components
"ViewContainerRef", "ComponentResolveFactory", "createEmbeddedView"
Creare custom *repeater (alternativa a *ngFor)
Sfruttare le direttive per gestire autenticazione e ruolo utenti
Utilizzare RxJS e Observable all’interno di direttive
MODALITÀ LEZIONI
TEORIA
angular-ui-mode1
Approfondimento su API, tecniche e funzionalità del framework. Decine di slide, diagrammi e materiale esclusivo incluso nel corso
LIVE CODING
angular-ui-mode2
La maggior parte degli argomenti sono esposti tramite sessioni di live coding, affrontando scenari reali e creando codice riutilizzabile
SOURCE CODE
angular-ui-mode3
Al termine del corso avrete a disposizione decine di componenti, direttive, pipes, moduli e tecniche da riutilizzare in applicazioni reali



ESEMPIO LEZIONE
In questo video la creazione di un custom pipe:

Formattare dati con i pipe forniti dal framework
Creazione di un custom pipe
Utilizzare il decoratore @Pipe e l'interfaccia PipeTrasform
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
24 ore (3gg)
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)