UT01. Arquitectures i eines de desenvolupament¶

1. Navegadors i la Web¶

1.1. Introducció a la Web¶

La Web, inventada per Tim Berners-Lee al CERN el 1989, es fonamenta en el concepte d'hipertext. El World Wide Web Consortium (W3C) és l'organització responsable de desenvolupar i mantenir els estàndards web (incloent HTML, CSS i JavaScript) amb l'objectiu de garantir que la Web sigui oberta i accessible.

Quan es parla de Web, es fa referència a l'espai d'informació format per tots els servidors interconnectats.

1.2. Definició i Funcionament dels Navegadors¶

Un navegador web és un programari que permet l'accés a Internet, interpretant la informació d'arxius i llocs web per a la seva visualització. La seva funció bàsica és obtenir documents HTML i interpretar-los.

Hipervincles i Navegació: Els documents (pàgines web) posseeixen hipervincles que enllacen porcions de text o imatges a altres documents. El seguiment d'aquests enllaços es coneix com a navegació, d'on prové el nom navegador.
Protocols i URLs: Per accedir als recursos, s'utilitza un identificador únic anomenat URL (Uniform Resource Locator). La comunicació entre el servidor web i el navegador es realitza principalment mitjançant el protocol HTTP, tot i que també se suporten FTP i HTTPS (una versió xifrada d'HTTP basada en SSL).
Estàndards: És imprescindible comprovar que qualsevol desenvolupament web funcioni correctament en els principals navegadors, i que el codi s'ajusti als estàndards HTML i XHTML. Es pot validar el compliment dels estàndards W3C mitjançant l'eina https://validator.w3.org/.

1.3. Principals Navegadors (2020)¶

Els navegadors moderns suporten JavaScript i els estàndards web.

Navegador	Motor de Renderitzat / Base	Característiques clau
Microsoft Edge	Motor de renderitzat de codi obert	Substitueix l'antic Internet Explorer; dissenyat per ser lleuger.
Mozilla Firefox	Gecko	Lliure i de codi obert. Existeix la versió Firefox Developer Edition per a desenvolupadors.
Google Chrome	Blink (fork de WebKit)	Compilat amb base en components de codi obert.
Safari	(Sense especificar)	Navegador de codi tancat d'Apple (Mac OS, iOS, Windows—sense suport des del 2012).
Opera	Blink	Creat per Opera Software. Disposa de versions per a escriptori, telèfon i tauleta.

Recomanació: Es recomana utilitzar Mozilla Firefox o Google Chrome per la seva quota de mercat i la gran quantitat d'eines per a la depuració disponibles.

2. Arquitectura i Àrees del Desenvolupament Web¶

2.1. Arquitectura Client-Servidor¶

El desenvolupament web es basa en el model client-servidor:

Costat del Servidor (Server-side): Inclou el hardware i software (servidors web com Apache, IIS, NGINX) i les tecnologies de programació incrustades (com CGI, PERL, PHP, Node.js).
Costat del Client (Client-side): Fa referència als navegadors web (clients web) i les tecnologies que suporten, com HTML, CSS i llenguatges com JavaScript, utilitzats per a la presentació i les característiques interactives.

La tria entre tecnologia client-side i server-side depèn de la tasca; són complementàries. Per exemple, la validació de formularis és més efectiva al costat del client, mentre que l'emmagatzematge de dades es gestiona millor al costat del servidor.

2.2. Àrees del Disseny i Desenvolupament Web¶

El desenvolupament web abasta diverses facetes:

Contingut: Forma i organització del contingut del lloc, estructurat amb tecnologies de marcat com HTML.
Visual (Disseny): Plantilla, aparença i elements gràfics, utilitzant tecnologies com CSS.
Tecnologia: Tipus d'elements interactius, sovint construïts mitjançant tècniques de programació.
Distribució: Velocitat i fiabilitat amb què el lloc web es distribueix (hardware/software i arquitectura de xarxa).
Propòsit: La raó per la qual existeix el lloc web (sovint de tipus econòmic).

3. Llenguatges de Scripting (JavaScript)¶

El focus del mòdul se centra en els llenguatges de scripting que aporten dinamisme a les pàgines, principalment JavaScript.

3.1. Rol i Característiques de JavaScript¶

