Cómo funciona la Web: un manual para los recién llegados al desarrollo web (o cualquiera, en realidad)

Si recién se está iniciando en el desarrollo web, es probable que crea que sabe cómo funciona la web, al menos en un nivel básico.

… Pero luego intentas explicar cómo funciona un sitio web básico y te quedas en blanco. ¿Qué significa una dirección IP nuevamente? ¿Cómo funciona exactamente el modelo “cliente-servidor”?

Los marcos de desarrollo son poderosos en estos días. Tan poderoso, de hecho, que es fácil para nosotros, los recién llegados, perder de vista los conceptos básicos de cómo funciona la web, ya sabes, *. *

Sé que lo hice. No es una pena admitirlo: la web es complicada, y solo cuando comienzas a diseñar en el backend te das cuenta de lo importantes que son esos fundamentos. (De todos modos, si desea crear aplicaciones web que realmente funcionen).

Así que me he encargado de escribir una guía de campo de cuatro partes sobre los conceptos básicos intimidantes que todo el mundo debería tener en cuenta, ya sea que se esté sumergiendo en una carrera en desarrollo web o simplemente esté interesado en aprender:

Parte 1: Cómo funciona la web

Parte 2: Estructura de una aplicación web

Parte 3: HTTP y REST

Parte 4: ejemplos de código de interacciones cliente-servidor

Una búsqueda web básica

Comencemos en algún lugar en el que todos hemos estado antes: escriba "www.github.com" en la barra de direcciones de su navegador y vea cómo se carga la página.

Por simple que parezca esa transacción, hay un montón de magia sucediendo bajo el capó. Vamos a sumergirnos en ello.

Definición de partes de la web

Comprender la web es intimidante porque hay mucha jerga. Desafortunadamente, parte de esa jerga es fundamental para comprender el resto de esta publicación.

Estos son los términos más importantes que debe comprender si desea asimilar los secretos de la World Wide Web:

Cliente: una aplicación, como Chrome o Firefox, que se ejecuta en una computadora y está conectada a Internet. Su función principal es tomar las interacciones del usuario y traducirlas en solicitudes a otra computadora llamada servidor web. Aunque normalmente usamos un navegador para acceder a la web, puede pensar en toda su computadora como la pieza "Cliente" del modelo cliente-servidor. Cada computadora cliente tiene una dirección única llamada dirección IP que otras computadoras pueden usar para identificarla.

Servidor: una máquina que está conectada a Internet y también tiene una dirección IP. Un servidor espera las solicitudes de otras máquinas (por ejemplo, un cliente) y las responde. A diferencia de su computadora (es decir, el cliente) que también tiene una dirección IP, el servidor tiene un software de servidor especial instalado y en ejecución que le indica cómo responder a las solicitudes entrantes de su navegador. La función principal de un servidor web es almacenar, procesar y entregar páginas web a los clientes. Hay muchos tipos de servidores, incluidos servidores web, servidores de bases de datos, servidores de archivos, servidores de aplicaciones y más. (En esta publicación, estamos hablando de servidores web).

Dirección IP: dirección de protocolo de Internet. Un identificador numérico de un dispositivo (computadora, servidor, impresora, enrutador, etc.) en una red TCP / IP. Cada computadora en Internet tiene una dirección IP que utiliza para identificarse y comunicarse con otras computadoras. Las direcciones IP tienen cuatro conjuntos de números separados por puntos decimales (por ejemplo, 244.155.65.2). Esto se denomina "dirección lógica". Para localizar un dispositivo en la red, el software del protocolo TCP / IP convierte la dirección IP lógica en una dirección física. Esta dirección física (es decir, la dirección MAC) está integrada en su hardware.

ISP: Proveedor de servicios de Internet. El ISP es el intermediario entre el cliente y los servidores. Para el propietario típico, el ISP suele ser una "empresa de cable". Cuando su navegador recibe una solicitud suya para ir a www.github.com, no sabe dónde buscar www.github.com. Por lo tanto, el trabajo del ISP es realizar una búsqueda de DNS (Sistema de nombres de dominio) para preguntar en qué dirección IP está configurado el sitio que está intentando visitar.

