En esta unidad se presentan los principales componentes que deben hacer parte de la arquitectura de una aplicación web, abordando sus características y funciones desde los conceptos de back-end y front-end, resaltando la importancia de la definición de una arquitectura como parte de la etapa de diseño dentro del proceso de desarrollo de software y como insumo para la implementación de la aplicación web.

La definición de la arquitectura se abordará desde dos enfoques diferentes, RIA (Rich Internet Applications) y SPA (Single Page Applications), cada uno de los cuales posee características, ventajas y desventajas, que se deben tener en cuenta en el momento de decidir cuál es la enfoque que más conviene y asegura el cumplimiento de los requerimientos de la aplicación.

Propósito general

Proporcionar los elementos, conceptos y herramientas, que ayuden al estudiante a definir la arquitectura de una aplicación Web, siguiendo lineamientos y mejores prácticas aplicadas por la industria, que le permitan dar solución a los requerimientos funcionales y los atributos de calidad y seguridad definidos por el usuario.

Propósitos específicos

• Proporcionar al estudiante herramientas que le permitan identificar la funcionalidad de los distintos componentes que conforman la arquitectura de una aplicación web.
• Proveer de herramientas al estudiante, para que esté en la capacidad de identificar las características y responsabilidades de las diferentes capas, a través de las cuales se puede plantear la arquitectura de una aplicación web.
• Dar a conocer al estudiante los lineamientos, principios y mejores prácticas que puede aplicar en el momento de definir la arquitectura de una aplicación web.

La evolución de las aplicaciones web está estrechamente relacionada con la propia evolución de internet. Pues a medida que esta red crecía en nodos conectados, la academia e industria trabajaban conjuntamente sobre nuevas tecnologías que permitieran explotar al máximo la oportunidad de intercambiar información.

Es así como los desarrollos tecnológicos a nivel de hardware (supercomputadores, equipos de red, medios de transmisión, sensores, etc.) y software (sistemas operativos, protocolos, lenguajes de programación) se han integrado de manera estándar para que hoy el mundo tenga como uno de sus principales activos la Internet, la red mundial que ha permitido la interconexión global y aportado enormemente al desarrollo socio-económico del ser humano.

En esta sección, mediante una línea de tiempo, se presentan los acontecimientos y tecnologías más importantes que dieron paso y soportaron el crecimiento de la World Wide Web como hoy la conocemos.

Después de adentrarnos un poco en la historia y conocer cómo diferentes ideas fueron evolucionando hasta tener la World Wide Web actual, es importante entender ¿Qué es una aplicación web? y ¿Qué diferencia hay entre una aplicación web y una página web?.

Una aplicación web es una aplicación cliente/servidor cuyo cliente se ejecuta a través de los navegadores, los cuales le presentan la información al usuario, capturan datos y los envían de vuelta al servidor. En este sentido, no se requiere desarrollar, ni instalar una aplicación web para cada sistema operativo, ya que estas no dependen de las características propias del mismo.

Ahora bien, una página web es un documento construido principalmente en el lenguaje HTML - HyperText Markup Language (Lenguaje de marcas de hipertexto), que viaja por la red a través del protocolo HTTP – Hyper Text Transfer Protocol (Protocolo de Transferencia de Hipertexto), y que puede ser accedido y visualizado desde el navegador. Este tipo de documentos y los enlaces entre estos, son los que conforman una aplicación web. Estudiemos en esta interactividad los tipos de aplicaciones web que podemos encontrar.

Mosaic fue el primer navegador web gráfico para visualizar páginas web desde el sistema operativo Windows, y la base para el siguiente navegador más utilizado: Netscape. En Mosaic una página web tardaba en cargar aproximadamente 20 minutos.

A las primeras aplicaciones web de contenido estático cuyo objetivo era difundir información, se les llamó la Web 1.0. Su interfaz gráfica estaba principalmente conformada por texto, no tenían ninguna interacción con el usuario, la comunicación era unidireccional y su actualización era responsabilidad del Webmaster o administrador del sitio, el cual debía contar con conocimientos avanzados en HTML y servidores web de contenido estático.

Por las características anteriormente mencionadas a esta etapa de la evolución de la Web, se le llamo Info-Centric.

A medida que internet se fue masificando y que las empresas comenzaron a identificar el gran potencial de estar globalmente interconectados, se desarrollaron nuevas tecnologías que permitieron la evolución hacía una web más dinámica e interactiva, en la que los usuarios crean y comparten contenido digital de todo tipo (texto, imágenes, fotografías, video).

