Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF 1 A1.1 – Arquitectura de programació en entorn client.

Índice de contenido
1.Introducció: definició aplicació web..................................................................2
2.Nivells d’arquitectures d’una aplicació web......................................................2
2.1.Arquitectura clàssica......................................................................................2
2.2.Arquitectura tres nivells.................................................................................3
2.3.Altres opcions arquitectòniques.....................................................................4
a)Arquitectura quatre nivells................................................................................4
b)Arquitectura hexagonal.....................................................................................5
3.Tipus de clients segons lògica de negoci.........................................................6
4.Tipus llenguatges en entorn client....................................................................7
4.1.JavaScript......................................................................................................7
5.Per saber-ne més.............................................................................................8

Pàgina 1 de 8
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF 1 A1.1 – Arquitectura de programació en entorn client.

1. Introducció: definició aplicació web.

El que distingeix una aplicació web d'una simple lloc web resideix en la possibilitat que
ofereix a l'usuari d'actuar sobre la lògica de negoci al servidor. Per lògica de negoci s'entén un
conjunt de processos que implementen les regles de funcionament de l'aplicació Web. Per
exemple, en el cas d'una botiga web, la lògica de negoci són els processos que implementen el
procediment de compra: selecció de productes, carro de la compra, confirmació de compra,
pagament, seguiment del lliurament, ...

Però l'important és que als usuaris se'ls ofereix la possibilitat d'actuar sobre la lògica
de negoci. Per exemple, en el cas anterior, l'usuari pot enregistrar-se amb el que es crea un
perfil personalitzat, es fa un seguiment de les seves compres al llarg d'una sessió (cistella de la
compra) però també a través de sessions (perfil de comprador), amb les seves accions es
modifiquen estocs, etc .,...

Exemple: no es considera aplicació Web un lloc de cerca que únicament ofereix un

formulari per introduir els criteris, realitza un consulta a base de dades i retorna els resultats
obtinguts, sense que això causi canvis en l'estat intern del cercador.

2. Nivells d’arquitectures d’una aplicació web.

2.1. Arquitectura clàssica.

L'arquitectura d'una aplicació Web és similar a la d'un lloc web, es basa en el model
Client / Servidor. Com en el cas del lloc web, tenim el navegador a la part client, el servidor web
en la part del servidor i una connexió de xarxa. Però en les aplicacions web cal considerar que
existeix una lògica de negoci sensible a les interaccions de l'usuari.

Arquitectura bàsica Client / Servidor

Originalment la Web únicament comptava amb continguts estàtics. La necessitat

d'oferir serveis més sofisticats a través d'aquest mitjà va portar a solucions tecnològiques que
permetessin cert grau d'interacció amb el servidor més enllà de sol·licitar una pàgina en
concret. Els CGIs (Common Gateway Interface) van ser les primeres opcions en aquest sentit.
Permetien interactuar amb codi executable en el servidor des del navegador. A través de l'URL
sol·licitada pel navegador es passaven els paràmetres d'entrada per al codi executable i aquest
retornava una pàgina HTML amb la resposta. Aquest mateix mètode s'utilitza en tecnologies
similars com ISAPI, NSAPI o Java Servlets.

Per exemple: http://mm.musicbrainz.org/newsearch.html?limit=25&table=Track &

search = hit

