Code Training Unit

ARQUITECTURA DE LAS APLICACIONES WEB

START >

>

>

<Arquitectura Monolitica>

• Proyectos Pequeños o Medianos: La arquitectura monolítica es ideal para aplicaciones de tamaño pequeño o mediano, donde la simplicidad es clave y no se espera un crecimiento significativo a corto plazo.

• Startups o MVPs (Minimum Viable Products): Es común en startups o en el desarrollo de MVPs, donde el tiempo de desarrollo es crítico y se necesita lanzar un producto rápidamente para validar ideas o captar usuarios iniciales.

• Aplicaciones Internas de Negocios: Las aplicaciones empresariales internas, que no requieren un gran enfoque en la escalabilidad o la modularidad, suelen beneficiarse de una arquitectura monolítica por su simplicidad en el desarrollo y mantenimiento.

• Sistemas de Gestión: Aplicaciones como sistemas de gestión de inventarios, CRM simples, o herramientas de gestión de proyectos, donde la funcionalidad es relativamente sencilla y bien definida.

>

>

<Ventajas>

• Simplicidad del d esarrollo:

Debido a que todo el codigo esta en un solo lugar, es mas facil de desarrllar y mantener para equipos pequeños, especialmente al inicio de un proyecto.

• Simplicidad del desarrollo:

Es mas sencillos realizar pruebas de integracion y pruebas unitarias ya que todos los componentes estan en el mismo entorno.

• Simplicidad del desarrollo:

Solo se necesita un despliegue, lo que reduce la complejidad en comparacion con arquitecturas mas fragmentadas.

>

>

<Desvenajas>

• Escalabilidad Limitada: A medida que la aplicación crece, puede volverse difícil de escalar horizontalmente (escalar agregando más instancias).

• Mantenimiento Complicado: A medida que el código crece, se hace más difícil de gestionar, mantener y actualizar sin introducir errores.

• Riesgo de Fallos: Un fallo en cualquier parte del código puede potencialmente derribar toda la aplicación.

• Dificultad para Innovar: Incorporar nuevas tecnologías o actualizar partes de la aplicación puede ser complicado debido a la alta interdependencia de los componentes.

¿Qué es?Una arquitectura de microservicios divide una aplicación en una serie de servicios implementables de forma independiente que se comunican a través de API. Este enfoque permite implementar y escalar cada servicio individual de forma independiente, así como la entrega rápida y frecuente de aplicaciones grandes y complejas. A diferencia de una aplicación monolítica, una arquitectura de microservicios permite a los equipos implementar nuevas funciones y hacer cambios más rápido, sin tener que volver a escribir una gran parte del código existente.

>

Arquitectura de Microservicios

>

>

>

desventajas

ventajas

Arquitectura de Microservicios

Algunas de las ventajas de la arquitectura de microservicios son: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.

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

>

>

VENTAJAS DE AQUITECTURA DE TRES CAPAS

Reutilización de código: Las capas se pueden reutilizar en diferentes partes de la aplicación o incluso en otras aplicaciones.Escalabilidad: La separación en capas permite escalar cada una de ellas de manera independiente según las necesidades de la aplicación. Flexibilidad: Cambios en una capa (por ejemplo, cambiar la base de datos) no afectan directamente a las otras capas, siempre que las interfaces entre ellas se mantengan constantes.

DESVENTAJAS

>

>

Complejidad adicional: La separación en capas puede añadir complejidad al diseño y desarrollo de la aplicación, especialmente para proyectos pequeños que podrían no necesitar tanta modularidad. Rendimiento: La división en tres capas puede introducir una sobrecarga adicional debido a la necesidad de comunicación entre capas, lo que puede afectar el rendimiento, especialmente en aplicaciones con alta demanda de procesamiento. Tiempo de desarrollo: El desarrollo puede ser más lento debido a la necesidad de diseñar, implementar y mantener tres capas separadas, lo que requiere más planificación y coordinación. Mayor costo inicial: Implementar una arquitectura de tres capas generalmente requiere más recursos en términos de tiempo y esfuerzo al principio del proyecto, lo que puede incrementar los costos iniciales. Dependencia entre capas: Aunque la separación de responsabilidades es una ventaja, también puede crear dependencias estrictas entre las capas, lo que complica los cambios si no se maneja adecuadamente la comunicación entre ellas.

>

>

