UT01 Arquitectures Web

Durada i criteris d'avaluació

Durada estimada: 4 sessions

---

Resultat d'aprenentatge:

1. Selecciona les arquitectures i tecnologies de programació Web en entorn servidor, analitzant les seves capacitats i característiques pròpies.

Criteris d'avaluació:

1. S'han caracteritzat i diferenciat els models d'execució de codi en el servidor i en el client Web.
2. S'han reconegut els avantatges que proporciona la generació dinàmica de pàgines Web i les seves diferències amb la inclusió de sentències de guions a l'interior de les pàgines Web.
3. S'han identificat els mecanismes d'execució de codi en els servidors Web.
4. S'han reconegut les funcionalitats que aporten els servidors d'aplicacions i la seva integració amb els servidors Web.
5. S'han identificat i caracteritzat els principals llenguatges i tecnologies relacionats amb la programació Web en entorn servidor.
6. S'han verificat els mecanismes d'integració dels llenguatges de marques amb els llenguatges de programació en entorn servidor.
7. S'han reconegut i avaluat les eines de programació en entorn servidor.

Les arquitectures web defineixen la forma en què les pàgines d'un lloc web estan estructurades i enllaçades entre si. Les aplicacions web es basen en en model client-servidor.

Client / Servidor

Arquitectura Client Servidor

Un o diversos client accedeixen a un servidor. La noves arquitectures substitueixen el servidor per un balanceador de càrrega de manera que N servidors donen resposta a M clients.

En les aplicacions web, el client és el navegador web.

El client fa la petició (request normalment mitjançant el protocol GET mitjançant el port 80/443) i el servidor respon (response).

Pàgina web dinàmica

Si la pàgina web únicament conté HTML + CSS es considera una pàgina estàtica. Per a generar una pàgina dinàmica, on el contingut canvia, avui dia tenim dues alternatives:

• Utilitzar un llenguatge de servidor que generi el contingut, ja sigui mitjançant l'accés a una BD o serveis externs.
• Utilitzar serveis REST de tercers invocats des de JS.

Pàgina web dinàmica

Les tecnologies empleadadas (i els perfils de desenvolupament associats) per a la generació de pàgines dinàmiques són:

Perfil	Eina	Tecnologia
Front-end / client	Navegador Web	HTML + CSS + Javascript
Back-end / servidor	Servidor Web + BBDD	PHP, Python, Ruby, Java / JSP, .Net / .asp

Perfil Full-stack

En les ofertes de treball quan fan referència a un Full-stack developer, estan buscant un perfil que domina tant el front-end com el back-end.

Single Page Application

Avui dia, gran part del desenvolupament web està transicionando d'una arquitectura web client-servidor clàssica on el client realitza una anomenada al backend, per una arquitectura SPA on el client guanya molt major pes i segueix una programació reactiva que accedeix a serveis remots REST que realitzen les operacions (comunicandose mitjançant JSON).

Arquitectura tradicional vs SPA

Arquitectura de 3 capes

Cal distingir entre capes físiques (tier) i capes lògiques (layer).

Tier

Capa física d'una arquitectura. Suposa un nou element maquinari separat físicament. Les capes físiques més allunyades del client estan més protegides, tant per firewalls com per VPN.

Exemple d'arquitectura en tres capes físiques (3 tier):

• Servidor Web
• Servidor d'Aplicacions
• Servidor de base de dades

Arquitectura de tres capes físiques

Clúster en tiers

No confondre les capes amb la quantitat de servidors. Actualment es treballa amb arquitectures amb múltiples servidors en una mateixa capa física mitjançant un clúster, per a oferir tolerància a errors i escalabilitat horitzontal.

Layer

En canvi, les capes lògiques (layers) organitzen el codi respecte a la seva funcionalitat:

• Presentació
• Negoci / Aplicació / Procés
• Dades / Persistència

Com s'observa, cadascuna de les capes es pot implementar amb diferents llenguatges de programació i/o eines.

Arquitectura de tres capes físiques en tres lògiques

MVC

Model-View-Controller o Model-Vista-Controlador és un model d'arquitectura que separa les dades i la lògica de negoci respecte a la interfície d'usuari i el component encarregat de gestionar els esdeveniments i les comunicacions.

En separar els components en elements conceptuals permet reutilitzar el codi i millorar la seva organització i manteniment. Els seus elements són:

• Model: representa la informació i gestiona tots els accessos a aquesta, tant consultes com actualitzacions provinents, normalment, d'una base de dades. S'accedeix via el controlador.
• Controlador: Respon a les accions de l'usuari, i realitza peticions al model per a sol·licitar informació. Després de rebre la resposta del model, li envia les dades a la vista.
• Vista: Presenta a l'usuari de manera visual el model i les dades preparades pel controlador. L'usuari interactura amb la vista i realitza noves peticions al controlador.

