1. Introducció a les Arquitectures de Desenvolupament Web¶

1.1. Introducció¶

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. En el context acadèmic actual, aquesta comprensió és especialment rellevant per a estudiants que s'inicien en el desenvolupament web i necessiten una base sòlida sobre la qual construir les seves competències tècniques.

1.2. Evolució Històrica de la Web¶

La Web va ser inventada per Tim Berners-Lee al CERN el 1989, fonamentant-se 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 .

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

Progressive Web Apps (PWA): Combinen les millors característiques de les webs i les aplicacions mòbils

1.3. 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

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

2.1. Introducció¶

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. Principals Tecnologies¶

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 :

2.2.1. 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. HTML5 introdueix elements semàntics més específics com <section>, <nav>, <article>, <aside>, <header>, i <footer> que milloren l'accessibilitat i el SEO .

2.2.2. 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 . Aquesta separació entre contingut i presentació és una pràctica fonamental del desenvolupament web modern

.

2.2.3. 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. 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í

Modificació Dinàmica de Contingut i Estil: Permet alterar l'estructura (DOM) i l'estil de la pàgina en temps real

Preprocessament de Dades: S'utilitza per realitzar validacions en formularis abans que les dades siguin enviades al servidor

Comunicació Asíncrona (AJAX): Permet actualitzar parts específiques d'una pàgina sense interrompre l'experiència de navegació de l'usuari

2.4. L'Ecosistema de Desenvolupament JavaScript¶

El desenvolupament amb JavaScript es pot abordar des de diferents nivells de complexitat i abstracció

2.4.1. 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 .

2.4.2. Biblioteques¶

Són conjunts de codi que faciliten tasques específiques i repetitives, com la manipulació del DOM o la gestió d'esdeveniments. Exemples populars inclouen:

jQuery: Una biblioteca ràpida i rica en característiques que simplifica la manipulació del DOM

React.js: Biblioteca desenvolupada per Facebook per construir interfícies d'usuari interactives i reutilitzables

2.4.3. Frameworks¶

Ofereixen una estructura completa i un paradigma de programació definit per construir aplicacions complexes des de zero

Angular: Framework robust desenvolupat per Google, ideal per a aplicacions web de gran escala

Vue.js: Framework progressiu conegut per la seva simplicitat i flexibilitat

Svelte: Es diferencia en compilar el codi a JavaScript optimitzat, eliminant l'ús del Virtual DOM

2.5. Limitacions i Restriccions de Seguretat¶

L'execució de codi al navegador del client comporta limitacions i restriccions de seguretat inherents :

2.5.1. 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 (excepte cookies)
Llançar l'execució d'aplicacions externes
Modificar les preferències del navegador
Accedir a informació d'una pàgina web allotjada en un domini diferent

2.5.2. 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 dins del navegador

"Política de mateix origen" (Same-Origin Policy): Impedeix que un script carregat des d'un domini pugui accedir a dades d'un altre domini

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

3.1. Introducció¶

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. 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 :

3.2.1. 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.

3.2.2. Llenguatges de Programació¶

El servidor executa codi escrit en una àmplia varietat de llenguatges dissenyats per a la web:

Llenguatges de scripting: PHP, Perl (CGI), Python o Node.js (JavaScript al servidor)

Llenguatges compilats: Java o C++

Tecnologies propietàries: ASP.NET i plataformes com ColdFusion

3.2.3. 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. Funcionalitats i Responsabilitats¶

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

Lògica de Negoci i Accés a Dades: Processa les sol·licituds rebudes i aplica les regles de negoci de l'aplicació

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

4. Comparativa Client vs. Servidor¶

4.1. Introducció¶

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 .

4.2. Comparativa de Tasques Comunes¶

Tasca	Implementació Client-Side	Implementació Server-Side
Validació de Formularis	Recomanable per a UX: Proporciona retroalimentació instantània sense sobrecarregar el servidor. 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
Accés i Emmagatzematge de Dades	Accés per a Visualització: Ideal per presentar dades rebudes del servidor. No pot emmagatzemar dades de manera permanent	Emmagatzematge Centralitzat: Responsabilitat exclusiva del servidor. Gestiona la interacció amb la base de dades
Execució de Càlculs	Apropiat per a Càlculs d'Interfície: Útil per a operacions simples que milloren la interactivitat	Necessari per a Càlculs Crítics: Essencial per a càlculs complexos que requereixen dades segures
Manipulació d'Elements de la Pàgina	Tasca Inherent del Client: És la seva funció principal. Operacions com eliminar elements o canviar estils	No Aplicable: El servidor no té accés directe al DOM un cop la pàgina ha estat enviada al client