JavaScript se situa a la capa superior del desenvolupament web en el costat del client, gestionant el Comportament de la pàgina. Les 4 capes són: Comportament (JavaScript), Presentació (CSS), Estructura (DOM / HTML), i Contingut.

Usos típics de JavaScript: * Fer que la pàgina web respongui a la interacció de l'usuari. * Pre-processar dades al client abans d'enviar-les al servidor. * Modificar estils i contingut dinàmicament. * Utilitzar AJAX per sol·licitar dades XML al servidor de forma asíncrona (background) i transparent.

3.2. Limitacions i Seguretat¶

JavaScript és interpretat pel client, però presenta limitacions que reforcen la seguretat:

No tots els clients executen JavaScript; per tant, la pàgina hauria de ser funcional fins i tot amb JavaScript desactivat.
No pot escriure fitxers directament al servidor (aquesta tasca recau en el llenguatge de servidor).
S'executa en un "espai segur d'execució" i està restringit per la política de "mateix origen" (same-origin), impedint l'accés a informació d'altres webs (usuaris, contrasenyes, cookies).
No pot modificar les preferències del navegador, llançar aplicacions en l'ordinador del client, ni llegir o escriure fitxers locals (amb l'excepció de les cookies).

3.3. Integració de Codi JavaScript amb HTML¶

El codi JavaScript es pot inserir utilitzant l'etiqueta <script></script>.

Ficher Extern: La forma més recomanable és incrustar un fitxer extern (.js) mitjançant l'atribut src. Això permet la separació de codi i estructura, la centralització de codi per a depuració i millora la rapidesa de càrrega (gràcies a la memòria cau del navegador).
- Exemple: <script type="text/javascript" src="tucodigo.js"></script>.
XHTML: En XHTML, s'utilitzen les seccions CDATA per encapsular les instruccions de JavaScript i evitar conflictes amb caràcters com < i &.

4. Entorn de Desenvolupament i Eines¶

4.1. Eines i Entorns Recomanats¶

Es recomana l'ús de Visual Studio Code (VSC) com a entorn de desenvolupament per la seva potència i el seu gran ecosistema de plugins. Els editors de codi han de facilitar la programació amb característiques com sintaxi amb codificació de colors i verificació de sintaxi.

Control de Versions: Durant el curs s'utilitzaran repositoris Git per al lliurament de pràctiques i el control de versions.

4.2. La Consola Web (F12)¶

La majoria de navegadors incorporen eines natives per facilitar el desenvolupament. La més destacada és la Consola Web, accessible prement la tecla F12 a Firefox i Google Chrome.

La consola web inclou diverses pestanyes per a la depuració: * Red (Xarxa): Registre de peticions HTTP. * CSS: Anàlisi i errors CSS (mostrat en color blau). * JS: Anàlisi i errors Javascript (mostrat en color groc). * Seguridad (Seguretat): Advertències o fallades de seguretat (mostrat en color vermell). * Registro (Registre): Missatges enviats a l'objecte window.console (mostrat en color gris).

5. Evolució i Tipus d'Aplicacions Web¶

El desenvolupament d'aplicacions web ha evolucionat significativament:

Pàgines Web Estàtiques: Simples pàgines HTML amb hipervincles.
Pàgines Web Generades pel Servidor: HTML generat al servidor (PHP, Node, Java).
Introducció d'AJAX: Permet carregar o pujar dades al servidor de manera asíncrona, millorant la interactivitat sense recarregar la pàgina.
Single Page Application (SPA): Aplicacions d'una sola pàgina que es comuniquen amb el servidor usant JSON o XML, oferint una experiència d'App.

5.1. Tecnologies de Frontend (JavaScript)¶

Es pot programar utilitzant:

JavaScript 'Vanilla': JavaScript pur, sense biblioteques.
Biblioteques: Faciliten tasques complexes sense canviar el paradigma de programació (e.g., JQuery, React, Vue.js).
Frameworks: Canvien totalment el paradigma de programació, facilitant la creació ràpida de pàgines (e.g., Angular, Vue.js).
Frameworks Full Stack / MetaFrameworks: S'encarreguen tant del backend com del frontend, utilitzant tècniques com el Server Side Rendering (SSR) o l'Hydration (que permet que les aplicacions generades al servidor continuïn sent dinàmiques al client).

