Arquitectura de la Web — JS: Desarrollo web

• Cómo funciona el protocolo HTTP
• Cómo el protocolo HTTP funciona en diferentes idiomas

Los sitios web modernos se desarrollan en muchos idiomas y utilizan diferentes tecnologías, pero los principios de su diseño son los mismos. Esto sucede porque la estructura interna de los sitios web está determinada por la arquitectura web.

Está basada en el protocolo HTTP:

Precisamente sobre eso hablaremos en esta lección.

Cómo funciona el protocolo HTTP

La interacción con cualquier sitio web se reduce a los siguientes pasos:

1. El usuario solicita una página web.
2. El navegador realiza una solicitud HTTP al servidor web en un servidor remoto.
3. El servidor web devuelve el contenido de la página en la respuesta HTTP.
4. El navegador renderiza la página del sitio.
5. El usuario hace clic en un enlace en el sitio y todo el proceso se repite nuevamente.

Cada uno de estos ciclos incluye una sesión HTTP:

• Solicitud HTTP
• Respuesta HTTP

La forma más sencilla de ver una sesión HTTP es usar la utilidad curl:

# Solicitud
curl -v --head https://app.codica.la

# Aquí se está procesando la solicitud en el servidor
* Trying 174.66.43.105:443...

# Respuesta
> HEAD / HTTP/2
> Host: app.codica.la
> user-agent: curl/7.68.0
> accept: */*
>
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* old SSL session ID is stale, removing
* Connection state changed (MAX_CONCURRENT_STREAMS == 256)!
< HTTP/2 200
HTTP/2 200
< date: Wed, 09 Feb 2022 07:13:32 GMT
date: Wed, 09 Feb 2022 07:13:32 GMT
< content-type: text/html; charset=utf-8
content-type: text/html; charset=utf-8
...

<
* Connection #0 to host app.codica.la left intact

Cómo el protocolo HTTP funciona en diferentes idiomas

El principio de interacción con el sitio web no depende del lenguaje en el que esté desarrollado. En cualquier caso, el sitio ve una solicitud que necesita procesarse y devolver una respuesta en forma de HTML. Al mismo tiempo, el formato de HTML para una solicitud específica está determinado por la propia solicitud, es decir, la página solicitada y varios parámetros HTTP.

En otras palabras, el código del sitio es un conjunto de controladores para diferentes páginas, los cuales aceptan solicitudes entrantes, forman una respuesta y la devuelven. A continuación, examinaremos ejemplos en diferentes idiomas. Incluso si no conoces la sintaxis, puedes captar la estructura general de todos los ejemplos de código y encontrar la función-controlador asignada a una página específica.

PHP

<?php

use Slim\Factory\AppFactory;
$app = AppFactory::create();

$app->get('/', function ($request, $response) {
    return $response->write('Welcome to Slim!');
});

$app->get('/acerca', function ($request, $response) {
    return $response->write('About My Site');
});

$app->run();

Ruby

require 'sinatra'
get '/frank-dice' do
  'Put this in your pipe & smoke it!'
end

Python

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
  return "Hello World!"

Java

import io.javalin.Javalin;

public class HelloWorld {
    public static void main(String[] args) {
        Javalin app = Javalin.create().start(7000);
        app.get("/", ctx -> ctx.result("Hello World!"));
    }
}

JavaScript

import Fastify from 'fastify';
const app = Fastify();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

Los sitios web reales son mucho más complejos, pero en su base siempre está el binomio "solicitud-respuesta" de esta lección. Es precisamente esto lo que determina la estructura general de cualquier sitio, escrito en cualquier idioma.

Trabajo independiente

1. Ejecuta la solicitud curl --head https://app.codica.la. Examina los encabezados enviados y recibidos.
2. Abre la consola de desarrollador en tu navegador, ve a la pestaña Network (Red) y carga https://app.codica.la en dicha pestaña. Investiga qué solicitudes hace el sitio (y con qué encabezados), así como lo que recibe en respuesta.