Com es poden desenvolupar aplicacions web “supereficients” del front?

Aprèn a desenvolupar un front d’aplicacions web supereficients amb les últimes tendències i tècniques. Millora l’eficiència amb aquestes pràctiques.

Quan ens demanen d’implementar aplicacions web “supereficients”, sembla que sigui un requisit molt simple que només calgui demanar a les especificacions.

Quan parlem d’eficiència en una aplicació web, podem fer referència a l’impacte de diferents factors en projectes informatius. Ens centrarem a descriure els factors que ens permetin poder “fer volar l’app web de manera robusta” amb una quantitat de recursos limitats. Les recomanacions que proposarem seran per a aplicacions web utilitzades massivament.

Hi ha moltes circumstàncies que engloben els factors d’eficiència en aplicacions de la “part front” i factors d’eficiència de la “part back”. Aquestes aplicacions tenen la capacitat de presentar una òptima experiència d’usuari i per a això es necessiten que ens permetin moure les vistes i interactuar amb els components de manera ràpida i àgil.

Eficiència a la part front

Les aplicacions web actuals actuen de la mateixa manera que ho fan les aplicacions dels mòbils, però amb una tecnologia diferent i de manera molt més oberta i amb unes diferències clau:

• Les aplicacions dels mòbils, actualment, requereixen en la major part dels casos un procés d’instal·lació previ, mentre que les aplicacions web normalment són operatives des del primer moment, cosa que les fa més eficients.
• Les aplicacions mòbils acostumen a contenir totes les operatives previstes en un sol paquet, a les aplicacions web resulta més apropiat dividir les operatives en diferents pàgines.
• La instal·lació de noves versions de les aplicacions mòbils no sempre es fa de manera automàtica i encara que ho sigui, depèn de múltiples factors que no garanteixen que l’usuari estigui fent servir l’última disponible. A les aplicacions web és possible controlar el procés d’actualització de manera remota.

El model continua sent un model client/servidor de 3 capes, en aquestes aplicacions web modernes la part client té més protagonisme.

A mesura que les aplicacions web han anat traslladant cada vegada més interactivitat i funcionalitat a la part del client, s’ha anat complicant el manteniment d’aquesta part. El camí per construir aquesta mena d’aplicacions modernes és ple de reptes.

Tot i que al començament és molt fàcil començar a afegir alguna funcionalitat a una pàgina web mitjançant algunes línies de JavaScript, a mesura que creix aquesta funcionalitat també ho fa la dificultat del manteniment posterior i això pot suposar problemes de rendiment on cobren importància el seguiment de qualitat, la monitorització i la seguretat.

A CaixaBank Tech considerem prioritària la feina en el govern del desenvolupament d’aplicacions web, establint estàndards de qualitat i fent el seguiment del compliment. La nostra aposta és intentar aprofitar al màxim el que ja s’està fent servir i ha demostrat funcionar, tant pel que fa a solucions com a metodologies.

Pel que fa al client, hi ha un fort impacte pel canvi de paradigma. Hem passat d’un renderitzat al servidor que proporcionava vistes individuals al front amb la informació sol·licitada i els enllaços a altres vistes, a un model en què es proporcionen aplicacions client que s’han de carregar al navegador i que són capaces de recuperar informació dels servidors, interaccionar amb l’usuari i mostrar diferents vistes.

Mesurament de l’eficiència en aplicacions web

En l’aspecte del rendiment que percep l’usuari, és important tenir en compte l’impacte d’aquest model en els temps de resposta:

• ttfp: Time To First Paint correspon al temps que passa des que l’usuari fa una acció fins que veu algun canvi al front.
• ttfcp: Time To First Contentful Paint és el temps des que l’usuari fa una acció fins que la pàgina comença a mostrar contingut útil vinculat a l’acció realitzada.
• tti: Time To Interaction és el temps que passa des que l’usuari fa una acció fins que pot tornar a interactuar amb la pàgina.

Part d’aquests temps estan condicionats per les comunicacions entre el client a la part del front-end i el back-end.

Consells pràctics per a l’eficiència del temps de càrrega inicial

Optimitzar aplicacions web: mida i nombre de recursos

Minimitzar els scripts: eliminar redundàncies i comentaris, optimitzar el contingut abans de distribuir-lo, aplicar transcodificacions —no cal que el codi publicat el pugui llegir un humà—, adequar resolució i qualitat de les imatges a l’ús que tindran, triar els formats de fitxers adequats, agrupar diferents scripts que normalment es carreguen de manera conjunta, eliminar regles d’estils que no tenen un ús real…