Las interfaces de usuario de la web 1.0, estaban basadas principalmente en HTML, en la Web 2.0 surgieron nuevos lenguajes y tecnologías como Javascript, XML (eXtensible Markup Language), AJAX (Asynchronous JavaScript Asynchronous JavaScript and XML), CSS (Cascading Style Sheets), entre otras, que permitieron crear interfaces más amigables, dinámicas e interactivas.

Las funciones que la web ofrece al ser humano han ido creciendo sorprendentemente en los últimos años, gracias al desarrollo tecnológico y al enfoque socio-económico que la industria, la academia y los gobiernos le han dado; es así como se han enfocado esfuerzos en incursionar cada vez más en la vida diaria del ser humano, analizando la información recopilada sobre gustos, costumbres y comportamientos, para proponer nuevos servicios y soluciones; de allí nace el concepto de la web semántica, que busca formalizar y estandarizar la manera de capturar y almacenar estos datos, para que puedan ser procesados automáticamente.

Se espera que el avance de los medios de transmisión de datos, la inteligencia artificial y la realidad virtual, permitan que las aplicaciones web evolucionen hacia ambientes non-browser (No dependientes de navegadores). Veamos un ejemplo de IoT – Smart Mirror Duo.

Así mismo, se encuentran propuestas en el mercado para que diferentes dispositivos se conecten a Internet, aprovechando los avances en cuanto a sensores, medios de transmisión e inteligencia artificial, desarrollando el concepto de IoT - Internet de las cosas. Por lo anteriormente expuesto, la web 3.0 está llamada a ser machine-centric, en donde cualquier dispositivo que pueda ser conectado a la red, será conectado.

Actividad de aprendizaje

Evalúa lo aprendido hasta este punto, resolviendo el siguiente crucigrama

Material de apoyo

Una aplicación web puede corresponder a un sistema de información, o ser parte de uno, en cualquier caso, se requiere definir la arquitectura que va a tener dicha aplicación, así como los principios y lineamientos a tener en cuenta en su construcción y mantenimiento.

En la presente sección, retomaremos algunos conceptos de arquitectura de software y revisaremos cómo fueron evolucionando las arquitecturas de las aplicaciones web hasta la época actual.

Es importante resaltar, de acuerdo con la interactividad, que no toda la evolución de las aplicaciones web se ha limitado a la integración con las interfaces gráficas de usuario, también se han experimentado cambios y mejoras en lo referente a las funciones implementadas en el lado servidor; estos temas los veremos en posteriores secciones.

Es en la etapa de diseño del proceso de desarrollo de software, en donde debe definirse la arquitectura de una aplicación, la cual corresponde a un diseño de alto nivel. En general, el proceso de desarrollo puede abordarse en varias iteraciones, dependiendo de la metodología que esté aplicando el equipo de trabajo. Sin embargo, es importante que, en la primera iteración, se establezca de la manera más completa posible la arquitectura, ya que ésta será el marco bajo el cual se irán implementando de forma incremental, las funciones requeridas en la aplicación, tal y como se presenta en el gráfico que acompaña esta pantalla.

En las siguientes unidades profundizaremos sobre lineamientos y mejores prácticas en la construcción del front-end y el back-end de una aplicación web, así como los frameworks y tecnologías más utilizadas.

Ahora bien, la definición de la arquitectura de una aplicación web puede ser iterativo e incremental. Lo más importante es que no quede ningún requerimiento funcional o no funcional sin contemplar en este proceso, tal como se expone en la interactividad anterior.

Actividad de aprendizaje

Relaciona conceptos de arquitectura y repasa lo estudiado en este punto.

Después de repasar conceptos y conocer un poco sobre la historia y evolución de las aplicaciones web, en la presente sección profundizaremos más en los principios, patrones y mejores prácticas a aplicar en su construcción. Iniciaremos recordando los principios de diseño más comunes a tener en cuenta en la definición de la arquitectura y posterior construcción de una aplicación web.

Estos principios, no son nuevos, llevan tiempo madurando y evolucionado; su adopción y uso generalizado, demuestran la importancia de tenerlos en cuenta al momento de diseñar y construir una aplicación web. A continuación, revisaremos 5 de estos principios, llamados SOLID (por sus iniciales).

Ahora bien, existen una serie de patrones de diseño que se han creado para ayudar a los arquitectos y desarrolladores a cumplir con estos principios (y no desviarse del camino). Uno de los principales patrones utilizado para la construcción de aplicaciones web, es el patrón MVC.

Finalmente, tenemos los frameworks o marcos de trabajos, los cuales están construidos a partir de patrones y dan respuesta a muchas de las necesidades que se les presentan a los arquitectos y desarrolladores durante la implementación de las aplicaciones.

