Apps, webs y aplicaciones web

A medio camino entre la páginas web y las ya famosísimas Apps, o aplicaciones, nos encontramos las aplicaciones web. Es posible que muchos aún estemos intentando descifrar qué diferencia a las primeras de las segundas, como para entender qué son las terceras. Mi padre, por ejemplo, llama a todo ‘Facebook’, sin importar si realmente está usando o no esa red social. Cualquier cosa que esté en internet es eso para él. De modo que si no diferencias una web de una aplicación web tampoco debes agobiarte.

Las Apps nos han facilitado mucho la vida, eso es indudable, por lo que dar el paso hacia el diseño de aplicaciones web a medida era un paso natural que se tenía que dar. En ellas se combinan lo mejor de ambos mundos. Pero para tener clara la diferencia entre una web normal y una aplicación web, me puse en contacto con un estudio de diseño web en León, ellos están especializados en el diseño de aplicaciones web de gestión, y me hicieron una pequeña explicación que os traslado.

Diferencias entre páginas web y aplicaciones web

1. En qué se diferencian las aplicaciones web de los sitios web

Un sitio web es principalmente algo informativo y estático: la tarjeta de presentación de una empresa, un sitio de 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, como un archivo HTML, no se generan sobre la marcha. La mayoría de las veces se trata de imágenes, archivos CSS, scripts JS, pero puede haber otros archivos: mp3, mov, csv, pdf.

Blogs, tarjetas de visita con formulario de contacto, páginas de destino con un montón de efectos… forman parte de los sitios web, aunque rompan un poco con su estatismo y simplicidad. 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 según 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 parte 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ío de formularios, actualización de datos, el servidor generará un nuevo archivo HTML y se volverá a cargar la página en el navegador.

El frontend (frontend o parte del cliente de la aplicación) se ejecuta en el navegador del usuario. Esta parte está escrita en el lenguaje de programación Javascript. La aplicación solo puede constar de la parte del cliente, si no es necesario almacenar los datos del usuario durante más de una sesión. Estos pueden ser, por ejemplo, editores de fotografías o simples juguetes.

Aplicación de página única (SPA o aplicación de página única). Una opción más interesante cuando se utilizan tanto el backend como el frontend. Usando su interacción, puede crear una aplicación que funcionará sin necesidad de recargar la página en el navegador. O en una versión simplificada, cuando las transiciones entre secciones provocan recargas, pero se prescinde de cualquier acción en la sección.

3. Django python framework, 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. Como ejemplo, describiré el principio de funcionamiento del framework Django escrito en el lenguaje de programación Python.

En la primera etapa, la solicitud del usuario va al enrutador (despachador de URL), que decide a qué función llamar para procesar la solicitud. La decisión se toma sobre la base de una lista de reglas que consta de una expresión regular y un nombre de función: si tal o cual url, entonces esta es la función.

La función que llama el enrutador se llama vista. Cualquier lógica empresarial puede estar contenida dentro, pero la mayoría de las veces es una de dos cosas: o los datos se toman de la base de datos, se preparan y se devuelven al frente; o una solicitud vino con datos de algún formulario, estos datos se verifican y se guardan en la base de datos.

Los datos de la aplicación se almacenan en una base de datos (DB). Las bases de datos relacionales más utilizadas. Esto es cuando hay tablas con columnas predefinidas y estas tablas están vinculadas a través de una de las columnas.

Los datos de la base de datos se pueden crear, leer, modificar y eliminar. A veces puede ver la abreviatura CRUD (Create Read Update Delete) para denotar estas acciones. Se utiliza un lenguaje especial SQL (lenguaje de consulta estructurado) para consultar datos en la base de datos.

En Django, los modelos se utilizan para trabajar con la base de datos. Te permiten describir tablas y realizar consultas en el desarrollador de Python habitual, lo cual es mucho más conveniente. Esta conveniencia tiene un precio: consultas como esta son más lentas y limitadas en comparación con SQL puro.

Los datos recibidos de la base de datos se preparan a la vista para enviarlos al frente. Se pueden sustituir en la plantilla y enviar como un archivo HTML. Pero en el caso de una aplicación de una sola página, esto ocurre solo una vez, cuando se genera una página HTML, a la que están conectados todos los scripts JS. De lo contrario, los datos se serializan y se envían en formato JSON.