Altres tipus d'aplicacions web inclouen les Progressive Web Apps (PWA), que combinen les millors característiques de les webs i les aplicacions mòbils, i les Apps Híbrides.

5.2. Producció i Optimització¶

Per a la posada en producció, es necessita un servidor web que serveixi els fitxers HTML, CSS i Javascript de forma estàtica. Sovint s'utilitzen eines de construcció (JavaScript Build Tools), com Vite o Webpack, que compilen, minifican i optimitzen el codi per millorar la velocitat de càrrega i evitar incompatibilitats entre navegadors.

Informe Tècnic: Anàlisi Comparativa d'Arquitectures Web Client-Servidor¶

1.0 Introducció a les Arquitectures de Desenvolupament Web¶

1.1. Anàlisi del Context Estratègic¶

Comprendre l'arquitectura client-servidor és fonamental per a qualsevol iniciativa de desenvolupament a la web moderna. Aquest model constitueix la base sobre la qual s'erigeixen pràcticament totes les aplicacions i serveis digitals. Aquest informe tècnic té com a objectiu principal analitzar i comparar les tecnologies, responsabilitats i millors pràctiques inherents als entorns del costat del client (client-side) i del costat del servidor (server-side). La finalitat és proporcionar una guia clara i estratègica per a la presa de decisions tècniques en projectes de desenvolupament web, assegurant que les solucions adoptades siguin robustes, segures i eficients.

1.2. Definició del Model Client-Servidor¶

El model client-servidor és l'estructura fonamental que permet la comunicació a la World Wide Web. Es compon de tres elements essencials que treballen de manera coordinada:

El costat del client (client-side): Fa referència a l'entorn on l'usuari final interactua amb l'aplicació. En la gran majoria dels casos, aquest entorn és el navegador web (com ara Firefox, Google Chrome o Microsoft Edge) que s'executa a l'ordinador o dispositiu mòbil de l'usuari.
El costat del servidor (server-side): Correspon a l'entorn remot que allotja el lloc web i gestiona la seva lògica central. Inclou el maquinari (servidors físics, màquines virtuals), el programari de servidor web (com Apache o NGINX), els llenguatges de programació del backend i les bases de dades on s'emmagatzema la informació de manera persistent.
La xarxa: És el teixit connectiu que comunica el client i el servidor. Aquesta comunicació es realitza mitjançant protocols estàndard, principalment el Protocol de Transferència d'Hipertext (HTTP), que defineix com s'estructuren i es transmeten els missatges entre ambdós extrems.

1.3. Transició¶

Amb aquest marc conceptual establert, l'informe procedirà a una anàlisi detallada de cada component, començant per l'arquitectura i les tecnologies que defineixen el costat del client.

2.0 Anàlisi de l'Arquitectura del Costat del Client (Client-Side)¶

2.1. Visió General Estratègica¶

L'arquitectura del costat del client és responsable de tot allò que l'usuari veu i amb què interactua directament al seu navegador. El seu rol estratègic és crucial, ja que determina la qualitat de l'experiència d'usuari (UX), la interactivitat i el dinamisme de la interfície. Tot el codi client-side s'executa íntegrament en el dispositiu de l'usuari, la qual cosa permet respostes immediates a les seves accions sense necessitat de comunicar-se constantment amb el servidor.

2.2. Anàlisi de les Tecnologies Fonamentals¶

El desenvolupament en el costat del client s'estructura en capes tecnològiques ben definides, cadascuna amb una responsabilitat específica per construir una experiència web completa:

Contingut (HTML): L'HTML (HyperText Markup Language) és l'esquelet de qualsevol pàgina web. Defineix l'estructura semàntica del contingut, organitzant la informació en elements com títols, paràgrafs, llistes, imatges i formularis.
Presentació (CSS): El CSS (Cascading Style Sheets) s'encarrega de l'aspecte visual i l'estil. Controla la disposició (layout), els colors, la tipografia i les plantilles, separant de manera efectiva la presentació de l'estructura del contingut.
Comportament (JavaScript): JavaScript és el llenguatge de programació principal del client. Aporta interactivitat i dinamisme a les pàgines, permetent executar lògica directament al navegador per respondre a les accions de l'usuari i modificar el contingut de la pàgina en temps real.

