A medio camino entre la paginas web y las ya famosisimas Apps, o aplicaciones, nos encontramos las aplicaciones web. Es posible que muchos aun estemos intentando descifrar que diferencia a las primeras de las segundas, como para entender que son las terceras. Mi padre, por ejemplo, llama a todo ‘Facebook’, sin importar si realmente esta usando o no esa red social. Cualquier cosa que este en internet es eso para el. De modo que si no diferencias una web de una aplicacion web tampoco debes agobiarte.

Las Apps nos han facilitado mucho la vida, eso es indudable, por lo que dar el paso hacia el diseno de aplicaciones web a medida era un paso natural que se tenia que dar. En ellas se combinan lo mejor de ambos mundos. Pero para tener clara la diferencia entre una web normal y una aplicacion web, me puse en contacto con un estudio de
diseno web en Leon, ellos estan especializados en el diseno de aplicaciones web de gestion , y me hicieron una pequena explicacion que os traslado.

Diferencias entre paginas web y aplicaciones web

1. En que se diferencian las aplicaciones web de los sitios web

Un sitio web es principalmente algo informativo y estatico: la tarjeta de presentacion 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 estadisticas que, como un archivo HTML, no se generan sobre la marcha. La mayoria de las veces se trata de imagenes, archivos CSS, scripts JS, pero puede haber otros archivos: mp3, mov, csv, pdf.

Blogs, tarjetas de visita con formulario de contacto, paginas de destino con un monton de efectos… forman parte de los sitios web, aunque rompan un poco con su estatismo y simplicidad. A diferencia de los sitios completamente estaticos, ya incluyen algun tipo de logica empresarial.

Y una aplicacion web es algo tecnicamente mas complejo. Aqui las paginas HTML se generan sobre la marcha segun la solicitud del usuario. Clientes de correo electronico, redes sociales, motores de busqueda, tiendas en linea, programas de negocios en linea, todas estas son aplicaciones web.

2. ?Que 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 aplicacion) se ejecuta en una computadora remota, que puede ubicarse en cualquier lugar. Se puede escribir en diferentes lenguajes de programacion: PHP, Python, Ruby, C # y otros. Si crea una aplicacion utilizando solo el lado del servidor, como resultado de cualquier transicion entre secciones, envio de formularios, actualizacion de datos, el servidor generara un nuevo archivo HTML y se volvera a cargar la pagina en el navegador.

El frontend (frontend o parte del cliente de la aplicacion) se ejecuta en el navegador del usuario. Esta parte esta escrita en el lenguaje de programacion Javascript. La aplicacion solo puede constar de la parte del cliente, si no es necesario almacenar los datos del usuario durante mas de una sesion. Estos pueden ser, por ejemplo, editores de fotografias o simples juguetes.

Aplicacion de pagina unica (SPA o aplicacion de pagina unica). Una opcion mas interesante cuando se utilizan tanto el backend como el frontend. Usando su interaccion, puede crear una aplicacion que funcionara sin necesidad de recargar la pagina en el navegador. O en una version simplificada, cuando las transiciones entre secciones provocan recargas, pero se prescinde de cualquier accion en la seccion.

3. Django python framework, tambien 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, describire el principio de funcionamiento del framework Django escrito en el lenguaje de programacion Python.

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

La funcion que llama el enrutador se llama vista. Cualquier logica empresarial puede estar contenida dentro, pero la mayoria 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 algun formulario, estos datos se verifican y se guardan en la base de datos.

Los datos de la aplicacion se almacenan en una base de datos (DB). Las bases de datos relacionales mas utilizadas. Esto es cuando hay tablas con columnas predefinidas y estas tablas estan vinculadas a traves 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 mas conveniente. Esta conveniencia tiene un precio: consultas como esta son mas lentas y limitadas en comparacion 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 aplicacion de una sola pagina, esto ocurre solo una vez, cuando se genera una pagina HTML, a la que estan conectados todos los scripts JS. De lo contrario, los datos se serializan y se envian en formato JSON.

4. Marcos de Javascript, tambien conocidos como frontend

