{"id":383,"date":"2020-07-01T23:47:18","date_gmt":"2020-07-01T23:47:18","guid":{"rendered":"https:\/\/arsum.cl\/?page_id=383"},"modified":"2020-07-02T13:45:50","modified_gmt":"2020-07-02T13:45:50","slug":"arquitectura-web-101-los-conceptos-basicos-de-arquitectura-que-me-hubiera-gustado-conocer-cuando-comence-como-desarrollador-web","status":"publish","type":"page","link":"https:\/\/arsum.cl\/?page_id=383","title":{"rendered":"Arquitectura Web 101: Los conceptos b\u00e1sicos de arquitectura que me hubiera gustado conocer cuando comenc\u00e9 como desarrollador web."},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

Veamos el siguiente diagrama para un descripci\u00f3n general de la arquitectura moderna de aplicaciones web:<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

El anterior diagrama es una representaci\u00f3n bastante buena de la arquitectura en Storyblocks (Nota del traductor: Storyblocks es la compa\u00f1\u00eda donde trabaja el autor original de este art\u00edculo; m\u00e1s datos al fin de este art\u00edculo). Si no eres un desarrollador web experimentado, es probable que te resulte complicado. El recorrido a continuaci\u00f3n deber\u00eda hacerlo m\u00e1s accesible antes de sumergirnos en los detalles de cada componente.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

Un usuario busca en Google \u00abFuerte, hermosa niebla y rayos de sol en el bosque\u00bb. El primer resultado es de Storyblocks, nuestro sitio l\u00edder en fotos e im\u00e1genes vectoriales. El usuario hace clic en el resultado que redirige su navegador a la p\u00e1gina de detalles de la imagen. Por debajo, el navegador del usuario env\u00eda una solicitud a un servidor DNS para buscar c\u00f3mo contactar Storyblocks y luego env\u00eda la solicitud.<\/em><\/p>

La solicitud llega a nuestro balanceador de carga, que elige aleatoriamente uno de los aproximadamente diez servidores web que tenemos en funcionamiento al momento de procesar la solicitud. El servidor web busca informaci\u00f3n sobre la imagen en nuestro servicio de almacenamiento en cach\u00e9 y obtiene los datos restantes de la base de datos. Notamos que el perfil de color para la imagen a\u00fan no se ha calculado, por lo que enviamos un trabajo de \u00abperfil de color\u00bb a nuestra cola de trabajos, que nuestros servidores de colas procesar\u00e1n de forma asincr\u00f3nica, actualizando la base de datos adecuadamente con los resultados.<\/em><\/p>

A continuaci\u00f3n, intentamos encontrar fotos similares enviando una solicitud a nuestro servicio de b\u00fasqueda de texto completo utilizando el t\u00edtulo de la foto como entrada. El usuario est\u00e1 conectado a Storyblocks como miembro, por lo que buscamos la informaci\u00f3n de su cuenta en nuestro servicio de cuentas de usuarios. Finalmente, enviamos un evento de vista de p\u00e1gina a nuestra manguera de incendios, para que se registre en nuestro sistema de almacenamiento en la nube y finalmente se cargue en nuestro almac\u00e9n de datos, que los analistas usan para ayudar a responder preguntas sobre el negocio.<\/em><\/p>

El servidor ahora representa la vista como HTML y la env\u00eda de vuelta al navegador del usuario, pasando primero por el equilibrador de carga. La p\u00e1gina contiene activos Javascript y CSS que cargamos en nuestro sistema de almacenamiento en la nube, que est\u00e1 conectado a nuestra CDN, por lo que el navegador del usuario se pone en contacto con la CDN para obtener el contenido. Por \u00faltimo, el navegador visualiza la p\u00e1gina para que el usuario la vea.<\/em><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

A continuaci\u00f3n, te guiar\u00e9 a trav\u00e9s de cada componente, proporcionando una introducci\u00f3n \u00ab101\u00bb de cada uno, lo que deber\u00eda darte un buen modelo mental de la arquitectura web de aqu\u00ed en adelante.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

1. DNS<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

DNS significa \u00abSistema de Nombres de Dominio\u00bb (de la sigla en ingl\u00e9s de \u00abDomain Name System\u00bb) y es una tecnolog\u00eda esencial y que hace posible la world wide web. En el nivel m\u00e1s b\u00e1sico, el DNS proporciona una b\u00fasqueda de clave\/valor desde un nombre de dominio (por ejemplo, google.com) a una direcci\u00f3n IP (por ejemplo, 85.129.83.120), que es necesaria para que tu computador pueda enrutar una solicitud a la direcci\u00f3n apropiada del servidor. Haciendo analog\u00eda con los n\u00fameros de tel\u00e9fono, la diferencia entre un nombre de dominio y una direcci\u00f3n IP es la diferencia entre \u00abllamar a Juan P\u00e9rez\u00bb y \u00abllamar al 201-867\u20135309\u00bb. Del mismo modo en que necesitabas una gu\u00eda telef\u00f3nica para buscar el n\u00famero de Juan en los viejos tiempos, necesitas un DNS para buscar la direcci\u00f3n IP de un dominio. Por lo tanto, puedes pensar en DNS como la gu\u00eda telef\u00f3nica de Internet. Hay muchos m\u00e1s detalles que podr\u00edamos ver aqu\u00ed, pero los pasaremos por alto porque no es cr\u00edtico para nuestra introducci\u00f3n a nivel \u00ab101\u00bb.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

2. Balanceador de Carga<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

Antes de sumergirnos en los detalles sobre el balance de carga, vamos un paso atr\u00e1s revisar escalabilidad horizontal y vertical de una aplicaci\u00f3n. \u00bfQu\u00e9 son y cu\u00e1l es la diferencia? En pocas palabras, en esta publicaci\u00f3n de StackOverflow<\/a>, escalabilidad horizontal<\/i> significa que es posible crecer agregando m\u00e1s m\u00e1quinas a su grupo de recursos, mientras que la escalabilidad \u00abvertical\u00bb significa que creces agregando m\u00e1s potencia (por ejemplo, CPU, RAM) a una m\u00e1quina existente.<\/p>

En el desarrollo web, (casi) siempre vas a querer escalar horizontalmente porque, por decirlo as\u00ed de simple, las cosas se echan a perder. Los servidores se caen en cualquier momento. Las redes se degradan. Centros de datos completos ocasionalmente quedan fuera de l\u00ednea. Tener m\u00e1s de un servidor te permite planificar interrupciones para que tu aplicaci\u00f3n contin\u00fae ejecut\u00e1ndose. En otras palabras, tu aplicaci\u00f3n es \u00abtolerante a fallas\u00bb. En segundo lugar, la escalabilidad horizontal te permite acoplar m\u00ednimamente diferentes partes del backend de tu aplicaci\u00f3n (servidor web, base de datos, un servicio X, etc.) haciendo que cada una de ellas se ejecute en diferentes servidores. Por \u00faltimo, puedes alcanzar una escala donde ya no es posible escalar verticalmente. No hay computadora en el mundo lo suficientemente grande como para hacer todos los c\u00e1lculos de tu aplicaci\u00f3n. Considera la plataforma de b\u00fasqueda de Google como un ejemplo por excelencia, aunque esto se aplica a empresas a escalas mucho menores. Storyblocks, por ejemplo, ejecuta entre 150 y 400 instancias de AWS EC2 en cualquier momento dado. Ser\u00eda todo un desaf\u00edo proveer esa potencia de c\u00f3mputo a trav\u00e9s de escalabilidad vertical.<\/p>

Bueno, volvamos a los balanceadores de carga. Son la salsa m\u00e1gica que hace posible escalar horizontalmente. Enrutan las solicitudes entrantes a uno de los muchos servidores de aplicaciones que generalmente son clones\/im\u00e1genes espejadas entre s\u00ed y env\u00edan la respuesta del servidor de aplicaciones al cliente. Cualquiera de ellos debe procesar la solicitud de la misma manera, por lo que es solo una cuesti\u00f3n de distribuir las solicitudes en el conjunto de servidores para que ninguno de ellos est\u00e9 sobrecargado.<\/p>

Y eso es. Conceptualmente, los balanceadores de carga son bastante sencillos. Bajo la superficie, ciertamente hay complicaciones, pero no es necesario sumergirse en ellas en nuestra versi\u00f3n 101.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

3. Servidores de Aplicaciones Web<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

A alto nivel, los servidores de aplicaciones web son relativamente simples de describir. Ejecutan la l\u00f3gica comercial central que maneja la solicitud de un usuario y env\u00eda de vuelta HTML al navegador del usuario. Para hacer su trabajo, generalmente se comunican con una variedad de infraestructura de back-end, como bases de datos, capas de almacenamiento en cach\u00e9, colas de jobs, servicios de b\u00fasqueda, otros microservicios, colas de datos\/logs y m\u00e1s. Como se mencion\u00f3 anteriormente, normalmente tienes al menos dos, y muchas veces muchos m\u00e1s, conectados a un balanceador de carga para procesar las solicitudes de los usuarios.<\/p>

Has de saber que las implementaciones de servidor de aplicaciones requieren elegir un lenguaje espec\u00edfico (Node.js, Ruby, PHP, Scala, Java, C#, .NET, etc.) y un framework web MVC para ese lenguaje (Express for Node.js, Ruby on Rails, Play for Scala, Laravel for PHP, etc.). Sin embargo, sumergirse en los detalles de estos lenguajes y marcos est\u00e1 m\u00e1s all\u00e1 del alcance de este art\u00edculo.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

4. Servidores de Bases de Datos<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

Cada aplicaci\u00f3n web moderna utiliza una o m\u00e1s bases de datos para almacenar informaci\u00f3n. Las bases de datos proporcionan formas de definir tus estructuras de datos, insertar datos nuevos, encontrar datos existentes, actualizar o eliminar datos existentes, realizar c\u00e1lculos en los datos y m\u00e1s. En la mayor\u00eda de los casos, los servidores de aplicaciones web se comunican directamente con uno, al igual que los servidores de jobs. Adem\u00e1s, cada servicio de back-end puede tener su propia base de datos aislada del resto de la aplicaci\u00f3n.<\/p>\n

Aunque trato de evitar una inmersi\u00f3n muy profunda en tecnolog\u00edas particulares para cada componente de la arquitectura, le estar\u00eda haciendo un mal servicio sin mencionar el siguiente nivel de detalle para las bases de datos: SQL y NoSQL.<\/p>\n

SQL significa \u00ablenguaje de consulta estructurado\u00bb (del ingl\u00e9s \u00abstructured query language\u00bb) y fue inventado en la d\u00e9cada de 1970 para proporcionar una forma est\u00e1ndar de consultar conjuntos de datos relacionales que fuera accesible para una audiencia amplia. Las bases de datos SQL almacenan datos en tablas que est\u00e1n vinculadas entre s\u00ed a trav\u00e9s de ID comunes, generalmente n\u00fameros enteros. Veamos un ejemplo simple de almacenamiento de informaci\u00f3n de direcci\u00f3n hist\u00f3rica para los usuarios. Es posible que tenga dos tablas, users y user_addresses, vinculadas entre s\u00ed por el ID del usuario. Ve la imagen a continuaci\u00f3n para una versi\u00f3n simplista. Las tablas est\u00e1n vinculadas porque la columna user_id en la tabla user_addresses es clave for\u00e1nea de la columna ID en la tabla users.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t

Si no sabes mucho sobre SQL, te recomiendo que sigas un tutorial como el que puedes encontrar en Khan Academy aqu\u00ed<\/a>. Es omnipresente en el desarrollo web, por lo que al menos vas a querer conocer los conceptos b\u00e1sicos para dise\u00f1ar correctamente una aplicaci\u00f3n.<\/span><\/p>

NoSQL, que significa exactamente \u00abno SQL\u00bb, es un nuevo conjunto de tecnolog\u00edas de bases de datos que ha surgido para manejar la gran cantidad de datos que pueden producir las aplicaciones web a gran escala (la mayor\u00eda de las variantes de SQL no se escalan horizontalmente muy bien y solo puede escalar verticalmente a un cierto punto). Si no sabes nada sobre NoSQL, te recomiendo comenzar con algunas introducciones de alto nivel como estas:<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t