2.3. Avaluació de Funcionalitats i Casos d'Ús¶

La programació del costat del client, principalment a través de JavaScript, habilita un conjunt de funcionalitats clau per a les aplicacions web modernes:

Reacció a la Interacció de l'Usuari: Gestiona esdeveniments com clics en enllaços, enviaments de formularis o moviments del ratolí, permetent que la pàgina respongui de manera immediata a les accions de l'usuari.
Modificació Dinàmica de Contingut i Estil: Permet alterar l'estructura (DOM - Document Object Model) i l'estil de la pàgina en temps real, sense necessitat de recarregar-la. Això és fonamental per a funcionalitats com mostrar o amagar seccions, actualitzar dades o aplicar efectes visuals.
Preprocessament de Dades: S'utilitza per realitzar validacions en formularis abans que les dades siguin enviades al servidor. Aquesta pràctica millora significativament l'experiència de l'usuari, ja que proporciona una retroalimentació instantània sobre possibles errors.
Comunicació Asíncrona (AJAX): Mitjançant tecnologies com AJAX (Asynchronous JavaScript and XML), el client pot sol·licitar o enviar dades al servidor en segon pla. Això permet actualitzar parts específiques d'una pàgina (com un feed de notícies o un mapa) sense interrompre l'experiència de navegació de l'usuari.

2.4. Anàlisi de l'Ecosistema de Desenvolupament¶

El desenvolupament amb JavaScript es pot abordar des de diferents nivells de complexitat i abstracció, cadascun amb els seus propis avantatges estratègics:

JavaScript 'Vanilla': Es refereix a l'ús de JavaScript pur, sense cap biblioteca o framework extern. És una opció ideal per a projectes petits o per afegir interactivitat simple, ja que no introdueix dependències addicionals i ofereix un control màxim sobre el codi.
Biblioteques (p. ex., JQuery, React): Són conjunts de codi que faciliten tasques específiques i repetitives, com la manipulació del DOM o la gestió d'esdeveniments. S'integren en projectes existents per resoldre problemes concrets, oferint eines per augmentar la productivitat sense imposar una estructura completa a l'aplicació.
Frameworks (p. ex., Angular, Vue.js): Ofereixen una estructura completa i un paradigma de programació definit per construir aplicacions complexes des de zero. Canvien completament la manera de programar, facilitant un desenvolupament ràpid i organitzat, però creen una dependència tecnològica més forta. Eines com React i Vue.js difuminen aquesta distinció, ja que, tot i ser tècnicament biblioteques, sovint s'utilitzen com a base fonamental d'aplicacions complexes, adoptant un rol similar al d'un framework.

2.5. Examen de Limitacions i Restriccions de Seguretat¶

L'execució de codi al navegador del client comporta limitacions i restriccions de seguretat inherents. Aquestes limitacions funcionals són una conseqüència directa del model de seguretat dissenyat per protegir l'usuari i la integritat del seu sistema operatiu.

Limitacions Funcionals¶

Per disseny, JavaScript executat en un navegador no pot realitzar les següents accions:

Escriure fitxers directament al servidor.
Llegir o escriure fitxers o directoris a l'ordinador del client (a excepció de les cookies).
Llançar l'execució d'aplicacions externes a l'ordinador del client.
Modificar les preferències del navegador o accedir a elements de la interfície del sistema operatiu.
Accedir a informació d'una pàgina web allotjada en un domini diferent.

Model de Seguretat¶

La seguretat de JavaScript al client es basa en dos pilars fonamentals:

"Espai segur d'execució" (Sandbox): El codi JavaScript s'executa en un entorn aïllat (sandbox) dins del navegador. Aquest entorn restringeix el seu accés al sistema operatiu i als recursos del sistema, limitant les seves accions a tasques relacionades exclusivament amb la pàgina web.
"Política de mateix origen" (Same-Origin Policy): Aquesta política de seguretat impedeix que un script carregat des d'un domini pugui accedir a dades (com cookies o informació d'usuari) d'un altre domini. Això és crucial per prevenir atacs on un lloc maliciós intenti robar informació d'un altre lloc obert al navegador.

