Este art铆culo es para principiantes y para aquellos que desean un poco de orientaci贸n en los t茅rminos y tecnolog铆as de las aplicaciones web modernas. El art铆culo describe c贸mo las aplicaciones web difieren de los sitios, qu茅 son las aplicaciones web, en qu茅 consisten y c贸mo funcionan.
1. C贸mo las aplicaciones web difieren de los sitios
Para m铆, un sitio es principalmente algo informativo y est谩tico: una tarjeta de presentaci贸n de una empresa, un sitio para recetas, un portal de la ciudad o un wiki. Un conjunto de archivos HTML preparados previamente que se encuentran en un servidor remoto y se entregan al navegador a pedido.
Los sitios contienen varias estad铆sticas, que al igual que un archivo HTML no se generan sobre la marcha. La mayor铆a de las veces son im谩genes, archivos CSS, scripts JS, pero puede haber otros archivos: mp3, mov, csv, pdf.
Blogs, tarjetas de visita con un formulario de contacto, p谩ginas de destino con muchos efectos, tambi茅n me refiero a los sitios por simplicidad. Aunque, a diferencia de los sitios completamente est谩ticos, ya incluyen alg煤n tipo de l贸gica empresarial.
Y una aplicaci贸n web es algo t茅cnicamente m谩s complejo. Aqu铆 las p谩ginas HTML se generan sobre la marcha dependiendo de la solicitud del usuario. Clientes de correo electr贸nico, redes sociales, motores de b煤squeda, tiendas en l铆nea, programas de negocios en l铆nea, todas estas son aplicaciones web.
2. 驴Qu茅 son las aplicaciones web?
Las aplicaciones web se pueden dividir en varios tipos, dependiendo de las diferentes combinaciones de sus componentes principales:
- El backend (backend o lado del servidor de la aplicaci贸n) se ejecuta en una computadora remota, que puede ubicarse en cualquier lugar. Se puede escribir en diferentes lenguajes de programaci贸n: PHP, Python, Ruby, C # y otros. Si crea una aplicaci贸n utilizando solo el lado del servidor, como resultado de cualquier transici贸n entre secciones, env铆os de formularios, actualizaciones de datos, el servidor generar谩 un nuevo archivo HTML y la p谩gina en el navegador se volver谩 a cargar.
- Frontend (frontend o cliente de la aplicaci贸n) se ejecuta en el navegador del usuario. Esta parte est谩 escrita en el lenguaje de programaci贸n Javascript. Una aplicaci贸n puede consistir solo en una parte del cliente si no es necesario almacenar los datos del usuario durante m谩s de una sesi贸n. Pueden ser, por ejemplo, editores de fotos o juguetes simples.
- Aplicaci贸n de p谩gina 煤nica (SPA o aplicaci贸n de p谩gina 煤nica). Una opci贸n m谩s interesante es cuando se utilizan tanto el backend como el frontend. Usando su interacci贸n, puede crear una aplicaci贸n que funcionar谩 sin recargar la p谩gina en el navegador. O en una versi贸n simplificada, cuando las transiciones entre particiones provocan reinicios, pero cualquier acci贸n en la partici贸n se realiza sin ellas.
3. Pyhon framework Django, tambi茅n conocido como backend
En desarrollo, un marco es un conjunto de bibliotecas y herramientas listas para usar que lo ayudan a crear aplicaciones web. Por ejemplo, describir茅 el principio de funcionamiento del marco Django escrito en el lenguaje de programaci贸n Python.
El primer paso es una solicitud del usuario al enrutador (despachador de URL), que decide qu茅 funci贸n procesar la solicitud para llamar. La decisi贸n se toma sobre la base de una lista de reglas que consiste en una expresi贸n regular y el nombre de la funci贸n: si tal url, entonces dicha funci贸n.
La funci贸n que llama el enrutador se llama vista. Cualquier l贸gica de negocios puede estar contenida dentro, pero la mayor铆a de las veces es una de dos cosas: cualquiera de los datos se toma de la base de datos, se prepara y se devuelve al frente; o una solicitud vino con datos de alguna forma, estos datos se verifican y almacenan en la base de datos.
Los datos de la aplicaci贸n se almacenan en una base de datos (DB). Bases de datos relacionales m谩s utilizadas. Esto es cuando hay tablas con columnas predefinidas y estas tablas est谩n interconectadas a trav茅s de una de las columnas.
Los datos en la base de datos se pueden crear, leer, modificar y eliminar. A veces, para denotar estas acciones, uno puede encontrar la abreviatura CRUD (Crear, Leer, Actualizar, Eliminar). Para consultar datos en la base de datos, se utiliza un lenguaje SQL especial (lenguaje de consulta estructurado).
En Django, los modelos se utilizan para trabajar con bases de datos. Le permiten describir tablas y realizar consultas sobre el desarrollador habitual de Python, lo cual es mucho m谩s conveniente. Debe pagar por esta comodidad: tales consultas son m谩s lentas y tienen capacidades limitadas en comparaci贸n con el uso de SQL puro.
Los datos recibidos de la base de datos se preparan para enviarlos al frente. Pueden sustituirse en una plantilla y enviarse como un archivo HTML. Pero en el caso de una aplicaci贸n de una p谩gina, esto ocurre solo una vez, cuando se genera una p谩gina HTML, a la que est谩n conectados todos los scripts JS. En otros casos, los datos se serializan y se env铆an en formato JSON.
4. Marcos de Javascript tambi茅n conocidos como frontend
La parte cliente de la aplicaci贸n son scripts escritos en el lenguaje de programaci贸n Javascript (JS) y ejecutados en el navegador del usuario. Anteriormente, toda la l贸gica del cliente se basaba en el uso de la biblioteca JQuery, que le permite trabajar con el DOM, la animaci贸n en la p谩gina y realizar solicitudes AJAX.
DOM (modelo de objeto de documento) es la estructura de una p谩gina HTML. Trabajar con el DOM significa encontrar, agregar, modificar, mover y eliminar etiquetas HTML.
AJAX (JavaScript as铆ncrono y XML) es un nombre com煤n para las tecnolog铆as que le permiten realizar solicitudes as铆ncronas (sin recargar la p谩gina) al servidor e intercambiar datos. Dado que las partes cliente y servidor de la aplicaci贸n web est谩n escritas en diferentes lenguajes de programaci贸n, para el intercambio de informaci贸n, es necesario convertir las estructuras de datos (por ejemplo, listas y diccionarios) en las que se almacena en formato JSON.
JSON (JavaScript Object Notation) es un formato universal para intercambiar datos entre un cliente y un servidor. Es una cadena simple que se puede usar en cualquier lenguaje de programaci贸n.
La serializaci贸n es la conversi贸n de una lista o diccionario en una cadena JSON. Por un ejemplo:
Diccionario:
{ 'id': 1, 'email': 'mail@example.com' }
Cadena serializada:
'{"id": 1, "email": "mail@example.com"}'
La deserializaci贸n es la transformaci贸n inversa de una cadena en una lista o diccionario.
Al manipular el DOM, puede controlar completamente el contenido de las p谩ginas. Con AJAX, puede intercambiar datos entre el cliente y el servidor. Con estas tecnolog铆as ya puede crear un SPA. Pero cuando se crea una aplicaci贸n compleja, el c贸digo front-end basado en jQuery se vuelve confuso y dif铆cil de mantener r谩pidamente.
Afortunadamente, los marcos de Javascript han reemplazado a JQuery: Backbone Marionette, Angular, React, Vue y otros. Tienen una filosof铆a y una sintaxis diferentes, pero todas le permiten administrar los datos en el front-end con mucha mayor comodidad, tienen motores de plantilla y herramientas para crear navegaci贸n entre p谩ginas.
Una plantilla HTML es una p谩gina HTML inteligente en la que se utilizan variables en lugar de valores espec铆ficos y hay varios operadores disponibles:
si , el bucle
for y otros. El proceso de obtener una p谩gina HTML de una plantilla cuando se sustituyen las variables y se aplican los operadores se denomina representaci贸n de plantilla.
La p谩gina resultante se muestra al usuario. Cambiar a otra secci贸n en SPA es usar una plantilla diferente. Si necesita utilizar otros datos en la plantilla, se los solicita al servidor. Todos los env铆os de formularios con datos son solicitudes AJAX al servidor.
5. C贸mo se comunican el cliente y el servidor
El cliente se comunica con el servidor a trav茅s de HTTP. La base de este protocolo es la solicitud del cliente al servidor y la respuesta del servidor al cliente.
Para las consultas, generalmente usan m茅todos GET si queremos obtener datos, y POST si queremos cambiar los datos. La solicitud tambi茅n indica Host (dominio del sitio), cuerpo de la solicitud (si es una solicitud POST) y mucha informaci贸n t茅cnica adicional.
Las aplicaciones web modernas usan el protocolo HTTPS, una versi贸n extendida de HTTP con soporte para el cifrado SSL / TLS. El uso de un canal de transmisi贸n de datos cifrados, independientemente de la importancia de estos datos, se ha convertido en una buena forma en Internet.
Hay otra solicitud que se realiza antes de HTTP. Esta es una consulta DNS (sistema de nombres de dominio). Es necesario para obtener la direcci贸n IP a la que est谩 vinculado el dominio solicitado. Esta informaci贸n se almacena en el navegador y ya no le dedicamos m谩s tiempo.
Cuando una solicitud del navegador llega al servidor, no llega inmediatamente a Django. Primero, es procesado por el servidor web Nginx. Si se solicita un archivo est谩tico (por ejemplo, una imagen), entonces Nginx lo env铆a en respuesta al cliente. Si la solicitud no es est谩tica, Nginx debe enviarla por proxy (transferirla) a Django.
Lamentablemente, no sabe c贸mo. Por lo tanto, se utiliza otro programa de capa: el servidor de aplicaciones. Por ejemplo, para aplicaciones de python, podr铆a ser uWSGI o Gunicorn. Y ahora env铆an la solicitud a Django.
Despu茅s de que Django proces贸 la solicitud, devuelve una respuesta con una p谩gina HTML o datos, y un c贸digo de respuesta. Si todo est谩 bien, entonces el c贸digo de respuesta es 200; si no se encuentra la p谩gina, entonces - 404; si ocurre un error y el servidor no pudo procesar la solicitud, entonces - 500. Estos son los c贸digos m谩s comunes.
6. Almacenamiento en cach茅 en aplicaciones web
Otra tecnolog铆a que encontramos constantemente, que est谩 presente tanto en aplicaciones web y software, como a nivel de procesador en nuestras computadoras y tel茅fonos inteligentes.
La memoria cach茅 es un concepto en desarrollo cuando los datos utilizados con frecuencia, en lugar de extraerlos de la base de datos cada vez, calculados o preparados de otra manera, se almacenan en un lugar de acceso r谩pido. Algunos ejemplos de uso de cach茅:
- En Django, lleg贸 una solicitud para recibir datos para el gr谩fico en el informe. Obtenemos los datos de la base de datos, los preparamos y los colocamos en la base de datos con acceso r谩pido, por ejemplo, memcached durante 1 hora. En la pr贸xima solicitud, los obtendremos de inmediato de memcached y los enviaremos a la interfaz. Si descubrimos que los datos han dejado de ser relevantes, los invalidamos (los eliminamos de la memoria cach茅).
- Para el almacenamiento en cach茅 de archivos est谩ticos, se utilizan proveedores de CDN (red de entrega de contenido). Estos son servidores ubicados en todo el mundo y optimizados para la distribuci贸n de estad铆sticas. A veces es m谩s eficiente poner im谩genes, videos, scripts JS en CDN en lugar de su servidor.
- Todos los navegadores permiten el almacenamiento en cach茅 de archivos est谩ticos de forma predeterminada. Gracias a esto, abrir el sitio no es la primera vez, todo se carga notablemente m谩s r谩pido. El inconveniente para el desarrollador es que con el cach茅 activado, los cambios realizados en el c贸digo no siempre son visibles de inmediato.