A mesura que la sofisticació dels serveis oferts via web ha anat augmentant, s'ha anat
afegint, almenys a nivell lògic i no necessàriament a nivell físic, nous elements en la
arquitectura de les aplicacions web (per exemple el servidor d'aplicacions, bases de dades,...).
Les noves disposicions d'elements s'han basat en patrons arquitectònics del context de les
aplicacions distribuïdes.

Pàgina 2 de 8
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF 1 A1.1 – Arquitectura de programació en entorn client.
Patró arquitectònic: un patró arquitectònic és qualsevol esquema relatiu a la
configuració d'un sistema en el seu conjunt, no relatiu a una part d'ell. Per tant s'aplica a una
escala a la que la unitat d'organització és molt més gran que la classe i més propera als
programes o executables.

2.2. Arquitectura tres nivells.

En les aplicacions distribuïdes, partint del model Client / Servidor, en augmentar la
complexitat dels processos es pot arribar a tenir una arquitectura amb lògica anomenada
"Client Pesat" degut a posar la major part del codi necessari per dur a terme els processos en
el client, aquest ha de descarregar del servidor les dades necessàries per dur-los a terme. Això
pot ser factible però pot generar diferents incidències:

- La xarxa pateix una gran càrrega a causa de les múltiples descàrregues de cadascun
dels clients.

- La gran dependència en el rendiment del maquinari en el costat del client.

Client / Servidor amb clients heterogenis.

Les arquitectura en tres nivells divideix la funcionalitat per optimitzar l'ús de recursos.
Es aconsegueixen solucions molt més flexibles i escalables. Els tres nivells són:

- Client: conté els components d'usuari que són únics per a cada un d'ells. Això és la
lògica d'aplicació específica de l'usuari i la interfície.

- Aplicació: constitueix un entorn multiusuari i manté les parts compartides de

l'aplicació. Les operacions amb un ús intensiu de dades s'han d'executar en aquest nivell.
També és el punt on es pot dur a terme la coordinació de transaccions (operacions de múltiples
usuaris).

- Emmagatzematge: és nivell de la base de dades. S'especialitza en donar un servei

de persistència a les dades de l'aplicació i permet gestionar grans volums d'ells.

Pàgina 3 de 8
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF 1 A1.1 – Arquitectura de programació en entorn client.

Arquitectura en tres capes: client, aplicació i emmagatzematge

En mantenir bona part del codi en el nivell intermedi, l'aplicació s'aïlla de la interfície de
usuari i de la base de dades. Per tant, es poden fer canvis en el codi en el nivell de aplicació
sense que això afecti a la resta. A més, les dades estan centralitzats i fàcilment accessibles
sense necessitat de moure'ls completament fins al client.

Aquest model s'utilitza àmpliament en l'entorn web. S'incorpora la figura del servidor de
aplicacions que permet que el sistema gestioni la lògica de negoci i l'estat. Com que és una
aplicació Web, la interfície amb el client segueix sent bàsicament HTTP i per tant el servidor
d'aplicacions incorpora un servidor web o utilitza un d'extern. La divisió de l'aplicació en nivells
suposa la necessitat d'establir interfícies entre elles. Si a més es vol construir una arquitectura
independent dels fabricants la millor opció és utilitzar elements que implementin interfícies
estàndard.

Per a la interfície entre el servidor d'aplicacions i la base de dades les opcions són
múltiples, depenent del llenguatge de programació (Java, C, PHP, VisualBasic ,...), el tipus de
base de dades (Relacional, XML ,...), la base de dades concreta (MySQL, Oracle, existeix ,...),
etc. En qualsevol cas amb cada configuració ha més d'una opció i el normal és plantejar
l'elecció després de definir la BD o el llenguatge de programació a utilitzar.

Pel que fa a la interfície entre el client i el servidor d'aplicacions, l'opció bàsica segueix
sent HTTP. Hi ha altres opcions que permeten un major grau d'interactivitat entre el codi en el
client i al servidor. Aquestes opcions permeten definir tres arquitectures de client Web.

2.3. Altres opcions arquitectòniques.

a) Arquitectura quatre nivells.

Partint del model en tres nivells, s'han definit arquitectures derivades d'aquest patró.
L'arquitectura en quatre nivells va néixer com una evolució de la de tres per a aplicacions amb
interfícies d'usuari complexes. Per a això integra el patró de disseny MVC (Model-Vista-
Controlador).

Els patrons de disseny s'apliquen sobre un nivell de granularitat més petit que els
arquitectònics, sobre conjunts de classes. El patró de disseny MVC defineix conjunts de
classes anomenades models, vistes i controladors respectivament:

- Model: les classes de tipus model representen els objectes del domini de l'aplicació.
Exemple: producte, usuari, cistella de la compra, ...

Pàgina 4 de 8
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF 1 A1.1 – Arquitectura de programació en entorn client.
- Vista: les de tipus vista són elements de presentació d'informació als actors de la
aplicació. Exemple: compra actual, ...

- Controlador: les de tipus controlador gestionen els canvis del model en resposta a
les accions dels actors. Exemple: afegir producte a la cistella de la compra, ...

Patró de disseny Model-Vista-Controlador

En incorporar el patró MVC a aquest patró arquitectònic s'obtenen quatre nivells:

- Vista: conté els elements d'interfície que presenten la informació. S'associen a les
vistes del patró MVC, encara que aquest nivell també pot incloure elements de tipus
controlador senzills. Quan s'aplica a l'entorn web es tracta de pàgines HTML (possiblement
amb scripts), JSP, ASP, ...

- Controlador: es tracta dels components que mitjancen entre els elements de la

interfície i els del model del domini. Són responsables del flux d'aplicació i controlen la
navegació entre vistes. En l'entorn web són CGIs, Servlets, ...

- Domini: són els objectes que modelen el domini de l'aplicació. Parlant del context
web són EJBs (Enterprise JavaBeans) o simples classes Java, C ++,...

- Infraestructura: inclou l'emmagatzematge en bases de dades.

b) Arquitectura hexagonal.

En aquesta arquitectura no es defineix una part frontal cap a l'usuari (front-end) i una
part posterior (back-end) com en els patrons arquitectònics anteriors. Per contra, es considera
que la aplicació es troba situada al centre i que interacciona amb la resta a través d'una sèrie
de transformadors que adapten els missatges de l'aplicació a l'element amb el qual es
interacciona en cada cas. Aquests elements poden ser terminals d'usuari, llistats, bases de
dades, altres aplicacions...

Pàgina 5 de 8
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF 1 A1.1 – Arquitectura de programació en entorn client.

Patró arquitectònic hexagonal

Aquesta arquitectura s'adapta molt bé a les solucions basades en l'ús de XML, que
proporciona un format comú d'interacció de l'aplicació amb l'exterior, i XSL, que facilita la
implementació dels transformadors.

3. Tipus de clients segons lògica de negoci.

- Client Web lleuger: tota la lògica de negoci es mantindrà al servidor. Això permet
tenir clients que només requereixen l'ús d'un navegador web senzill. Bàsicament HTML,
formularis per a la entrada de dades i llenguatges de script (VBScript, JavaScript,...) per al
control previ dels dades introduïdes, p.e. validar un NIF. Aquesta és la solució que suposa una
major càrrega de procés i comunicacions, la interacció entre el client i el servidor web es basa
en una successió de pregunta / resposta síncrones.

- Client Web pesat: part de la lògica de negoci es realitza en el client. Applets,

ActiveX, ... per al encapsulat del codi que permet la seva execució en el navegador web del
client. Per a la comunicació amb el servidor es segueix utilitzant HTTP.

- Client Web distribuït: l'aplicació es desenvolupa en base a l'ús d'objectes distribuïts.

Per a la comunicació entre objectes distribuïts s'utilitza CORBA / IIOP, DCOM o Java RMI.
Aquesta arquitectura suposa la major càrrega de procés i comunicacions.

Pàgina 6 de 8
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF 1 A1.1 – Arquitectura de programació en entorn client.

Interfícies en l'arquitectura de tres nivells segons arquitectura client web

L'elecció de l'arquitectura de client Web s'ha de fer tenint en compte els aspectes de
risc per al rendiment comentats per al problema del "Client Pesat". La capacitat de la xarxa
d'absorbir la transferència de dades cap al client i la configuració del maquinari també del
client.

4. Tipus llenguatges en entorn client.

- Llenguatges de marques: HTML, XHTML i XML.