DNS: Sistema de nombres de dominio. Una base de datos distribuida que realiza un seguimiento de los nombres de dominio de las computadoras y sus correspondientes direcciones IP en Internet. No se preocupe por el funcionamiento de una “base de datos distribuida” por ahora: solo sepa que el DNS existe para que los usuarios puedan ingresar www.github.com en lugar de una dirección IP.

Nombre de dominio: se utiliza para identificar una o más direcciones IP. Los usuarios utilizan el nombre de dominio (por ejemplo, www.github.com) para acceder a un sitio web en Internet. Cuando escribe el nombre de dominio en su navegador, el DNS lo usa para buscar la dirección IP correspondiente para ese sitio web determinado.

TCP / IP: Protocolo de control de transmisión / Protocolo de Internet. El protocolo de comunicaciones más utilizado. Un "protocolo" es simplemente un conjunto estándar de reglas para hacer algo. TCP / IP se utiliza como estándar para transmitir datos a través de redes.

Número de puerto: un entero de 16 bits que identifica un puerto específico en un servidor y siempre está asociado con una dirección IP. Sirve como una forma de identificar un proceso específico en un servidor al que se pueden reenviar las solicitudes de red.

Host: una computadora conectada a una red; puede ser un cliente, un servidor o cualquier otro tipo de dispositivo. Cada host tiene una dirección IP única. Para un sitio web como www.google.com, un host podría ser el servidor web que sirve las páginas del sitio web. A menudo hay una confusión entre un host y un servidor, pero tenga en cuenta que son dos cosas diferentes. Los servidores son un tipo de host, son una máquina específica. Por otro lado, un anfitrión podría referirse a una organización completa que proporciona un servicio de alojamiento para mantener múltiples servidores web. Puede ejecutar un servidor desde un host en ese sentido.

HTTP: Protocolo de transferencia de hipertexto. El protocolo que utilizan los navegadores web y los servidores web para comunicarse entre sí a través de Internet.

URL: localizadores uniformes de recursos. Las URL identifican un recurso web en particular. Un ejemplo simple es //github.com/someone. La URL especifica el protocolo ("https"), el nombre de host (github.com) y el nombre del archivo (la página de perfil de alguien). Un usuario puede obtener el recurso web identificado por esta URL a través de HTTP desde un host de red cuyo nombre de dominio es github.com. (trabalenguas mucho ?!)

El viaje del código a la página web

Muy bien, ahora que tenemos las definiciones esenciales fuera del camino, repasemos esa búsqueda de Github para ver cómo pasamos de una URL escrita en una barra de direcciones a una página web en ejecución:

1) Escribe una URL en su navegador

2) El navegador analiza la información contenida en la URL. Esto incluye el protocolo ("https"), el nombre de dominio ("github.com") y el recurso ("/"). En este caso, no hay nada después de ".com" para indicar un recurso específico, por lo que el navegador sabe que debe recuperar solo la página principal (índice)

3) El navegador se comunica con su ISP para realizar una búsqueda DNS de la dirección IP del servidor web que aloja www.github.com. El servicio DNS se pondrá en contacto primero con un servidor de nombres raíz, que busca en //www.github.com y responde con la dirección IP de un servidor de nombres para el dominio de nivel superior ".com". Esta dirección se envía de vuelta a su servicio de DNS. El servicio DNS realiza otro acercamiento al servidor de nombres ".com" y le solicita la dirección de //www.github.com.

fuente: //technet.microsoft.com/en-us/library/bb962069.aspx

4) Una vez que el ISP recibe la dirección IP del servidor de destino, la envía a su navegador web

5) Su navegador toma la dirección IP y el número de puerto dado de la URL (el protocolo HTTP predeterminado es el puerto 80 y HTTPS el puerto 443) y abre una conexión de socket TCP. En este punto, su navegador web y servidor web finalmente están conectados.

6) Su navegador web envía una solicitud HTTP al servidor web para la página web HTML principal de www.github.com.

