Want to create interactive content? It’s easy in Genially!

Get started free

Evolución y Arquitectura de las Aplicaciones Web

enricava157

Created on September 6, 2023

Start designing with a free template

Discover more than 1500 professional designs like these:

Modern Presentation

Terrazzo Presentation

Colorful Presentation

Modular Structure Presentation

Chromatic Presentation

City Presentation

News Presentation

Transcript

wow

Evolución y Arquitectura de las Aplicaciones Web

Enrique Calzadias Valenzuela C19061445

Arquitectura de Aplicaciones Web

La arquitectura de aplicaciones web es un esquema de cómo interactúan entre sí los distintos componentes de tu aplicación web. La forma de diseñar tu aplicación web desempeña un papel clave tanto en su usabilidad como en la optimización de sus costes.

¿Por qué es importante la Arquitectura?

La arquitectura de una aplicación web es, sin duda, una de las partes más importantes de tu aplicación web.

* Se adapta fácilmente a las necesidades del negocio.* Desarrollo organizado. * Mejor gestión de la base de código. * Seguridad Mejorada.

Tipos de Arquitectura de Aplicaciones Web

Arquitecturas de una sola página

Toda la aplicación se basa en una sola página. Una vez que el usuario accede a tu aplicación, no necesita navegar a ninguna otra página web. La aplicación se hace lo suficientemente dinámica como para obtener y renderizar pantallas que satisfagan los requisitos de los usuarios mientras navegan por la propia aplicación.

Arquitectura de una sola página

Ventajas

* Puedes construir aplicaciones web altamente interactivas. * Las SPA son fáciles de escalar. * Optimizar las SPA para el rendimiento no requiere mucho esfuerzo.

Arquitectura de una sola página

Desventajas

* Las SPA limitan la flexibilidad con los hipervínculos y el SEO. * El renderizado inicial suele ser lento. * La navegación por la aplicación puede ser poco intuitiva.

Tipos de Arquitectura de Aplicaciones Web

Arquitecturas de Aplicaciones Web Progresivas

La arquitectura de la Aplicación Web Progresiva (PWA) se basa en la Arquitectura de Página Única proporcionando capacidades offline para tu aplicación web.Al igual que las SPA, las PWA son fluidas y sin fisuras. Con la capacidad añadida de instalarse en los dispositivos de los usuarios (a través de service workers), tus usuarios obtienen una experiencia más uniforme con tu aplicación.

Arquitecturas de Aplicaciones Web Progresivas

Ventajas

* Las aplicaciones se ejecutan con mucha fluidez y ofrecen compatibilidad entre plataformas. * La escalabilidad es sencilla. * Los desarrolladores pueden acceder al acceso sin conexión y a las API nativas de los dispositivos, como los trabajadores en segundo plano y las notificaciones push.

Arquitecturas de Aplicaciones Web Progresivas

Desventajas

* Hay un soporte limitado para la gestión de enlaces y el SEO. * Enviar actualizaciones a las PWA sin conexión es más complejo que con las aplicaciones nativas. * La compatibilidad de las PWA con los navegadores web y sistemas operativos es limitada.

Tipos de Arquitectura de Aplicaciones Web

Arquitectura de Renderizado del Lado del Servidor

En la renderización del lado del servidor (SSR), las páginas web del frontend se renderizan en un servidor backend después de ser solicitadas por el usuario. Esto ayuda a reducir la carga en el dispositivo del cliente, ya que recibe una página web estática de HTML, CSS y JS.

Arquitectura de Renderizado del Lado del Servidor

Ventajas

* Estas aplicaciones son estupendas para los sitios web con mucho SEO. * La carga de la primera página es casi instantánea en la mayoría de los casos. * Puedes combinarla con un servicio de caché para mejorar aún más el rendimiento de tu aplicación.

Arquitectura de Renderizado del Lado del Servidor

Desventajas

* No se recomienda para páginas web complejas o pesadas, ya que el servidor puede tardar en generar completamente la página, lo que provoca un retraso en la primera carga. * Se recomienda sobre todo para aplicaciones que no se centran mucho en la interfaz de usuario y sólo buscan una mayor escalabilidad o seguridad.

Tipos de Arquitectura de Aplicaciones Web

Arquitectura de Aplicaciones Prerrenderizadas

Las páginas web del frontend de la aplicación se generan previamente y se almacenan como archivos HTML, CSS y JS planos en el servidor. Una vez que el usuario solicita una página, ésta se obtiene directamente y se le muestra. Esto hace que la aplicación web sea muy rápida, con tiempos de carga mínimos de cualquier tipo.

Arquitectura de Aplicaciones Prerrenderizadas

Ventajas

* Las páginas web se generan en HTML, CSS y JS puros, por lo que su rendimiento es similar al de las aplicaciones construidas con vanilla JS. * Si conoces todas las rutas posibles de tu aplicación, el SEO se vuelve superfácil.

Arquitectura de Aplicaciones Prerrenderizadas

Desventajas

* El contenido dinámico no se puede servir con estas aplicaciones. * Hacer cualquier cambio en la aplicación web significa reconstruir y desplegar completamente la aplicación desde cero.

Tipos de Arquitectura de Aplicaciones Web

Arquitectura de Aplicaciones Isomórficas

Las aplicaciones isomórficas son aquellas que son una mezcla de aplicaciones renderizadas en el lado del servidor y SPA. Esto significa que dichas aplicaciones se renderizan primero en el servidor como una aplicación normal renderizada del lado del servidor.

Arquitectura de Aplicaciones Isomórficas

Ventajas

* Las apps isomórficas tienen una renderización inicial súper rápida y soporte completo para el SEO. * Estas aplicaciones también tienen un buen rendimiento en el cliente, ya que se convierten en una SPA después de la carga.