2.6. Transició¶

Aquestes limitacions intrínseques del costat del client, especialment la incapacitat d'emmagatzemar dades de forma permanent i segura, posen de manifest la necessitat d'una contrapartida al servidor per a gestionar la lògica de negoci crítica i la persistència de la informació.

3.0 Anàlisi de l'Arquitectura del Costat del Servidor (Server-Side)¶

3.1. Perspectiva Estratègica del Servidor¶

L'arquitectura del costat del servidor constitueix el nucli central de qualsevol aplicació web robusta. És on resideix la lògica de negoci, es gestiona la persistència de les dades i s'implementen les mesures de seguretat fonamentals. A diferència del client, el servidor és un entorn controlat pel desenvolupador, la qual cosa li permet executar tasques privilegiades i accedir a recursos protegits.

3.2. Anàlisi de les Tecnologies i Components¶

L'entorn del servidor està format per una pila de tecnologies que treballen conjuntament per processar les sol·licituds dels clients i generar respostes adequades:

Programari de Servidor Web: És el programari que rep les peticions HTTP dels navegadors i serveix els fitxers corresponents. Exemples destacats inclouen Apache, NGINX i Microsoft IIS.
Llenguatges de Programació: El servidor executa codi escrit en una àmplia varietat de llenguatges dissenyats per a la web. Aquests inclouen llenguatges de scripting com PHP, Perl (CGI), Python o Node.js (JavaScript al servidor), o llenguatges compilats com Java o C++. També s'inclouen tecnologies propietàries com ASP.NET i plataformes com ColdFusion.
Bases de Dades: Són sistemes d'emmagatzematge organitzat on l'aplicació guarda i recupera la informació de manera permanent. El servidor actua com a intermediari segur entre l'aplicació i la base de dades.

3.3. Avaluació de Funcionalitats i Responsabilitats Clau¶

Les tasques següents són responsabilitat exclusiva o principal de l'arquitectura del servidor:

Emmagatzematge Permanent de Dades: El servidor és l'únic component capaç d'interactuar de manera segura amb les bases de dades per guardar, modificar i consultar informació (com perfils d'usuari, productes o comandes).
Lògica de Negoci i Accés a Dades: Processa les sol·licituds rebudes, aplica les regles de negoci de l'aplicació i determina quines dades s'han de consultar o modificar. Garanteix que les operacions es realitzin de manera consistent i segura.
Autenticació i Seguretat: La gestió d'usuaris, la validació de credencials i l'aplicació de permisos d'accés són tasques crítiques que han de residir al servidor. La validació final de qualsevol dada provinent del client es realitza aquí per prevenir vulnerabilitats.

3.4. Transició¶

Un cop definits els rols i capacitats de cada arquitectura, és essencial comparar directament com certes tasques comunes es poden abordar des de cada costat per prendre decisions d'implementació informades.

4.0 Anàlisi Comparativa d'Implementació: Client vs. Servidor¶

4.1. Introducció a la Presa de Decisions Tècniques¶

Moltes funcionalitats en el desenvolupament web no tenen una única ubicació d'implementació; es poden realitzar tant al client com al servidor. La decisió correcta depèn d'un equilibri estratègic entre factors com l'experiència d'usuari, el rendiment de l'aplicació, la integritat de les dades i la seguretat. Escollir el lloc adequat per a cada tasca és clau per construir una aplicació eficient i robusta.

4.2. Matriu Comparativa de Tasques Comunes¶

Tasca	Implementació Client-Side (Anàlisi)	Implementació Server-Side (Anàlisi)
Validació de Formularis	Recomanable per a UX: Proporciona retroalimentació instantània a l'usuari sense sobrecarregar el servidor. Millora la usabilitat i redueix la frustració. Tanmateix, és vulnerable, ja que es pot eludir.	Obligatòria per a Seguretat: És l'única validació fiable. El servidor ha de verificar sempre totes les dades rebudes per garantir la integritat i prevenir atacs maliciosos, ja que la validació del client pot ser desactivada o manipulada.
Accés i Emmagatzematge de Dades	Accés per a Visualització: Ideal per presentar dades rebudes del servidor (p. ex., en una presentació de diapositives) i manipular-les a la interfície. No pot emmagatzemar dades de manera permanent i segura.	Emmagatzematge Centralitzat:Responsabilitat exclusiva del servidor. Gestiona la interacció amb la base de dades per garantir la persistència, la seguretat i la integritat de la informació.
Execució de Càlculs	Apropiat per a Càlculs d'Interfície: Útil per a operacions simples que milloren la interactivitat (p. ex., calcular el total d'un carret de la compra en temps real). L'execució és ràpida, ja que utilitza els recursos del client.	Necessari per a Càlculs Crítics: Essencial per a càlculs complexos, que requereixen dades segures o que formen part de la lògica de negoci principal. L'execució al servidor garanteix la precisió i la seguretat del resultat.
Manipulació d'Elements de la Pàgina	Tasca Inherent del Client: És la seva funció principal. Operacions com eliminar un paràgraf, afegir un element a una llista o canviar un estil es realitzen manipulant el DOM directament al navegador, proporcionant una resposta immediata.	No Aplicable: El servidor no té accés directe al DOM de la pàgina un cop ha estat enviada al client. La seva funció és generar l'HTML inicial o proporcionar dades perquè el client realitzi les manipulacions.