- Java: applets.
- Scripting: JavaScript / JScript, VBscript.
- Altres tecnologies: FLASH.

4.1. JavaScript.
JavaScript és un llenguatge de programació interpretat, basat amb l'estàndard
ECMAScript. Es defineix com orientat a objectes, basat en prototips i dinàmic.

S'utilitza principalment en l’entorn client (client-side), implementat com a part d'un

navegador web permetent millores en la interfície d'usuari i pàgines web dinàmiques, encara
que existeix una forma de JavaScript del costat del servidor (Server-side JavaScript o SSJS). El
seu ús en aplicacions externes a la web, per exemple en documents PDF, aplicacions
d'escriptori (majoritàriament widgets) és també significatiu.

JavaScript es va dissenyar amb una sintaxi similar al C, encara que adopta noms i
convencions del llenguatge de programació Java. No obstant això Java i JavaScript no estan
relacionats i tenen semàntiques i propòsits diferents.

Tots els navegadors moderns interpreten el codi JavaScript integrat en les pàgines
web. Per interactuar amb una pàgina web es proveeix al llenguatge JavaScript d'una
implementació del Document Object Model (DOM).

Tradicionalment es venia utilitzant en pàgines web HTML per realitzar operacions i

únicament en el marc de l'aplicació client, sense accés a funcions del servidor. JavaScript

Pàgina 7 de 8
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF 1 A1.1 – Arquitectura de programació en entorn client.
s'interpreta en l'agent d'usuari, al mateix temps que les sentències van descarregant juntament
amb el codi HTML.

JavaScript va ser desenvolupat originalment per Brendan Eich de Netscape amb el

nom de Mocha, el qual va ser renombrat posteriorment a LiveScript, per finalment quedar com
JavaScript. El canvi de nom va coincidir aproximadament amb el moment en què Netscape va
afegir suport per a la tecnologia Java en el seu navegador web Netscape Navigator en la versió
2.0B3 al desembre de 1995. La denominació va produir confusió, donant la impressió que el
llenguatge és una prolongació de Java, i s'ha caracteritzat per molts com una estratègia de
màrqueting de Netscape per obtenir prestigi i innovar en el que eren els nous llenguatges de
programació web.

«JavaScript» és una marca registrada de Oracle Corporation. És usada amb llicència

pels productes creats per Netscape Communications i entitats actuals com la Fundació Mozilla.

Microsoft va donar com a nom al seu dialecte Javascript «JScript», per evitar
problemes relacionades amb la marca. JScript va ser adoptat en la versió 3.0 d'Internet
Explorer, alliberat l'agost de 1996, i va incloure compatibilitat amb l'Efecte 2000 amb les
funcions de data, una diferència dels que es basaven en aquest moment. Els dialectes poden
semblar tan similars que els termes «JavaScript» i «JScript» sovint s'utilitzen indistintament,
però l'especificació de JScript és incompatible amb la de ECMA en molts aspectes.

Per evitar aquestes incompatibilitats, el World Wide Web Consortium va dissenyar

l'estàndard Document Object Model (DOM, o Model d'Objectes del Document en espanyol),
que incorporen el Konqueror, les versions 6 d'Internet Explorer i Netscape Navigator, Opera la
versió 7, Mozilla Application Suite i Mozilla Firefox des de la primera versió.

El 1997 els autors van proposar JavaScript perquè fos adoptat com a estàndard de
l'European Computer Manufacturers 'Association ECMA, que malgrat el seu nom no és
europeu sinó internacional, amb seu a Ginebra. El juny de 1997 va ser adoptat com un
estàndard ECMA, amb el nom de ECMAScript. Poc després també com un estàndard ISO.

5. Per saber-ne més.

- En el moodle hi és penjat el document: “Ecma-262.pdf” ECMAScript Language
Specification, on es detalla els estàndards del llenguatge JavaScript.
- http://es.wikipedia.org/wiki/JavaScript

Pàgina 8 de 8