Skip to content

Latest commit

 

History

History
287 lines (195 loc) · 16.2 KB

traccia.md

File metadata and controls

287 lines (195 loc) · 16.2 KB
theme
white

XE ONE DAY 20/05/2023

Modernize Angular App

Daniele Morosinotto @dmorosinotto

Repo: https://github.com/dmorosinotto/XE_Modernize_Angular

--

AGENDA

INTRO: I vari annunci e rilasci di NG FEATURE PRINCIPALE DI CUI VOGLIO PARLARE: - Standalone Component -(SCAM)-> optional NgModule - Migrazione ng update + ng g @angular/core:standalone (con qualche problema: UntypedForms / StandaloneAPI provideHttp OK, ma NON migra a provideRoute + qualche FIX AppComponent/SCAM exp) - Standalone API = ottimizzazione (Tree Shaking): + startup bootstrapApplication con providers + provideHttp + withX + fnInterceptor + provideRoute (+ useX) --> Router nuovi pattern LazyLoad + fnGuard + providers su Ruote - inject function: nuova DI ctor->field + infer INJTOKEN + helpers injectParam(name) + attenzione al runInContext! OPINIONI PERSONALI SU ALTRE FEATURES: - Elefant in the room: Signals cosa sono adesso e futuro?!.. - Accenni a: Strict ReactiveForms (gif intellisence troppo tardi) / directiveHosts (composition vs inherit) / imgngSrc - Novità utili: @Input({required}) / routerParams withComponentInputBinding / DestroyRef / takeUntilDestoryed EXTRA: Utilizzo modern JS tools esbuild + Vite CONCLUSIONI:

  • Q & A
  • Riferimenti

INTRO - TRACCIA / IDEA

IDEA: Angular stagnante da NG v9 (Feb 2020) -> v13 (Nov 2021) 2/3 anni fermi su IVY Poi Apr 2022 Alex (cambio Team Lead) inizio parlare di Standalone -> che ha portato poi a fine 2022 al rilascio v14 (preview standalone) e subito dopo v15 RILASCIO novità standalone / inject / Optional NgModel SPECULAZIONI SUL FUTURO (Magari per le conclusioni...) Futuro v16 Signal (grande cambio ma non son sicuro perchè Rx molto usato&odiato) stanno seguendo stessi passi: Apr 2023 Alex parla dei concetti di Signal -> RFC pubblica v16 Mag 2023 preview -> entro fine anno 2023-2024 v17 (forse introduzione signal component)/v18+ rilascio completo Signal (SUPPOSIZIONI ma sarà lungo tempo x adozione perchè cambia radicale, pattern non ancora ben chiari in più difficile migrare codebase da Rx->Signal, magari viene comodo x sostiture subscribtion |async usando toSignal, cmq è una primitiva e forse sarà utile "piu utile" nelle nuove lib di Statemanagement)

--

REF/SPUNTI

UN PO' DI STORIA: I vari annunci / rilasci di NG:

  • Siutazione "stagnante" da NG v9 con l'introduzione di Ivy 6 Feb 2020
  • Novità di NG v12 default enableIvy:true Ivy everywhere 13 Mag 2021
  • Novità di NG v13 4 Nov 2021
  • Introduzione a standlone 6 Feb 2022
  • Novità di NG v14 2 Giu 2022
  • Novità di NG v15 16 Nov 2022
  • Introduzione a Signal 15 Feb 2023 + RFC 3 Apr 2023
  • Novita di NG v16 4 Mag 2023

STANDALONE / Optional NgModule - TRACCIA / IDEA

IDEA: Introdurre Standalone:

  • NgModule faceva troppo: contesto template(decl+imp/exp) +DI +Lazy
  • Vecchia soluzione tampone (SCAM) -> 1 NgModule per ogni comp ;-b soluzione tampone SCAM -> "NUOVO Mental model"
  • Standalone component = Optional NgModule (INTEROP entrambi versi!!)
  • mostrare Migrazione @angular/core:standalone + qualche fix: AppComponent + SCAM exports