4.3. Anàlisi de la Complementarietat¶

La conclusió clau d'aquesta anàlisi és que les tecnologies client-side i server-side són complementàries, no adversàries. Una aplicació web ben dissenyada aprofita els punts forts de cada arquitectura per oferir la millor solució possible. L'exemple de la validació de formularis és paradigmàtic: la millor pràctica consisteix a implementar una validació inicial al client per millorar l'experiència d'usuari i una validació final i exhaustiva al servidor per garantir la seguretat i la integritat de les dades. Aquesta col·laboració és el pilar del desenvolupament web modern.

4.4. Transició¶

Un cop enteses les arquitectures i la seva interrelació, el pas següent és examinar les eines i les pràctiques recomanades per implementar aquestes solucions de manera efectiva i professional.

5.0 Eines de Desenvolupament i Millors Pràctiques¶

5.1. Importància de l'Entorn de Desenvolupament¶

La qualitat i l'eficiència en el desenvolupament web no depenen només de l'arquitectura escollida, sinó també de l'entorn de treball i de l'adhesió a bones pràctiques. Un entorn de desenvolupament ben configurat, equipat amb les eines adequades, i el seguiment d'estàndards de la indústria són crucials per accelerar el procés, minimitzar errors i garantir la qualitat del producte final.

5.2. Selecció d'Eines Essencials¶

Editors de Codi i IDEs: L'elecció d'eines d'edició de codi abasta un espectre que va des d'editors simples fins a entorns de desenvolupament integrats (IDEs) complets. Es poden classificar en tres categories principals:
- Editors simples: Ideals per a modificacions ràpides i casuals (p. ex., Notepad, Gedit). Són lleugers però manquen de funcionalitats avançades.
- Editors de text avançats: Ofereixen un equilibri excel·lent entre rendiment i funcionalitat, amb característiques com ressaltat de sintaxi, autocompletat i un ampli ecosistema d'extensions.
- Entorns de Desenvolupament Integrats (IDEs): Solucions completes dissenyades per a projectes grans i complexos, que integren depuradors, compiladors i altres eines (p. ex., Eclipse, NetBeans).
Per a la majoria de projectes de desenvolupament web modern, es recomana explícitament l'ús de Visual Studio Code, un editor de text avançat que destaca per la seva potència, versatilitat i extensibilitat. Les extensions clau per a un flux de treball eficient inclouen:
- Prettier: Per a un formatatge automàtic i consistent del codi.
- ESLint: Per a la detecció d'errors de programació i d'estil en JavaScript.
- Live Server: Per llançar un servidor de desenvolupament local que recarrega automàticament la pàgina en desar els canvis.
- html-in-template-string: Per facilitar l'edició de literals de plantilla (template literals) en JavaScript.
Navegadors i Eines de Depuració: És imprescindible provar el codi en múltiples navegadors per assegurar la compatibilitat. Es recomana centrar-se en Firefox i Google Chrome per la seva quota de mercat i les seves excel·lents eines per a desenvolupadors. Aquestes eines, accessibles prement la tecla F12, inclouen la "Consola Web", que és fonamental per registrar missatges, inspeccionar errors de JavaScript i analitzar el trànsit de xarxa.
Control de Versions: L'ús d'un sistema de control de versions és una pràctica estàndard i ineludible en el desenvolupament professional. Git és l'eina de facto del sector per gestionar l'historial de canvis del codi, facilitar la col·laboració en equip i mantenir un registre de les versions del projecte.