Arquitectura de Aplicaciones Isomórficas

Desventajas

* La puesta en marcha de una aplicación de este tipo requiere de un conocimiento profundo. * Las opciones del stack tecnológico son limitadas cuando se trata de diseñar una aplicación isomórfica. Sólo puedes elegir entre un puñado de librerías y frameworks (en su mayoría) basados en JS.

Tipos de Arquitectura de Aplicaciones Web

Arquitectura Orientada al Servicio

En esta arquitectura, las aplicaciones web se dividen en servicios que representan una unidad funcional de negocio cada uno. Estos servicios están débilmente acoplados e interactúan entre sí mediante el paso de mensajes. La arquitectura orientada a servicios añade estabilidad y escalabilidad al stack tecnológico de tu aplicación.

Arquitectura Orienta al Servicio

Ventajas

* Esta arquitectura ayuda a construir aplicaciones altamente escalables y fiables.* Los componentes son reutilizables y se comparten para mejorar los esfuerzos de desarrollo y mantenimiento.

Arquitectura Orientada al Servicio

Desventajas

* Las aplicaciones SOA aún no son 100% flexibles, ya que el tamaño y el alcance de cada servicio no son fijos. Puede haber servicios del tamaño de aplicaciones empresariales que pueden ser difíciles de mantener. * La compartición de componentes introduce dependencias entre los servicios.

Tipos de Arquitectura de Aplicaciones Web

Arquitectura de Microservicios

La arquitectura de microservicios es probablemente la mejor arquitectura para construir aplicaciones que pretenden escalar algún día a miles y millones de usuarios. Cada componente es resistente, escalable y fácil de mantener. Sin embargo, el mantenimiento del ciclo de vida de DevOps para una aplicación basada en microservicios requiere esfuerzos adicionales, por lo que podría no ser adecuado para casos de uso más pequeños.

Arquitectura de Microservicios

Ventajas

* Los componentes de las aplicaciones son muy modulares, independientes y pueden reutilizarse en mayor medida que los de la arquitectura orientada a servicios. * Cada componente puede escalarse de forma independiente para satisfacer el tráfico variable de usuarios. * Las aplicaciones basadas en microservicios son altamente tolerantes a los fallos.

Arquitectura de Microservicios

Desventajas

* Para los proyectos más pequeños, la arquitectura de microservicios puede requerir demasiado esfuerzo de mantenimiento.

Tipos de Arquitectura de Aplicaciones Web

Arquitectura sin Servidor

Esta arquitectura se centra en desglosar tu aplicación en términos de las funciones que debe realizar. A continuación, estas funciones se alojan en plataformas FaaS (Function-as-a-Service) como funciones que se invocan a medida que llegan las solicitudes.

Arquitectura sin servidor

Ventajas

* Las aplicaciones sin servidor son muy fácilmente escalables. Incluso pueden adaptarse al tráfico entrante en tiempo real para reducir la carga de tu infraestructura. * Estas aplicaciones pueden utilizar el modelo de precios de pago por uso de las plataformas sin servidor para reducir los costes de infraestructura. * Las aplicaciones sin servidor son bastante fáciles de construir y desplegar, ya que todo lo que tienes que hacer es escribir una función y alojarla en una plataforma como funciones Firebase, AWS Lambda, etc.

Arquitectura sin servidor

Desventajas

* Las tareas de larga duración pueden ser costosas en una arquitectura de este tipo. * Cuando una función recibe una petición después de mucho tiempo, se conoce como arranque en frío. Los arranques en frío son lentos y pueden proporcionar una mala experiencia a tu usuario final.

Evolución de las Aplicaciones Web

La programación web es un término adecuado para describir el proceso general que engloba el diseño y la creación de un sitio web. Hace algunos años, los sitios web no eran mucho más que folletos digitales. Actualmente los sitios son más grandes y complejos.

La Web 1.0

La Web 1.0 (1991-2003) es la forma más básica que existe, con navegadores de sólo texto bastante rápidos ya que es de sólo lectura. El usuario no puede interactuar con el contenido de la página (nada de comentarios, respuestas, citas, etc), estando totalmente limitado a lo que el Webmaster sube a ésta.

La Web 2.0

El término Web 2.0 comprende aquellos sitios web que facilitan el compartir información, la interoperabilidad, el diseño centrado en el usuario1 y lacolaboración en la World Wide Web. Un sitio Web 2.0 permite a los usuarios interactuar y colaborar entre sí como creadores de contenido generado por usuarios en una comunidad virtual, a diferencia de sitios web estáticos donde los usuarios se limitan a la observación pasiva de los contenidos que se han creado para ellos.

La Web 3.0

Web 3.0 es una expresión que se utiliza para describir la evolución del uso y la interacción de las personas en internet a través de diferentes formas entre los que se incluyen la transformación de la red en una base de datos, un movimiento social hacia crear contenidos accesibles por múltiples aplicaciones non-browser, el empuje de las tecnologías de inteligencia artificial, la web semántica, la Web Geoespacial o la Web 3D.

La Web 4.0

Las aplicaciones ya no estarán en nuestras PC’s, estarán en la internet y por ende en todos lados. Pasaremos de una red “tonta” a una red “inteligente” donde el objetivo primordial será el de unir las inteligencias donde tanto las personas como las cosas se comuniquen entre sí para generar la toma de decisiones.

Referencias Bibliográficas

https://www.hostingplus.mx/blog/funcionamiento-y-evolucion-de-las-aplicaciones-web/https://unidad1programacionweb.wordpress.com/2014/03/04/1-1-evolucion-de-las-aplicaciones-web/ https://kinsta.com/es/blog/arquitectura-aplicaciones-web/#arquitectura-orientada-al-servicio

Gracias por su Atención