--

Le basi NgModule

L'errore più grande del Team di Angular [lo hanno ammesso](IGOR TWITTER/VIDEO)
Ma a cosa serve l'NgModule - Faceva un pò troppo:

  • declarion + imports + exports --> definizione del contesto di render/compilazione del template
  • definizione dei providers per la DI
  • Lazy load / creazione dinamica dei componenti

--

Soluzione tampone fino alla v13: SCAM

Perchè io e altri è da un bel pò che vorremmo toglierci di torno gli NgModule

SCAM = Single Component Angular Module

Per toglierci di mezzo gli NgModules ne facciamo uno per componente :-)

--

Mostrare Il "NUOVO Mental model"

  • standalone Component / Directive / Pipe = Optional NgModule
  • Mostrare snippet da NgModel (declaration/import/export) -> nuovo @Component{"standalone": true}

Si torna alla unica vera idea iniziale "COMPONENT PILAR": I @Component SONO I VERI BUILDING BLOCK DELLE APP ANGULAR!

  • chiarire subito che c'è piena INTEROP con vecchi NgModule
  • più chiare dipendenze dirette (template scope)
  • più facile parte dinamica: Lazyload (vedi dopo Routing) / @ViewContainerRef.createComponent vedi snippet da V13 si può creare direttamente component SENZA usare ComponentFactory/NgModule
  • più chiaro anche dove definire i providers (DI) + eventuale mia idea/suggerimento dei component con il buco per definire contesto servizi utilizzabili nei figli (ad esempio nella Page di atterraggio del LazyLoad) anche se ora c'è anche idea alternativa di metter i providers direttamente nei Routing (anche qui vedi dopo)

--

MOSTRARE Migrazione: ng g @angular/core:standalone

  • Mostrare diff da NgModule (declaration/import/export) -> nuovo @Component{"standalone": true}
  • boostrapApplication -> OK usa provideHttp, ma NO ROUTING nuovo!!
  • Alcuni FIX: AppComponent mancano le dipendenze + SCAM per farli rimuovere bisgona commentare exports e rifare 2° p.to migrazione FORSE: con SCAM si fa prima a mano... o facendo schematics NX ad-hoc npx @ngneat/aim-to-standalone start

--

REF/SPUNTI

OTTIMIZZAZIONE - TRACCIA / IDEA

IDEA: Mostrare come eliminare anche AppModule di partenza utilizzando:

  • boostrapApplication + specificare providers + importProviderFrom( ngModule_vecchio ) UTILIZZO provideRoute, provideHttp PER RIDURRE BUNDLE (TreeShake):
  • provideHttpClient -> treeshake con feature withXSSRF / withInjector/withInjectorFROMCLASS?
    • possibilità di scrivere InjectorFN senza più classi
  • provideRouter -> treeshake con feature withHashLocation / ...
    • possibilità di scrivere GuardFN senza classi + facile da usare direttamente su route (grazie a inject)

--

REF/SPUNTI

  • approfondimento sulle novità del provideHttp
  • Guida omni-compresiva su come fare Config dell'applicazione in Angular 15

ROUTER (NEW LAZY + fnGUARD) - TRACCIA / IDEA

IDEA: Mostrare nuova sintassi Route che punta direttametne a Standalone component + lazy loadComponent

  • lazy loadChildren per caricare array ROUTES
  • mostrare come impostare providers: [] validi per route!
  • Mostrare anche pattern del export default (semplifica lazy)+ suggerimento su come organizzare directory + @pages su tsconfig.json usando path
  • mostrare come ho modificato varie RouteGard: CanLoad->CanMatch su auth.guard.ts + CanActivate/CanDeactivate su cart.route.ts

--

REF/SPUNTI

INJECT - TRACCIA / IDEA