El lado del cliente de la aplicacion consta de scripts escritos en el lenguaje de programacion Javascript (JS) y ejecutados en el navegador del usuario. Anteriormente, toda la logica del lado del cliente se basaba en el uso de la biblioteca jQuery, que le permite trabajar con el DOM, animaciones en la pagina y realizar solicitudes AJAX.

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

AJAX (javascript asincrono y XML) es el nombre general de las tecnologias que le permiten realizar solicitudes asincronas (sin recargar la pagina) al servidor e intercambiar datos. Dado que las partes cliente y servidor de la aplicacion web estan escritas en diferentes lenguajes de programacion, para intercambiar informacion 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 programacion.

La serializacion es la conversion 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 deserializacion es la conversion inversa de una cadena a una lista o diccionario.

Con la manipulacion DOM, puede controlar completamente el contenido de sus paginas. Con AJAX, puede intercambiar datos entre cliente y servidor. Con estas tecnologias, ya puede crear un SPA. Pero cuando se crea una aplicacion compleja, el codigo frontend basado en jQuery se vuelve rapidamente confuso y dificil de mantener.

Afortunadamente, JQuery ha sido reemplazado por marcos de Javascript: Backbone Marionette, Angular, React, Vue y otros. Tienen una filosofia y sintaxis diferente, pero todas te permiten administrar datos en el frontend con mucha mas comodidad, tienen motores de plantilla y herramientas para crear navegacion entre paginas.

Una plantilla HTML es una pagina HTML inteligente que utiliza variables en lugar de valores especificos y proporciona varios operadores: if , for loop y otros. El proceso de obtener una pagina HTML a partir de una plantilla, cuando se sustituyen las variables y se aplican operadores, se denomina renderizacion de plantillas.

La pagina renderizada resultante se muestra al usuario. Pasar a otra seccion en SPA es una aplicacion de un patron diferente. Si es necesario utilizar otros datos en la plantilla, se solicitan al servidor. Todos los envios de formularios con datos son solicitudes AJAX al servidor.

5. Como se comunican el cliente y el servidor entre si

El cliente se comunica con el servidor a traves 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 metodos GET si queremos recibir datos, y POST si queremos cambiar los datos. La solicitud tambien contiene el host (dominio del sitio), el cuerpo de la solicitud (si es una solicitud POST) y mucha informacion tecnica adicional.

Las aplicaciones web modernas usan HTTPS, una version extendida de HTTP compatible con el cifrado SSL / TLS. El uso de un canal de transmision de datos cifrados, independientemente de la importancia de estos datos, se ha convertido en una buena practica en Internet.

Hay una solicitud mas que viene antes de HTTP. Esta es una solicitud de DNS (sistema de nombres de dominio). Es necesario obtener la direccion IP a la que esta vinculado el dominio solicitado. Esta informacion 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 estatico (por ejemplo, una imagen), Nginx lo envia de vuelta al cliente. Si la solicitud no es estatica, Nginx debe enviarla por proxy (transmitirla) a Django.

Desafortunadamente, no sabe como. Por lo tanto, se utiliza otro programa de capa: el servidor de aplicaciones. Por ejemplo, para aplicaciones de Python, esto podria ser uWSGI o Gunicorn. Y ahora envian la solicitud a Django.

Una vez que Django ha procesado la solicitud, devuelve una respuesta con una pagina HTML o datos y un codigo de respuesta. Si todo esta bien, entonces el codigo de respuesta es 200; si no se encuentra la pagina, entonces – 404; si ocurrio un error y el servidor no pudo procesar la solicitud, entonces – 500. Estos son los codigos mas comunes.

6. Almacenamiento en cache en aplicaciones web

Otra tecnologia que encontramos constantemente, que esta presente tanto en aplicaciones web y software, como a nivel de procesador en nuestras computadoras y telefonos inteligentes.

La cache 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 facil acceso.

Todos los navegadores tienen habilitado el almacenamiento en cache de archivos estaticos de forma predeterminada. Gracias a esto, al abrir el sitio no por primera vez, todo se carga notablemente mas rapido. La desventaja para el desarrollador es que con la cache habilitada, los cambios realizados en el codigo no siempre son visibles de inmediato.