4.3. Complementarietat entre Client i Servidor¶

La conclusió final é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.

5. Navegadors i la Web¶

5.1. 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 .

5.1.1. Components Clau¶

Hipervincles i Navegació: Els documents posseeixen hipervincles que enllacen porcions de text o imatges a altres documents

Protocols i URLs: S'utilitza el protocol HTTP per a la comunicació, així com HTTPS (versió xifrada basada en SSL)

Estàndards: És imprescindible comprovar que el desenvolupament funcioni correctament en els principals navegadors i que el codi s'ajusti als estàndards HTML i XHTML

5.2. Principals Navegadors¶

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

Navegador	Motor de Renderitzat	Característiques Clau
Microsoft Edge	Motor de codi obert	Substitueix l'antic Internet Explorer; dissenyat per ser lleuger
Mozilla Firefox	Gecko	Lliure i de codi obert. Existeix Firefox Developer Edition per a desenvolupadors
Google Chrome	Blink (fork de WebKit)	Compilat amb base en components de codi obert
Safari	WebKit	Navegador d'Apple (Mac OS, iOS)
Opera	Blink	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 .

6. Eines de Desenvolupament i Millors Pràctiques¶

6.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 .

6.2. Selecció d'Eines Essencials¶

6.2.1. 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 :

Editors simples: Ideals per a modificacions ràpides (Notepad, Gedit)

Editors de text avançats: Ofereixen equilibri entre rendiment i funcionalitat amb ressaltat de sintaxi i autocompletat

Entorns de Desenvolupament Integrats (IDEs): Solucions completes per a projectes grans i complexos

Per a la majoria de projectes de desenvolupament web modern, es recomana explícitament l'ús de Visual Studio Code (gratuït) o WebStorm .

6.3. WebStorm: L'Eina de Desenvolupament del Curs¶

Durant el curs utilitzarem WebStorm com a entorn de desenvolupament integrat principal. WebStorm és un IDE multiplataforma desenvolupat per JetBrains, especialitzat en JavaScript, TypeScript i altres tecnologies web relacionades

.

6.3.1. Característiques Principals de WebStorm Asistència de Codi Intel·ligent:

Ofereix autocompletat de codi contextual i intelligent

Detecció d'errors en temps real

Sugerències contextuels que acceleren l'escriptura de codi

Depuració Integrada:

Facilita la depuració d'aplicacions tant del client com del servidor

Eines de depuració avançades directament des de l'IDE

Suport per a JavaScript, Node.js i altres tecnologies web

Integració amb Sistemes de Control de Versions:

S'integra perfectament amb Git, SVN i altres sistemes

Facilita la gestió de canvis i la col·laboració en equip

Suport per a Frameworks:

Suport extens per a frameworks populars com React, Angular, Vue.js

Plantilles i eines específiques per a cada framework

Assistència de codi especialitzada per a JSX i altres sintaxis

Navegació i Cerca Ràpides:

Funcionalitat "Search Everywhere" per buscar accions, arxius i símbols

Navegació intel·ligent per la base de codi

Capacitat de saltar ràpidament a definicions i usos

6.3.2. Llicències d'Estudiant¶

WebStorm ofereix llicències educatives gratuites per a estudiants i professors. Els estudiants poden utilitzar el All Products Pack de JetBrains (que inclou WebStorm, IntelliJ IDEA Ultimate, i totes les altres eines de JetBrains) de forma gratuïta amb fins educatius

.

Beneficis de la Llicència Educativa:

Accés complet a totes les funcionalitats de WebStorm

Renovació anual mentre es mantingui l'estatus d'estudiant

40% de descompte en llicències personals després de la graduació

Accés a eines professionals sense cost

Com Obtenir la Llicència:

Dirigir-se a la pàgina de llicències educatives de JetBrains
Sol·licitar amb el correu electrònic institucional
Verificar l'estatus d'estudiant
Descarregar i activar WebStorm amb la llicència educativa

6.3.3. Avantatges de WebStorm per a l'Aprenentatge¶

Entorn Professional: Permet als estudiants familiaritzar-se amb eines utilitzades en la indústria

Productivitat Millorada: Les eines intel·ligents acceleren l'aprenentatge i redueixen errors comuns

Suport Multi-llenguatge: Ideal per aprendre HTML, CSS, JavaScript i frameworks moderns

Integració amb Git: Facilita l'aprenentatge del control de versions des de l'IDE

6.4. 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

.

6.4.1. La Consola Web (F12)¶

La majoria de navegadors incorporen eines natives per facilitar el desenvolupament. La Consola Web, accessible prement F12, inclou diverses pestanyes per a la depuració :

