T-3 Interacciones en la Web Dinámica

1. Conceptos de JavaScript: Patrones de Arquitectura de Software

¿Qué son?

Un patrón es una solución reutilizable, aplicable a diferentes problemas de diseño de software. ¿Qué hacen? Facilitan la separación entre la presentación (vista en el navegador) y los datos (base de datos) para evitar dependencias.

Arquitectura de Software Típica

Tradicionalmente, los sistemas se dividían en tres capas:

  • Presentation Tier: El nivel superior de la aplicación es la interfaz de usuario. Su función es traducir tareas y resultados a algo que el usuario pueda entender.
  • Logic Tier: Coordina la aplicación, procesa comandos, toma decisiones lógicas y realiza cálculos. Mueve y procesa datos entre las capas circundantes.
  • Data Tier: Aquí la información se almacena y recupera de una base de datos o sistema de archivos.

Tipos de Patrones

  • Modelo-Vista-Controlador (MVC)
  • Modelo-Vista-Modelo de Vista (MVVM)

Modelo-Vista-Controlador (MVC)

  • Modelo: Componente que define y maneja todas las entidades de la aplicación. El objetivo es eliminar la dependencia de cómo se representan los datos.
  • Vista: Representa la interfaz de usuario. Contiene controles y animaciones.
  • Controlador: Existe entre la vista y el modelo. Escucha eventos de la vista y ejecuta el procedimiento adecuado.

Modelo-Vista-Modelo de Vista (MVVM)

Es el patrón utilizado por frameworks como Vue.js. Consiste en añadir una capa de lógica entre la capa de negocio y la de interfaz de usuario (UI) para evitar que se comuniquen directamente. Cuando la vista o el modelo cambian, el view-model se encarga de actualizar su contrapartida automáticamente.

Ventajas: Facilita el mantenimiento, la evolución de la aplicación y el trabajo en paralelo entre diseñadores y desarrolladores.

2. Renderizados

Renderizar una web es la representación gráfica del código fuente. Ocurre cuando se visita la página y el contenido se pinta en el navegador.

  • Server Side Rendering (SSR): El HTML se renderiza totalmente en el servidor. Es el modelo clásico de las Multiple Page Applications (MPA).
  • Client Side Rendering (CSR): La aplicación se renderiza completamente en el navegador mediante JavaScript y la gestión del DOM. Comúnmente asociado a las Single Page Applications (SPA).

Paradigma SPA (Single Page Application)

Sitio web que recarga y muestra contenido en respuesta a acciones de navegación sin necesidad de recargar la página completa. Utiliza peticiones parciales (AJAX) y archivos JSON. Ejemplos: Gmail, Netflix, Trello, GitHub.

3. Frameworks JS: Vue.js

Vue.js es un framework front-end basado en JavaScript que permite construir sitios web interactivos. Es un framework progresivo, lo que significa que el desarrollador incorpora módulos según sus necesidades.

Características principales:

  • Reactividad: Proporciona componentes visuales que reaccionan ante eventos.
  • Virtual DOM: Usa una copia en caché del árbol DOM para actualizar partes de la interfaz de forma eficiente.
  • Directivas: Atributos especiales con prefijo v- (ej. v-for, v-bind).
  • Filtros: Transforman datos en la vista.
  • Componentes: Elementos reutilizables.
  • Flujo de datos: Soporta one-way data binding (modelo como única fuente de verdad) y two-way data binding (enlace bidireccional entre UI y modelo).

T-4.1 Uso de Datos Dinámicos

1. Servicios Web, APIs y JSON

  • Servicios Web: Conjunto de protocolos para intercambiar datos entre aplicaciones.
  • API: Interfaz que permite el intercambio de información entre componentes de software independientes.
  • JSON: Formato de texto plano para el intercambio de datos ligeros.

2. Herramientas de consumo

  • Axios: Librería JavaScript para realizar solicitudes HTTP como cliente.
  • Fetch: Interfaz nativa de JavaScript para acceder y manipular el canal HTTP.