Optimitzar aplicacions web: camí crític

Identificar els elements imprescindibles per a la primera interacció i separar-los de la resta perquè es poden carrega de manera prioritària.

Optimitzar aplicacions web: posposar la càrrega d’allò que encara no necessitem al front

Carregar elements i dades que no necessitem pot interferir en la càrrega d’elements que sí que necessitem, per la qual cosa aplicar una càrrega diferida dels elements i les dades encara no visibles acostuma a millorar la percepció de velocitat.

Optimitzar aplicacions web: anticipar necessitats

Un cop tinguem carregats els elements prioritaris, podem aprofitar els temps morts per iniciar o preparar la càrrega d’elements que encara no necessitem, però que especulem que podríem necessitar en breu.

Rendiment quasi nadiu de l’aplicació web

WebAssembly, de vegades abreujat com a Wasm, consisteix en un format de codi binari o portable concebut originalment com una evolució de JavaScript, la funció del qual és permetre executar un codi escrit originalment en altres llenguatges de programació compilats (com JAVA, C, C++, Rust, Phyton…) dins de màquines virtuals en un motor JavaScript.

L’assoliment principal de WebAssembly és permetre executar aplicacions web d’alt rendiment: la major part dels motors d’execució de JavaScript que fan servir els principals navegadors web actuals suporten aquest format, cosa que, afegida a l’increment de l’eficàcia respecte del JavaScript tradicional pot facilitar l’execució de processos en les aplicacions web amb un rendiment similar al del codi nadiu.

Els service workers i els proxy de l’aplicació web

Un service worker és un script que s’executa en segon pla lligat a una aplicació web que es pot continuar executant fins i tot després de tancar la pàgina a la qual estan donant suport.

Aquest scripts no poden accedir directament al DOM de la pàgina, però es poden comunicar amb la pàgina mitjançant esdeveniments. La funció principal que tenen és intermediar en les comunicacions de l’aplicació web, el navegador i els serveis remots.

Permeten, per exemple, fer una gestió intel·ligent de dades de la memòria cau o proporcionar suport a la gestió de missatges i notificacions push, i tot això, en un fil JavaScript diferent del de la part visual.

Evolució de l’aplicació web: SPA, MPA i microfrontends

Tot el que hem dit anteriorment fa referència a la percepció de l’usuari. També és important de cara a l’evolució de l’aplicació web, si es construeix com una única pàgina, com un conjunt de pàgines o com un ecosistema dins del qual conviuen un conjunt de microaplicacions que cooperen entre si.

Tradicionalment, s’acostuma a associar aplicació web moderna amb una única pàgina web que engloba totes les vistes i tota la funcionalitat. Aquest model acostuma a ser molt convenient en un primer moment, però sol escalar malament i suposa un repte a l’hora de gestionar canvis, de vegades impossible en equips i aplicacions grans. Sovint el model SPA pur té uns temps inicials de càrrega elevats i grans costos de manteniment. Les SPA necessiten que les aplicacions back siguin robustes i independents. I amb això, tenim els microserveis, en els quals també aprofundirem més endavant.

Un altre model és dividir l’aplicació en diverses pàgines diferents enllaçades entre si: seria el cas del model MPA (Multiple Page Application). Aquest model facilita el manteniment, en especial quan les diverses pàgines que formen l’aplicació estan força desacoblades entre si, però pequen de tenir temps elevats en el canvi de pàgina i és complicat gestionar l’estat de l’aplicació.

El model micro front-end ve a ser una evolució de les MPA, en què diverses microaplicacions web conviuen en una pàgina contenidora; aquestes microaplicacions estan desacoblades entre si, però disposen de mecanismes eficients per comunicar-se i el seu desenvolupament sol estar lligat a una visió vertical de negoci.

Resum d’aplicacions web “supereficients al front”

Construir una aplicació web “supereficient” no depèn d’una única persona, és un compromís en el qual cal involucrar l’equip de front, l’equip de back i també la resta de l’organització. L’eficiència absoluta és un objectiu molt difícil d’assolir que es pot veure compromès per qualsevol petit canvi aliè als equips de desenvolupament.

Ara ja saps tot el que cal tenir en compte per arribar a la supereficiència de la part front. Descobreix a l’article següent com pots aconseguir l’eficiència en el desenvolupament d’aplicacions web mitjançant l’optimització de la part back.