Download to read offline
Uploaded byMichele Aponte
Angular in produzione: Best Practices e Performance Improvements
Il documento fornisce best practices e miglioramenti delle performance per Angular, evidenziando l'importanza dell'organizzazione del progetto attraverso moduli, routing e comunicazione tra componenti. Si discute anche dell'ottimizzazione delle performance tramite la gestione della change detection e l'uso dell'HttpClient e degli interceptor. Infine, vengono forniti suggerimenti per la sopravvivenza nello sviluppo con Angular, come l'uso della CLI, del linter e della documentazione.
Angular in produzione: Best Practices e Performance Improvements
- 2. Angular in produzione: BestPractices e Performance Improvements Michele Aponte CEO/CTO Blexin Srl michele.aponte@blexin.com @apomic80
- 3. Cosa dovreste giàconoscere • JavaScript, HTML 5, CSS • Che cos’è Angular :) • Moduli, Componenti e Service • Pipe e Direttive • Modulo Form e binding bidirezionale • Http Client e Routing • Angular CLI
- 4. Best Practices vsPerformance
- 5. Come organizzo ilmio progetto? La risposta è DIPENDE! - Per Features - Per Componenti Una soluzione mista che si adatta bene alla vostra applicazione
- 6. Come organizzo ilmio progetto? Il team di Angular dice: ”Do structure the app such that you can Locate code quickly, Identify the code at a glance, keep the Flattest structure you can, and Try to be DRY.” (https://angular.io/guide/styleguide)
- 7. I moduli sonoi vostri migliori amici Creazione moduli secondari - Migliore organizzazione del codice - Suddivisione delle attività - Riusabilità tra diversi progetti - Moduli applicativi e moduli di supporto
- 8. I moduli sonoi vostri migliori amici Routing per modulo - Ogni modulo applicativo definisce le sue rotte - Il modulo principale carica le rotte figlie - Lazy Loading
- 9. I moduli disupporto come librerie Possiamo creare le nostre librerie di componenti: - Riutilizzo tra più progetti - Condivisione con la community degli sviluppatori - Creazione di un “framework” sul framework
- 10. Creazione e organizzazionedi un progetto
- 11. Change Detection inAngular Angular si accorge delle modifiche agli elementi bindati in maniera automatica: - Aggiorna automaticamente la UI - Bello, ma costoso - Si può parzialmente disabilitare - Disabilitarla può incrementare molto le performance
- 12. Change Detection inAngular
- 13. Change Detection inAngular
- 14. Change Detection inAngular
- 15. Change Detection inAngular
- 16. Change Detection inAngular
- 17. Change Detection inAngular
- 18. Change Detection inAngular
- 19. Change Detection inAngular
- 20. Change Detection inAngular
- 21. Change Detection inAngular
- 22. Change Detection inAngular
- 23. Ottimizzare le performancein Angular
- 24. Comunicazione tra componenti Icomponenti devono essere autonomi ma devono poter comunicare tra loro: - se sono in relazione padre/figlio uso @Input e @Output - se sono fratelli posso usare il padre come mediatore e usare sempre @Input e @Output - se possono trovarsi in una relazione qualsiasi posso sfruttare la Dependency Injection, gli Observable e gli operatori RxJS
- 25. Reactive eXtensions: RxJS AnAPI for asynchronous programming with observable streams
- 26.
- 27. Comunicazione con ilBackend: HttpClient Il nuovo HTTP Client di Angular (@angular/common/http) ci permette di: - Omettere il mapping della Response e usare i Generics di Typescript - Intercettare chiamate HTTP
- 28. Comunicazione con ilBackend: HttpClient Gli INTERCEPTOR sono la vera novità: - Possiamo fare qualcosa prima o dopo una chiamata - Possiamo creare la nostra pipeline creando più interceptors e aggiungendoli ai Providers del modulo Usi tipici: - Logging - Centralizzazione degli errori - Aggiunta informazioni di sicurezza
- 29.
- 30. Qualche suggerimento perla sopravvivenza - Usate la CLI - Usate il linter (TSLint) - SonarQube se potete - Documentate (Markdown) - Keep It Simple (and) Stupid (KISS) - Siate coerenti
- 31.