IDEA: Mostrare nuovi pattern DI con inject

  • Mostrare snippet per cambiare da costructor -> prop=inject
  • Vantaggi/casi d'uso utile:
  • infer del tipo di ritorno (utile soprattutto per caso INJECT TOKEN finalmente type-safe e senza @Inject(TOKEN))
  • semplifica caso di classi ereditate non più problema del super(con ripassaggio dei servizi a base)
  • helper injectionFn esempio routerParams che al posto del costruttore mi faccio ingnettare direttamente proprietà NOTA: possibile solo nel contesto di inizializzazione (oppure usando runInInjectionContext(injector,()=>{...}),
  • Novita Angular16 DestoryRef comodo per generalizzare codice ngOnDetroy -> helper takeUntilDestroy

--

REF/SPUNTI

ALTRE FEATURE: - TRACCIA / IDEA

Parlare anche di altre feature (che io trovo meno utili), ma che comuque aprono nuove strade:

  • directiveHosts Composition vs inheritance per far mix&match di piu direttive standalone rimappando/esponendo input&output
  • Reactive Forms Strict (hanno sbagliato naming e types) GIF DEL STICT FORM INTELLISENCE
  • NgOptimizedImage migliora LCP rimandando caricamento immagini + IMAGE_LOADER custo x Claudinary&Co.

ALTRE NOVITA UTILI:

  • @Input({required}) / routerParams withComponentInputBinding / DestroyRef / takeUntilDestoryed

--

REF / SPUNTI

SIGNALS: "Elefant in the room"

Spiegare le basi: è una nuova PRIMITIVA per gestire REACTIVITY -> con lo scopo di miglioare la changeDetection rendendola puntuale! Praticamente è:

  • un contenitore di valori (Producer/Consumer + track deps & Notify)
  • che espone un getter () che ritorna in modo efficace "memoized" il valore corrente, ma internamente fa anche il tracciamento automatico di chi lo va ad utilizzare/leggere
  • ha una serie di metodi per cambiare valore: set/update/mutate che scatena Notifiche di cambiamento, per far partire auto-ricalcolo Lazy (push/pull che dovrebbe garantire "glitch-free")

Opinione un pò "contrastante" perchè: 0. Mi piace computed + richiamo () su template no problem

  1. Non è ancora chiaro come usarlo / anti-pattern (vedi gestione async / effect con writeSignal)
  2. Il grosso vantaggio arriverà quando avremo Signal component v17-18
  3. In prima battuta potrebbe venire comodo per avere nuovo modo di evitare subscription |async usando toSignal(obs) che gestisce in automatico unsubscribe e inolte mi da subito disponibile lato codice/template il valore corrente così da scrivere logica imperativa / computed senza incorrere errori doble-subscribe!
  4. Forse essendo una primitiva reactivity avremo i maggiori vantaggi nelle integrazioni di nuove lib per statemanagemnt -> ritorno Signal al posto di Obs vedi ngRxSignalStore
  5. Però richiede una riscrittura manuale +/- pesante del codice che attualmente è organizzato in base agli Observable RxJS...

Comunque sono sicuramente da tenere d'occhio in questi 1-2anni per capirli bene e prepararsi ad utilizzarli al meglio quando sarà completo il quadro di utilizzo e i vantaggi: Granular CD + Zoneless!

--

REF / SPUNTI

Extra: utilizzo modern JS tools

  • esbuild 🤯
  • vite 💚 ⚡️
  • abilitato da standalone + inject vedi articolo + repo per provare dal vivo la differenza

Q&A + REFERENCE

Le "mie" nuove Best Practices: standalone + inject + helper fn + pnpm + vite + esbuild ALCUNI APPROFONDIMENTI:

  • Bellissimo VIDEO MANFRED per ispirazione/concetti talk: Standalone / inject + customconfig / Signal basics
  • Bel Video Confronto BehaviurSubject <-> Signal

FEEDBACK & CONTACT

Me

Daniele Morosinotto

Javascript enthusiast