Aplicaciones web:Es muy utilizada en el desarrollo de aplicaciones web modernas, donde la capa de presentación corresponde al frontend (HTML, CSS, JavaScript), la lógica de negocio se maneja en el backend (como con frameworks de servidor en Node.js, Django, etc.), y la capa de datos se gestiona a través de bases de datos relacionales o no relacionales.Aplicaciones empresariales:Se emplea en sistemas empresariales complejos, como ERP (Enterprise Resource Planning) y CRM (Customer Relationship Management), donde es crucial manejar grandes volúmenes de datos y aplicar reglas de negocio específicas.Sistemas distribuidos:Utilizada en aplicaciones que necesitan distribuirse a través de diferentes servidores o ubicaciones, permitiendo que la lógica de negocio y los datos se manejen en servidores distintos, mejorando la escalabilidad y la resiliencia.Aplicaciones móviles:Se aplica en el desarrollo de aplicaciones móviles, donde la interfaz de usuario (app) interactúa con una API (capa de lógica de negocio) y esta a su vez maneja los datos almacenados en un servidor.Sistemas de información:En sistemas que gestionan, analizan y presentan grandes volúmenes de datos, como sistemas financieros, de inventario o de reportes, donde la separación en capas permite manejar eficientemente la complejidad de las operaciones.

USO Y APLICACIONES

>

>

Es una extensión de la arquitectura de tres capas, a medida que las aplicaciones se vuelven más complejas, la arquitectura de tres capas puede no ser suficiente, por lo que se agregan más capas para manejar funciones especializadas

// Arquitectura de N Capas

• Portabilidad entre la nube y entornos locales, y entre plataformas en la nube.
• Menor curva de aprendizaje para la mayoría de los desarrolladores.
• Coste relativamente bajo al no rediseñar la solución
• Evolución natural desde el modelo de aplicaciones tradicional.
• Abiertas a entornos heterogéneos (Windows o Linux)

// Ventajas

>

>

>

>

• Complejidad: A medida que se agregan más capas, la arquitectura del sistema se vuelve más compleja.
• Rendimiento: El paso de datos entre múltiples capas puede introducir latencia .

• Sobrecarga de Comunicación:La necesidad de coordinar y comunicar entre capas puede resultar en sobrecarga adicional.

• Mantenimiento más complejo: Si no se gestiona adecuadamente, puede dificultar el rastreo de errores y el mantenimiento del sistema.

// Desventajas

>

>

• Aplicaciones web simples.
• Un buen punto de partida cuando los requisitos de arquitectura aún no están claros.
• La migración de una aplicación local a Azure con mínima refactorización.
• El desarrollo unificado de aplicaciones locales y en la nube.

// Cuándo utilizar esta arquitectura

Con una arquitectura Serverless podemos procesar miles de peticiones, hasta millones, sin pensar en la capacidad de recursos necesarios para que la aplicación funcione correctamente, la escalabilidad está garantizada.Los usuarios ya no tienen que preocuparse por los servidores, puesto que es un tercero (generalmente, el proveedor de la nube) quien se encarga de todo lo relacionado con ellos.

// Arquitectura Serverless

>

>

>

>

- Latencia en inicio en frío: Tiempo de arranque más largo después de periodos de inactividad.- Limitaciones de ejecución: Restricciones en tiempo y recursos disponibles para cada función.- Dependencia del proveedor: Dificultad para cambiar de plataforma (vendor lock-in).- Complejidad en la depuración: Herramientas de monitoreo y depuración menos maduras.- Costos ocultos: Los costos pueden aumentar con un alto volumen de solicitudes.- Limitaciones de control: Menor control sobre la configuración de la infraestructura

Desventajas

- No hay necesidad de administrar infraestructura- Escalabilidad - Ahorro de costos- Alta disponibilidad y tolerancia a fallas

ventajas

Arquitectura Serverless

>

>

// Arquitectura de Páginas Estáticas

• Sitios Web Pequeños o de Contenido Estático: Es ideal para sitios web que no requieren interacción dinámica con el usuario, como portafolios, blogs personales, páginas de aterrizaje, y sitios de documentación.

• Landing Pages y Páginas Promocionales: Las páginas estáticas son perfectas para páginas de marketing que buscan rapidez de carga y bajo costo de mantenimiento.

• Documentación Técnica: Proyectos de documentación, como las páginas generadas con herramientas como Jekyll, Hugo o GitBook, donde el contenido no cambia con frecuencia y es primordial un acceso rápido.

• Proyectos de Código Abierto: Muchos proyectos de código abierto utilizan páginas estáticas para documentar sus herramientas o librerías, ya que son fáciles de desplegar y mantener.

• Páginas Informativas Corporativas: Sitios web de empresas donde se presenta información corporativa, de productos o servicios que no requieren cambios constantes ni interacción con bases de datos.

//Usos y aplicaciones

>

>