Ho estudiarem en més detall en aprofundir en l'ús dels frameworks PHP.

Decisions de disseny

• Quina grandària té el projecte?
• Quins llenguatges de programació conec? Val la pena l'esforç d'aprendre un nou?
• Usaré eines de codi obert o eines propietàries? Quin és el cost d'utilitzar solucions comercials?
• Programaré l'aplicació jo només o formaré part d'un grup de programadors?
• Conte amb algun servidor web o gestor de base de dades disponible o puc decidir lliurement utilitzar el que cregui necessari?
• Quin tipus de llicència aplicaré a l'aplicació que desenvolupi?

Eines

Servidor Web

Programari que rep peticions HTTP (GET, POST, DELETE, ...). Retorna el recurs sol·licitat (HTML, CSS, JS, JSON, imatges, etc...)

El producte més implantant és Apache Web Server (https://httpd.apache.org/), creat en 1995.

• Programari lliure i multiplataforma
• Sistema de mòduls dinàmics → PHP, Python, Perl
• Utilitza l'arxiu .htaccess per a la seva configuració

En l'actualitat, Apache està perdent mercat respecte a Nginx (https://www.nginx.com). Es tracta d'un producte més modern (2004) i que en determinats escenaris té millor rendiment que Apache.

• Comparativa servidors web: https://w3techs.com/technologies/history_overview/web_server/ms/q

Servidor d'Aplicacions

• Programari que ofereix serveis addicionals als d'un servidor web:
  • Clustering
  • Balanceig de càrrega
  • Tolerància a fallades
• Tomcat (http://tomcat.apache.org/) és el servidor d'aplicacions open source i multiplataforma de referència per a una arquitectura Java.
  • Contén un contenidor Web Java que interpreta Servlets i JSP.

Info

Tant els servidors web com els servidors d'aplicacions els estudiarem en profunditat en el mòdul de "Desplegament d'Aplicacions Web".

Llenguatges en el servidor

Les aplicacions que generen les pàgines web es programen en algun dels següents llenguatges:

• PHP
• JavaEE: Servlets / JSP
• Python
• ASP.NET → Visual Basic .NET / C#
• Ruby
• ...

JavaEE

Java Enterprise Edition és la solució Java per al desenvolupament d'aplicacions enterprise. Ofereix una arquitectura molt completa i complexa, escalable i tolerant a fallades. Plantejada per a aplicacions per a grans sistemes.

PHP

• Llenguatge de propòsit general dissenyat per al desenvolupament de pàgines web dinàmiques
• Al principi, llenguatge no tipado.
• Actualment en la versió 8. Es recomana almenys utilitzar una versió superior a la 7.0.
• Codi embegut en el HTML
• Instruccions entre etiquetes <?php y ?>
  • Per a generar codigo dins de PHP, podem usar la instrucció echo
• Multitud de llibreries i frameworks:
  • Laravel, Symfony, Codeigniter, Zend

La seva documentació és bastant completa: https://www.php.net/manual/es/index.php

El següent mapa mental mostra un resum dels seus elements:

Elements del llenguatge PHP

Durant les següents unitats estudiarem PHP en profunditat.

Posada en marxa

Per a poder treballar amb un entorn de desenvolupament local, hem de preparar el nostre entorn de desenvolupament amb les eines comentades. Al llarg del curs utilitzarem la versió 8 de PHP.

XAMPP

XAMPP (https://www.apachefriends.org/es/index.html) és una distribució composta amb el programari necessari per a desenvolupar en entorn servidor. Es compon de les següents eines sobre la base de les seves sigles:

• X per al sistema operatiu (per aquest motiu es conegui tamnbién com LAMP o WAMP).
• A per a Apache.
• M per a MySQL / MariaDB. També inclou phpMyAdmin per a l'administració de la base de dades des d'una interfície web.
• P per a PHP.
• l'última P per a Perl.

Des de la pròpia pàgina es pot descarregar l'arxiu executable per al sistema operatiu del nostre ordinador. Es recomana llegir la FAQ de cada sistema operatiu amb instruccions per a la seva posada en marxa.

Docker

Docker (https://www.docker.com) és un gestor de contenidors, considerant un contenidor com un mètode de virtualització del sistema operatiu.

L'ús de contenidors requereix menys recursos que una màquina virtual, per tant, el seu llançament i detenció són més ràpids que les màquines virtuals.

Així doncs, Docker permet crear, provar i implementar aplicacions ràpidament, a partir d'una sèrie de plantilles que es coneixen com a imatges de Docker.

Per a això és necessari tenir instal·lat Docker Desktop (https://www.docker.com/products/docker-desktop) en els nostres entorns de desenvolupament (el qual ja inclou en nucleo de Docker i l'eina docker compose). En els ordinadors de l'aula ja està instal·lat. Per a instal·lar-ho a casa, en el cas de Windows, és necessari instal·lar prèviament WSL 2, el qual és un subsistema de Linux dins de Windows.

Al llarg del curs anirem creant diferents contenidors amb els serveis necessaris, de manera que cada vegada només treballem amb el programari mínim.

Versions

Al llarg del curs usarem PHP 8.0. Respecte a Docker, per a escriure les anotacions hem utilitzat la version 20.10 i la version 2.19 de docker compose. Finalment, la versió de Docker Desktop que hem utilitzat és la 4.0.

Plantilla Servidor Web + PHP

Docker es basa en l'ús d'imatges per a crear contenidors. Docker Compose simplifica el treball amb múltiples contenidors, i per això, per a facilitar el arraque, ens centrarem en Docker Compose utilitzant una plantilla que únicament contindrà com a serveis Apache/Nginx i PHP.

Per a això, emplenarem l'arxiu docker-compose.yaml amb:

Apache i PHPNginx i PHP

# Services
services:
  # Apache + PHP
  Apache_php:
    image: php:8-Apache
    # Preparem un volum per a emmagatzemar el nostre codi
    volumes:
      - ./src/:/var/www/html
    expose:
      - 80
    ports:
      - 80:80

# Services
services:

  nginx:
    image: nginx:1.19
    ports:
      - 80:80
    volumes:
      - ./src:/var/www/php
      - ./.docker/nginx/conf.d:/etc/nginx/conf.d # carreguem la configuració d'un fitxer extern
    depends_on:
      - php   # enllacem nginx amb php

  php:
    image: php:8.0-fpm
    working_dir: /var/www/php
    volumes:
      - ./src:/var/www/php

Dins de la carpeta que contingui aquest arxiu, hem de crear una carpeta src on col·locarem el nostre codi font. Per a facilitar la posada en marxa, teniu la plantilla de Apache/PHP (versió 2 amb a2enmod rewrite) o Nginx/PHP disponible per a la seva descàrrega.

Quan estiguem llestos, llançarem el servei mitjançant:

docker-compose up -d

Si volem veure el contingut dels arxius de log del servei utilitzarem:

docker-compose logs -f

Per a copiar un arxiu des del nostre sistema a l'interior del contenidor:

docker cp ./miFichero idContenedor:/tmp

I a l'inrevés, si volem consultar un arxiu contingut dins d'un contenidor, el copiarem al nostre sistema:

docker cp idContenedor:/tmp/archivoAConsultar.txt ./

Finalment, si volem accedir a un terminal interactiu dins del contenidor:

docker exec -it nombreContenedor bash

Altres comandos que podem arribar a utilitzar són:

• docker ps: Veure els contenidors que es estan executant
• docker ps -a: Veure tots els contenidors
• docker start nombreContenedor: Arrencar un contenidor
• docker images: Veure les imatges que tenim descarregades

Una altra forma més senzilla per a llançar de nou els contenidors i gestionar-los una vegada creats és utilitzar la interfície gràfica que ofereix Docker Desktop:

Arrencada de contenidor mitjançant Docker Desktop

Docker stack

Existeixen diverses opcions mitjançant Docker que ofereixen solucions completes i empaquetes per a tot el stack de desenvolupament. En posteriors sessions utilitzarem tant Devilbox (http://devilbox.org) com Laradock (https://laradock.io)

Però vull saber com funciona...

En el mòdul de Desplegament d'aplicacions estudiareu en profunditat, a més de Docker, Apache i altres serveis que ens serviran d'ajuda per al desenvolupament en entorn servidor.

Entorn de desenvolupament

En aquest curs utilitzarem PhpStorm i IntelliJ (https://www.jetbrains.com/) atès que podem fer servir llicències d'Education, encara que també es podria utilitzar Visual Studio Code (https://code.visualstudio.com) com a entorn de desenvolupament (IDE). Una altra possibilitat és utilitzar Eclipse, encara que és un entorn bastant pesat.

Hola Món

I com no, el nostre primer exemple serà un Hola Món en PHP.

Si nomenem l'arxiu com index.php, en accedir a http://localhost automàticament carregarà el resultat:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hola Món</title>
</head>
<body>
    <?php
        echo "Hola Món";
    ?>
</body>
</html>

Referencies

• Curs d'introducció a Docker, per Sergi García Barea* : https://sergarb1.github.io/CursoIntroduccionADocker/
• Article Arquitectures Web i la seva evolució
• Lloc web d'Aitor Medrano https://aitor-medrano.github.io/