7) El servidor web recibe la solicitud y busca esa página HTML. Si la página existe, el servidor web prepara la respuesta y la envía de vuelta a su navegador. Si el servidor no puede encontrar la página solicitada, enviará un mensaje de error HTTP 404, que significa "Página no encontrada".

8) Su navegador web toma la página HTML que recibe y luego la analiza haciendo un escaneo completo de la cabeza a los pies en busca de otros activos que se enumeran, como imágenes, archivos CSS, archivos JavaScript, etc.

9) Para cada activo enumerado, el navegador repite todo el proceso anterior, realizando solicitudes HTTP adicionales al servidor para cada recurso.

10) Una vez que el navegador haya terminado de cargar todos los demás activos que se enumeraron en la página HTML, la página finalmente se cargará en la ventana del navegador y se cerrará la conexión.

Cruzando el abismo de Internet

Una cosa que vale la pena señalar es cómo se transmite la información cuando realiza una solicitud de información. Cuando realiza una solicitud, esa información se divide en pequeños fragmentos llamados paquetes. Cada paquete está etiquetado con un encabezado TCP, que incluye los números de puerto de origen y destino, y un encabezado IP que incluye las direcciones IP de origen y destino para darle su identidad. A continuación, el paquete se transmite a través de la red Ethernet, WiFi o celular y se le permite viajar por cualquier ruta y dar tantos saltos como sea necesario para llegar al destino final.

(En realidad, no nos importa cómo llegan los paquetes, ¡lo único que importa es que lleguen sanos y salvos al destino!) Una vez que los paquetes llegan al destino, se vuelven a ensamblar y se entregan como una sola pieza.

Entonces, ¿cómo saben todos los paquetes cómo llegar a su destino sin perderse?

La respuesta es TCP / IP.

TCP / IP es un sistema de dos partes que funciona como el “sistema de control” fundamental de Internet. IP significa Protocolo de Internet; su trabajo es enviar y enrutar paquetes a otras computadoras usando los encabezados IP (es decir, las direcciones IP) en cada paquete. La segunda parte, Protocolo de control de transmisión (TCP), es responsable de dividir el mensaje o archivo en paquetes más pequeños, enrutar los paquetes a la aplicación correcta en la computadora de destino usando los encabezados TCP, reenviar los paquetes si se pierden en el camino y reensamblar los paquetes en el orden correcto una vez que hayan llegado al otro extremo.

Pintar la imagen final

Pero espera, ¡el trabajo aún no está terminado! Ahora que su navegador tiene los recursos que componen el sitio web (HTML, CSS, JavaScript, imágenes, etc.), debe seguir varios pasos para presentarle los recursos como una página web legible por humanos.

Su navegador tiene un motor de renderizado que se encarga de mostrar el contenido. El motor de renderizado recibe el contenido de los recursos en pequeños fragmentos. Luego hay un algoritmo de análisis de HTML que le dice al navegador cómo analizar los recursos.

Una vez analizado, genera una estructura de árbol de los elementos DOM. DOM son las siglas de Document Object Model y es una convención sobre cómo representar objetos ubicados en un documento HTML. Estos objetos - o "nodos" - de cada documento se pueden manipular utilizando lenguajes de programación como JavaScript.

Una vez que se crea el árbol DOM, se analizan las hojas de estilo para comprender cómo diseñar cada nodo. Con esta información, el navegador recorre los nodos DOM y calcula el estilo CSS, la posición, las coordenadas, etc. de cada nodo.

Una vez que el navegador tiene los nodos DOM y sus estilos, * finalmente * está listo para pintar la página en su pantalla en consecuencia. El resultado: todo lo que ha visto en Internet.

La web es compleja, pero acabas de terminar la parte difícil

Así que esa es la web en pocas palabras. ¿Perdió? Todos lo somos, pero si has leído hasta aquí ya has terminado la parte difícil. Obviamente, me salté algunos detalles con el fin de mostrarles el panorama general aquí; pero si puede comprender la secuencia básica de eventos descritos anteriormente, completar los detalles será pan comido.

Consulte la Parte 2, donde abordaremos la estructura de una aplicación web básica. :)