- Cambios más complicados. La mayor desventaja de un sitio estático es que su contenido no se puede modificar fácilmente y requiere unos conocimientos para actualizar, agregar o cambiar cualquier contenido. Además, todos los archivos HTML deben cambiarse individualmente- No es buena a largo plazo. En algún momento se tendrá que actualizar para que nuestro sitio no ofrezca una imagen obsoleta- Funcionalidad limitada. La Web estática no brinda todas las funcionalidades que ofrece un sitio Web dinámico. Podremos añadir texto, imágenes, vídeos y enlaces en el contenido, pero aparte de eso, no hay otras funciones especiales que se puedan realizar. Aunque es posible recurrir a algunas extensiones para añadir las funciones más populares como: Comentarios (Disqus), Newsletters (MailChimp), Formularios (Typeform) o Social media (AddThis)

desventajas

- Tiene un rápido desarrollo.- Funciona en cualquier servidor, por lo que su portabilidad se realiza de manera sencilla y no es necesario requerimientos técnicos avanzados.- Al evitar un lenguaje de programación del lado del servidor y de bases de datos, el tiempo de carga es mínimo- Nos olvidamos de problemas de seguridad y de rendimiento, ya que nuestra Web cuenta solo con archivos HTML, CSS y JavaScript.- Facilita el posicionamiento SEO al tener un mayor rendimiento..

ventajas

Arquitectura de Páginas Estáticas

Arquitectura de Aplicaciones de Página Única (SPA - Single Page Application)ventajas

>

>

Experiencia de usuario fluida: Las SPA ofrecen una navegación rápida y sin interrupciones, ya que no es necesario recargar la página al cambiar de vista o realizar acciones. Esto proporciona una experiencia similar a la de una aplicación de escritorio. Rendimiento mejorado: Una vez cargada la aplicación, las interacciones posteriores son más rápidas, ya que solo se intercambia la información necesaria con el servidor, en lugar de recargar páginas completas. Desarrollo modular: Frameworks como React, Angular y Vue.js facilitan un desarrollo más organizado, modular y mantenible, permitiendo reutilizar componentes y mejorar la estructura del código. Menor carga en el servidor: Dado que el servidor solo maneja peticiones de datos después de la carga inicial, se reduce la carga en el servidor, lo que puede resultar en un menor consumo de recursos.

SEO limitado:Las SPA pueden ser difíciles de indexar correctamente por los motores de búsqueda, lo que afecta su posicionamiento SEO. Esto se debe a que el contenido se genera dinámicamente en el navegador en lugar de estar presente en el HTML inicial.Carga inicial más lenta:La primera vez que se carga una SPA, todos los recursos (HTML, CSS, JavaScript) deben descargarse, lo que puede resultar en un tiempo de carga inicial más largo, especialmente en conexiones lentas.Mayor complejidad en la seguridad:Las SPA, al estar basadas en JavaScript, pueden ser más vulnerables a ciertos tipos de ataques, como Cross-Site Scripting (XSS), y requieren una implementación cuidadosa de las medidas de seguridad.Problemas de compatibilidad:Algunas funcionalidades avanzadas de las SPA pueden no ser compatibles con navegadores antiguos o ciertas configuraciones del usuario, lo que puede limitar su accesibilidad.

desventajas

>

>

>

>

USO Y APLICACIONES

Aplicaciones web interactivas: SPAs son ideales para aplicaciones que requieren una alta interactividad con el usuario, como paneles de control, redes sociales, aplicaciones de mensajería, y servicios de email. Aplicaciones de comercio electrónico: Las tiendas en línea que quieren proporcionar una experiencia de compra rápida y sin fricciones pueden beneficiarse del uso de una SPA. Aplicaciones de gestión de contenido: Sistemas como administradores de contenido (CMS), donde la edición y visualización de datos deben ser rápidas y eficientes. Aplicaciones de productividad: Herramientas como editores de texto en línea, aplicaciones de gestión de proyectos, y plataformas de colaboración que necesitan una respuesta rápida y eficiente para las acciones del usuario.

>

>

• E-commerce (Comercio Electrónico): desean proporcionar una experiencia de compra rápida y fluida.
• Medios de Comunicación y Noticias: que permiten a los usuarios acceder a contenido rápidamente, incluso con conexiones a Internet limitadas
• Redes Sociales y Aplicaciones de Mensajería: pueden enviar notificaciones push y trabajar sin conexión

// Arquitectura de Aplicaciones Progresivas (PWA - Progressive Web Application)

>

>

• 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.

// Ventajas

>

>

• Hay un soporte limitado para la getion de enlaces y el SEO
• Enviar actualizaciones a las PWA sin conexion es mas complejo que con las aplicaciones nativas.
• la compatibilidad de las PWA con los navegadoes web y sistemas operativos es limitada

// desventajas

>

>

// 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. Las aplicaciones SSR son muy populares entre los blogs y los sitios web de comercio electrónico. Esto se debe a que hacen que la gestión de enlaces y el SEO sean bastante sencillos. Además, la primera representación de las aplicaciones SSR es bastante rápida, ya que el cliente no tiene que procesar ningún código JS para representar las pantallas.

>

>

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.

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.

ventajas

>

Gracias!!