5.3. Guia de Millors Pràctiques d'Implementació¶

Adhesió als Estàndards Web: És fonamental garantir que el codi HTML sigui vàlid segons les especificacions del W3C. L'ús del validador del W3C (https://validator.w3.org/) ajuda a detectar errors estructurals que, si no es corregeixen, poden provocar un funcionament incorrecte del CSS i del JavaScript. Un HTML invàlid és una font comuna de problemes de compatibilitat entre navegadors.
Integració de Codi JavaScript: Encara que és possible inserir codi JavaScript directament dins dels fitxers HTML, la pràctica recomanada és utilitzar fitxers externs amb extensió .js. Aquest enfocament millora significativament la modularitat, permet la reutilització del codi en múltiples pàgines, optimitza el rendiment gràcies a la memòria cau del navegador i augmenta la claredat i mantenibilitat del projecte.
Disseny Funcional Sense JavaScript: Un principi de disseny robust, conegut com a "progressive enhancement" (millora progressiva), dicta que una pàgina web hauria de ser completament funcional i accessible encara que JavaScript estigui desactivat. JavaScript s'hauria d'utilitzar per millorar l'experiència d'usuari i afegir interactivitat, però no hauria de ser un requisit absolut per accedir al contingut o a les funcionalitats bàsiques.

5.4. Transició¶

La combinació d'una comprensió clara de les arquitectures, l'ús d'eines adequades i l'adopció d'aquestes millors pràctiques permet als equips de desenvolupament prendre decisions informades i construir productes web de la màxima qualitat per a cada projecte específic.

6.0 Conclusions i Recomanacions Estratègiques¶

6.1. Síntesi Final¶

Aquest informe ha demostrat que les arquitectures del costat del client i del costat del servidor no són opcions excloents, sinó components d'un sistema integrat i complementari. El client excel·leix en la creació d'interfícies d'usuari interactives i amb una resposta ràpida, mentre que el servidor ostenta un rol insubstituïble en la gestió de la lògica de negoci, la persistència de dades i la seguretat. La clau de l'èxit en el desenvolupament web rau en entendre les fortaleses i limitacions de cada entorn per assignar cada tasca al lloc on s'executarà de manera més eficient i segura.

6.2. Guia per a la Presa de Decisions¶

Una de les decisions arquitectòniques més rellevants avui dia és si optar per una Single Page Application (SPA), que delega gran part de la lògica de presentació al client. L'anàlisi suggereix que una SPA pot ser considerada "sobreenginyeria" si no es justifica adequadament. Els següents criteris ajuden a prendre una decisió informada:

Freqüència d'Ús: Una SPA és més adequada per a aplicacions que l'usuari manté obertes i utilitza constantment (com una eina de gestió de projectes o un client de correu electrònic). Per a llocs web d'ús esporàdic (com un blog o una pàgina corporativa), una arquitectura tradicional generada al servidor sol ser més eficient, lleugera i favorable per al SEO.
Complexitat de la Interfície: Una SPA es justifica quan l'aplicació requereix un alt grau d'interactivitat, components que comparteixen estat entre si i rutes gestionades al client. Si la interfície és principalment informativa i amb interaccions simples, una SPA pot complicar innecessàriament el desenvolupament.

6.3. Recomanació Final¶

La millor arquitectura web no és una fórmula universal, sinó aquella que s'alinea estretament amb el propòsit de l'aplicació. Ha d'equilibrar de manera intel·ligent les necessitats d'una experiència d'usuari fluida i moderna amb els requisits no negociables de seguretat i rendiment del servidor. La implementació d'aquesta arquitectura ha de basar-se en l'ús d'eines de desenvolupament modernes, l'adopció de millors pràctiques i una adhesió rigorosa als estàndards oberts que garanteixen la interoperabilitat i la longevitat de la solució.