6 consells per millorar el rendiment d’aplicacions a Angular
Avui dia, tothom sap que la creació i desenvolupament d’aplicacions web d’alt rendiment és un pilar clau per retenir els usuaris i mantenir-los satisfets. No obstant això, amb la constant aparició d’errors per corregir i noves funcions per crear, és molt més fàcil dir-ho que fer-ho. Afortunadament, actualment, amb les últimes versions d’Angular es pot recórrer a diversos recursos per millorar el rendiment d’una aplicació creada en aquest Framework, diversos aspectes fan que una aplicació tingui millors temps de càrrega i s’estableixin de manera òptima, ho veurem a l’article d’avui.
QUÈ ÉS ANGULAR?
Com ja vam veure a la comparativa entre Angular i React, Angular, l’evolució d’AngularJS, és un Framework de desenvolupament basat en JavaScript i Google, molt utilitzat per a pàgines web amb una única pàgina/finestra.
Angular separa completament el Frontend i el Backend a l’aplicació, evita escriure codi repetitiu i manté tot més ordenat gràcies al seu patró MVC (Model-Vista-Controlador) assegurant els desenvolupaments amb rapidesa, alhora que possibilita modificacions i actualitzacions.
Entre altres avantatges, aquest framework és modular i escalable adaptant-se a les nostres necessitats i al estar basat en l’estàndard de components web, i amb un conjunt d’interfície de programació d’aplicacions (API) ens permet crear noves etiquetes HTML personalitzades que es poden reutilitzar.
COM OPTIMITZAR EL RENDIMENT DE LA MEVA APLICACIÓ A ANGULAR?
Després de les darreres actualitzacions d’Angular, podem recórrer a diferents recursos que ens permetran millorar el rendiment de la nostra aplicació millorant temps de càrrega.
Comencem!
Lazy Loading
Lazy Loading o càrrega diferida, és sens dubte una de les millors característiques d’Angular i una de les més utilitzades pels desenvolupadors. Aquest mecanisme permet que la càrrega es divideixi en comptes de carregar l’aplicació completa en iniciar laplicació.
És a dir, en implementar un script com LazyLoad, el navegador carrega les imatges i la resta de dades només quan aquestes apareixen a la finestra gràfica o viewport (l’àrea visible) de l’usuari, per exemple, en desplaçar-se per la finestra del navegador o maximitzar-la, ja que la majoria de les aplicacions contenen més duna pàgina o mòduls.
Gràcies a Angular i aquesta característica ens permet carregar de manera senzilla només el que necessitem, només cal que cada pàgina contingui el seu propi mòdul i rutes.
Podem realitzar aquesta càrrega segons unes condicions, per exemple, en base a rols, si implementem un guard especific i l’enllacem a aquests mòduls i rutes especifiques podrem realitzar una tasca més completa.
Trackby
Per Angular manipular el DOM sempre és una tasca complexa, i això es pot comprovar gràcies a la directiva estructural de *ngFor.
En iterar un llistat d’elements i mostrar-lo al DOM en una aplicació, el que fa *ngFor és una validació d’igualtat per comprovar si els elements que estan a la llista han canviat, aquesta acció la fa mitjançant referències.
A Angular, la funció TrackBy permet a l’usuari seleccionar una clau específica que s’utilitzarà per analitzar cada element de la llista en funció d’aquesta clau. TrackBy és especialment útil quan disposem de matrius i objectes imbricats que volen proporcionar un identificador únic per a cadascun.
Gràcies a l’opció TrackBy, Angular detecta quins elements s’afegeixen o no a la llista.
És important tenir en compte que TrackBy només s’aplica a la iteració actual d’un array o objecte, no a totes les futures iteracions.
Build per a producció
Una tècnica realment senzilla per implementar al nostre projecte, simplement, en realitzar un build (comandament per compilar els arxius d’Angular) hem d’afegir –prod –aot
Amb aquest paràmetre “—prod” indiquem a Angular que s’optimitzi perquè la mida dels fitxers compilador sigui molt menors i per tant la càrrega sigui més ràpida.
Amb el paràmetre “—aot” indiquem que revisi el codi per optimitzar-lo, encara que en les últimes versions aquesta ordre s’executa directament amb l’anterior paràmetre esmentat.
Gràcies a aquestes característiques, podrem activar els paràmetres següents a l’aplicació:
- Compil·lació AOT: Precompila els templates dels diversos components
- Bundling i Minification: Remenen excessos de caràcters opcionals i concatenen fitxers en paquets més petits
- Dead Code Elimination: Remouen codi no referenciats i no usats
- Production mode: Desplega el mode de producció, per tant, remou processos que només s’implementen en un mode de desenvolupament
Server Side Render (SSR)
Server Side Render és un altre dels recursos d’Angular que ens permet executar codi per part del servidor, optimitzant i reduint els temps de càrrega.
Normalment executem el nostre codi del costat del navegador que tinguem predefinit, el que ens permet el SSR és poder renderitzar el contingut al servidor com si fos una aplicació feta amb el llenguatge del servidor, generant diverses pagines estàtiques que es mostren al client, fent que l’aplicació processi més ràpid la informació i això ajuda enormement el SEO i les metadades de la nostra aplicació.
Facilita als rastrejadors web
La majoria de les xarxes socials depenen de diferents rastrejadors webs per a la indexació del contingut de les seves aplicacions i fer que aquest contingut es pugui cercar a la web. És possible que a través d’aquests rastrejadors web no es pugui navegar a l’aplicació d’Angular com ho faria un usuari.
Però Angular ens permet generar una versió estàtica de l’App per cercar i enllaçar fàcilment sense la necessitat de JavaScript.
És possible que necessitem una versió de l’aplicació renderitzada per part del servidor i sense JavaScript, ja que aquesta versió, encara que sigui limitada, podria ser l’alternativa principal per a les persones que altrament no puguin fer servir l’aplicació.
Mostra la primera pàgina més ràpid que les altres
Mostrar la primera pàgina ràpidament pot ser fonamental per a l’usuari mitjà. Està comprovat que les pàgines que carreguen molt més ràpid funcionen molt millor, fins i tot amb canvis molt petits. Per això, és molt important que l’aplicació s’iniciï ràpid per atraure els usuaris abans que prenguin una altra decisió i abandonin la pàgina.
Amb Angular podrem generar pàgines de destinació, aquestes són HTML pur i es poden mostrar fins i tot quan JavaScript està deshabilitat. Una de les seves limitacions és que no manegen esdeveniments del navegador, però si admeten lús de RouterLink. A la pràctica, s’ofereix una versió estàtica d’aquesta pàgina per mantenir l’atenció de l’usuari, mentre que alhora es carrega l’aplicació completa i l’usuari percep un rendiment instantani.
Progressive Web Apps (PWA)
La Progressive web Apps o aplicació web progressiva és una solució basada en la web tradicional que tots coneixem, encara que incorpora particularitats que la fan assemblar-se a una App nativa per a telèfons mòbils i tauletes.
I un dels avantatges més importants de PWA és que l’usuari pot continuar consultant la teva web, encara que hagi perdut la connexió a internet.
En realitzar una aplicació web progressiva la nostra aplicació carregarà molt més ràpid ja que ens dóna la capacitat de treballar de manera offline i amb una interacció molt propera a una aplicació nativa, millorant enormement el rendiment percebut per l’usuari, a més utilitza la memòria cau del navegador local per permetre una millor experiència i funcionalitat.
Valors de memòria cau a través de pipes i funcions
Per començar, cal saber que els pipes són una eina d’Angular que ens permet transformar visualment la informació, per exemple, canviar un text a majúscules o minúscules, o donar format de data i hora.
Fins i tot quan fem servir pipes, podem optimitzar l’ús de la nostra aplicació encara més recordant o emmagatzemant a la memòria cau els valors anteriors, cosa que ens permet no necessitar tornar a calcular si ja executem la canonada amb la mateixa entrada en el passat.
Les Pure Pipes no recorden els valors anteriors, però només s’asseguraran que si l’entrada no ha canviat la referència no es tornarà a calcular.
Per això, per fer l’emmagatzematge en memòria cau del valor anterior, necessitem combinar-lo amb una mica més. Una manera fàcil de fer-ho és fer servir el mètode de memorització de Lodash.
En aquest cas, això no és gaire pràctic ja que l’entrada és una matriu dobjectes. Si la canonada estava prenent un tipus de dades simple, com un nombre, com a entrada, podria ser beneficiós utilitzar això com una clau per emmagatzemar en memòria cau els resultats i així evitar el recàlcul, permetent una càrrega més ràpida i eficient.
Descobriu més referències i bones pràctiques d’ús d’Angular visitant la documentació oficial d’Angular y la documentació oficial d’Angular CLI.