Red (Xarxa): Registre de peticions HTTP

CSS: Anàlisi i errors CSS

JS: Anàlisi i errors JavaScript

Seguridad: Advertències de seguretat

Registro: Missatges enviats a window.console

6.5. 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

.

6.5.1. Beneficis del Control de Versions¶

Seguiment de Canvis: Registre complet de modificacions al llarg del temps

Col·laboració: Facilita el treball en equip i la gestió de conflictes Recuperació: Capacitat de recuperar versions anteriors del codi
Branching: Permet desenvolupar funcionalitats en paral·lel

6.6. Millors Pràctiques¶

6.6.1. 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 poden provocar problemes de compatibilitat entre navegadors
.

6.6.2. 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 la modularitat, permet la reutilització del codi i augmenta la mantenibilitat del projecte
.

6.6.3. 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 encara que JavaScript estigui desactivat. JavaScript s'hauria d'utilitzar per millorar l'experiència d'usuari, però no hauria de ser un requisit absolut per accedir al contingut bàsic
.

6.6.4. Separació de Contingut, Presentació i Comportament¶

Una de les millors pràctiques fonamentals del desenvolupament web modern és la separació clara entre

:

Contingut (HTML): Estructura i significat semàntic

Presentació (CSS): Aspecte visual i disseny

Comportament (JavaScript): Interactivitat i funcionalitat dinàmica

Aquesta separació facilita el manteniment, millora l'accessibilitat i permet una major flexibilitat en el desenvolupament.

7. Tecnologies Modernes i Tendències¶

7.1. Progressive Web Apps (PWA)¶

Les Progressive Web Apps representen una evolució natural de les aplicacions web tradicionals, combinant les millors característiques de les webs i les aplicacions mòbils

.

7.1.1. Principis de les PWA¶

Progressives: Funcionen per a tots els usuaris, sense importar l'elecció de navegador

Adaptables: S'adapten a qualsevol factor de formulari (escriptori, mòbil, tauleta)

Independents de la connectivitat: Funcionen offline o amb xarxes de mala qualitat

Actualitzades: Sempre actualitzades gràcies als service workers

Segures: Emeses via HTTPS per garantir la seguretat

7.2. Ecosistema JavaScript Modern¶

L'ecosistema de JavaScript ha crescut exponencialmente, oferint una àmplia varietat d'eines i frameworks per a diferents necessitats

:

7.2.1. Frameworks Frontend Populars¶

React.js: Biblioteca per a interfaces d'usuari desenvolupada per Facebook

Angular: Framework complet desenvolupat per Google

Vue.js: Framework progressiu conegut per la seva simplicitat

Svelte: Enfocament innovador que compila a JavaScript optimitzat

7.2.2. Ecosistema Backend¶

Node.js: Entorn d'execució JavaScript per al servidor

Express.js: Framework minimalista per a aplicacions web

Nest.js: Framework escalable inspirat en Angular

8. Conclusions¶

8.1. Síntesi dels Conceptes Clau¶

L'arquitectura client-servidor constitueix el fonament del desenvolupament web modern, proporcionant un marc sòlid per a la creació d'aplicacions escalables i eficients. La comprensió profunda d'aquesta arquitectura és essencial per a qualsevol desenvolupador web, ja que permet prendre decisions informades sobre la distribució de responsabilitats entre el client i el servidor.

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

L'elecció d'eines adequades, com WebStorm, i l'adopció de millors pràctiques són factors determinants per a l'èxit en el desenvolupament web. La integració d'eines professionals des de l'etapa d'aprenentatge prepara els estudiants per a un entorn de treball real i millora significativament la seva productivitat.

8.3. Perspectiva de Futur¶

El desenvolupament web continua evolucionant amb noves tecnologies com les Progressive Web Apps, frameworks moderns de JavaScript i eines de desenvolupament cada vegada més sofisticades. La formació en aquests conceptes fonamentals proporciona una base sòlida per adaptar-se a futures innovacions tecnològiques.

8.4. Recomanacions per a l'Aprenentatge¶

Dominar els Fonaments: HTML, CSS i JavaScript vanilla abans de passar a frameworks
Practicar amb Eines Professionals: Utilitzar WebStorm per familiaritzar-se amb IDEs industrials
Adoptar el Control de Versions: Integrar Git des del principi en tots els projectes
Seguir les Millors Pràctiques: Aplicar la separació de contingut, presentació i comportament
Mantenir-se Actualitzat: Seguir l'evolució de l'ecosistema JavaScript i les noves tecnologies web

Referències