Pero, todo lo anterior, ¿qué tiene que ver con los conceptos de front-end y back-end? Pues bien, son términos que se han popularizado en los últimos años y que refieren a una manera de dividir tareas y responsabilidades en la construcción de una aplicación. Estos tecnicismos son tan utilizados que las empresas en sus búsquedas de empleo publican ofertas para ingenieros especializados en front-end o back-end.

Cuando hablamos de front-end, nos estamos refiriendo a todo lo relacionado con la interfaz gráfica de usuario. Es decir, lo que el usuario ve y con lo que interactúa. También es llamado client-side (lado cliente).

Es así como la parte front- end tiene responsabilidades definidas, arquitectura, lenguajes, tecnologías y frameworks, tal y como se presenta en el gráfico que acompaña esta pantalla.

En la siguiente unidad profundizaremos más sobre la arquitectura, lenguajes y frameworks de front-end, así como en temas de usabilidad y experiencia de usuario, lo cual justamente está relacionado con construir interfaces gráficas de usuario cada vez más intuitivas y fáciles de usar.

El back-end corresponde a los componentes de la aplicación que implementan los procesos de negocio y el almacenamiento de la información; es decir, a la “magia” detrás del front-end. También es llamado server-side (lado servidor).

Así como el front-end, el back-end tiene la responsabilidad de implementar la lógica de negocio y de interactuar con los módulos de almacenamiento de datos, para lo cual también hay diferentes arquitecturas, lenguajes y frameworks, entre los cuales se encuentran los presentados en el gráfico de esta pantalla.

Vale la pena resaltar la importancia de la manera como front-end y back-end interactúan. Dicha interacción también ha tenido evoluciones y actualmente el protocolo más utilizado en esta comunicación es el HTTP.

En las siguientes secciones retomaremos los conceptos RIA y SPA, que fueron mencionados anteriormente, para profundizar más en sus características, ya que son los dos enfoques más utilizados actualmente.

Las aplicaciones web del tipo Rich Internet Applications – RIA, tienen como principal objetivo emular la interactividad y fluidez de las aplicaciones de escritorio; en este sentido, las primeras versiones bajo esta generación trabajaron con frameworks como Adobe Flash, Adobe Flex y SilverLight.

Sin embargo, la dependencia de este tipo de plugins hizo más complejo el mantenimiento y extensibilidad de las aplicaciones. Paralelamente, con la evolución de Javascript, la aparición de AJAX y de los primeros frameworks MVC, se logró el refrescar ciertos componentes de la página, lo cual permitió ganar flexibilidad y velocidad, pero se adicionó más complejidad a la página en sí.

Los nuevos paradigmas y propuestas, traen soluciones pero también traen nuevos retos que resolver. En el caso de las aplicaciones SPA, los frameworks que deben cargarse en el cliente, pueden llegar a ser muy pesados. Así mismo, el código de la interfaz gráfica no es compilado, lo que hace difícil la depuración y está expuesto a usuarios maliciosos potenciales. Aunque con el trabajo conjunto de la academia y la industria ya existirán maneras de mitigar estos riesgos

Dado lo anterior, emerge el paradigma Single Page Applications, en el cual la aplicación entera se ejecuta en solo una página web, y la construcción de la página se hace completamente en el cliente, haciendo uso de AJAX, Javascript y CSS. Suena complejo ¿cierto?, bueno, para facilitar la construcción de este tipo de aplicaciones, la industria ha desarrollado frameworks como Angular.js, Boostrap.js o librerías javascript como jQuery, React.js entre otras.

Actividad de aprendizaje

Fortalece los conocimientos adquiridos hasta este momento, completando una serie de oraciones sobre las aplicaciones web.

Al inicio de la unidad, se revisan los conceptos e ideas que fueron la base para las aplicaciones web que hoy en día conocemos, desde la idea del Memex hasta la creación del lenguaje HTML. Después, se presentan los tipos de aplicaciones web, clasificación que permite identificar las características de las diferentes aplicaciones que se pueden encontrar actualmente en internet.

Con el fin de profundizar sobre cómo ha sido la evolución de la web, se describe cuáles son las características de sus diferentes versiones, en donde estamos actualmente y hacia donde se está apuntando respecto a este tema. Posteriormente, se revisan conceptos de arquitectura, principios y patrones de diseño, así como los frameworks más utilizados para la implementación de aplicaciones web, que van a ser referenciados y profundizados en posteriores unidades.

Finalmente, se presentan los términos front-end y back-end, así como las características de los paradigmas Rich Internet Applications y Single Page Applications, sobre los cuales están construidas un alto porcentaje de las aplicaciones web disponibles actualmente, ya sea como productos o como desarrollos a la medida.

Actividad de aprendizaje

Aplica todo lo aprendido, definiendo una serie de requerimientos para diseñar y construir una aplicación web.