4. Marcos de Javascript, también conocidos como frontend

El lado del cliente de la aplicación consta de scripts escritos en el lenguaje de programación Javascript (JS) y ejecutados en el navegador del usuario. Anteriormente, toda la lógica del lado del cliente se basaba en el uso de la biblioteca jQuery, que le permite trabajar con el DOM, animaciones en la página y realizar solicitudes AJAX.

DOM (modelo de objeto de documento) es la estructura de una página HTML. Trabajar con DOM se trata de encontrar, agregar, modificar, mover y eliminar etiquetas HTML.

AJAX (javascript asíncrono y XML) es el nombre general de 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 intercambiar 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 utilizar en cualquier lenguaje de programación.

La serialización es la conversión de una lista o diccionario a una cadena JSON. Por ejemplo:

Diccionario:

   {

       'id': 1,

       'email': 'mail@example.com'

   }

Cadena serializada:

   '{"id": 1, "email": "mail@example.com"}'

La deserialización es la conversión inversa de una cadena a una lista o diccionario.

Con la manipulación DOM, puede controlar completamente el contenido de sus páginas. Con AJAX, puede intercambiar datos entre cliente y servidor. Con estas tecnologías, ya puede crear un SPA. Pero cuando se crea una aplicación compleja, el código frontend basado en jQuery se vuelve rápidamente confuso y difícil de mantener.

Afortunadamente, JQuery ha sido reemplazado por marcos de Javascript: Backbone Marionette, Angular, React, Vue y otros. Tienen una filosofía y sintaxis diferente, pero todas te permiten administrar datos en el frontend con mucha más comodidad, tienen motores de plantilla y herramientas para crear navegación entre páginas.

Una plantilla HTML es una página HTML inteligente que utiliza variables en lugar de valores específicos y proporciona varios operadores: if , for loop y otros. El proceso de obtener una página HTML a partir de una plantilla, cuando se sustituyen las variables y se aplican operadores, se denomina renderización de plantillas.

La página renderizada resultante se muestra al usuario. Pasar a otra sección en SPA es una aplicación de un patrón diferente. Si es necesario utilizar otros datos en la plantilla, se solicitan 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 entre sí

El cliente se comunica con el servidor a través del protocolo HTTP. La base de este protocolo es una solicitud de un cliente a un servidor y una respuesta del servidor a un cliente.

Para las solicitudes, suelen utilizar los métodos GET si queremos recibir datos, y POST si queremos cambiar los datos. La solicitud también contiene el host (dominio del sitio), el cuerpo de la solicitud (si es una solicitud POST) y mucha información técnica adicional.

Las aplicaciones web modernas usan HTTPS, una versión extendida de HTTP compatible con 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 práctica en Internet.

Hay una solicitud más que viene antes de HTTP. Esta es una solicitud de DNS (sistema de nombres de dominio). Es necesario obtener la dirección IP a la que está vinculado el dominio solicitado. Esta información se guarda en el navegador y ya no perdemos tiempo en ella.

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), Nginx lo envía de vuelta al cliente. Si la solicitud no es estática, Nginx debe enviarla por proxy (transmitirla) a Django.

Desafortunadamente, no sabe cómo. Por lo tanto, se utiliza otro programa de capa: el servidor de aplicaciones. Por ejemplo, para aplicaciones de Python, esto podría ser uWSGI o Gunicorn. Y ahora envían la solicitud a Django.

Una vez que Django ha procesado 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 ocurrió 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 caché es un concepto en desarrollo cuando los datos de uso frecuente, en lugar de recuperarse de la base de datos cada vez, calcularse o prepararse de una manera diferente, se almacenan en un lugar de fácil acceso.

Todos los navegadores tienen habilitado el almacenamiento en caché de archivos estáticos de forma predeterminada. Gracias a esto, al abrir el sitio no por primera vez, todo se carga notablemente más rápido. La desventaja para el desarrollador es que con la caché habilitada, los cambios realizados en el código no siempre son visibles de inmediato.