Interacciones en la Web Dinámica: Conceptos de JavaScript

**T-3 INTERACCIONES EN LA WEB DINÁMICA**

**3. Conceptos de JS**

**1.- 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 del navegador) y los datos (base de datos) para evitar dependencias.

Existen muchos patrones, según la solución que se quiera obtener.

**2.- Arquitectura de SW típica**

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

• Presentation Tier (El nivel superior de la aplicación es la interfaz de usuario. La función principal de la interfaz es traducir tareas y resultados a algo que el usuario pueda entender.)
• Logic Tier (Esta capa coordina la aplicación, procesa los comandos, toma decisiones y evaluaciones lógicas y realiza cálculos. También mueve y procesa datos entre las dos capas circundantes.)
• Data tier (Aquí la información se almacena y recupera de una base de datos o sistema de archivos. Luego, la información se pasa de vuelta al nivel lógico para su procesamiento y, finalmente, de vuelta al usuario.)

La manera de trabajar con ellas es la que determina el patrón.

**3.- Dif tipos de patrones**

• a) Modelo-vista-controlador (MVC)
• b) Modelo-vista-Modelo de vista (MVVM)
• Hay más tipos...

**4 MODELO-VISTA-CONTROLADOR**

-Esquema circular-

1. Persona --usa--> Controlador --manipula--> Modelo --actualiza--> Vista --observa--> Persona de nuevo

**MODELO)**

¿Qué es? Es un componente de la aplicación que define y maneja todas las entidades de la aplicación. El OBJETIVO de esta capa es eliminar cualquier dependencia de la forma en que los datos son representados.

Idealmente, deberías ser capaz de tomar las clases que pertenecen a este componente y usarlas en otra aplicación sin hacerles ningún cambio.

**VISTA:**

Representada por la interfaz de usuario. Contienen todos los controles y las animaciones que definen la parte visual de la aplicación.

**CONTROLADOR**

Existe entre la vista y el modelo. Escucha los eventos desencadenados por la vista y ejecuta el procedimiento adecuado a estos eventos.

**MODELO-VISTA-MODELO DE VISTA**

-Esquema 3 columnas-

1. Vista (abajo. interfaz de usuario) //a: Data binding- b) comandos//
2. ViesModel (abajo. lógica de presentación) //esta columna la forma 2 cuadros el de arriba y abajo//
3. a) Modelo 3b)Modelo (abajo de los dos. Lógica de negocio)

**DEFINICIÓN:**

Es el patrón que usan algunos Frameworks como VUE. El patrón view-model o Model-view-view-model consiste en añadir una capa de lógica entre nuestra capa de negocio y nuestra capa de UI (interfaz de usuario) para evitar que una tenga que comunicarse directamente con la otra:

Cuando la vista -la representación de una entidad en la capa de presentación- o el modelo -su representación en la capa de negocio- cambien, el view-model se encargará de actualizar su contrapartida en la otra capa de forma automática.

**Ventajas de MVVM**

• Al dividir el código en tres capas diferentes es más fácil de mantener y evolucionar la aplicación (facilita el trabajo en equipo).
• Como no hay dependencias entre cada capa, el trabajo puede hacerse en paralelo (ej. un diseñador puede empezar a trabajar en la interfaz de usuario mientras otro desarrollador puede crear los servicios que usará la página para obtener datos).

**2.- RENDERIZADOS**

**¿Qué es renderizar una web?**

Es la representación gráfica del código fuente. En una página web, el renderizado de la página ocurre cuando se visita y su contenido se pinta en la pantalla del navegador. El renderizado puede ser en el servidor o en el cliente.

**Server side rendering SSR**

SSR o server-side rendering: se renderiza el HTML del cliente totalmente en el lado del servidor. La capacidad para construir el etiquetado de página y vistas con datos y resultados que se enviará al navegador y este se limitará a pintar en pantalla. Es el modelo clásico que ocurre en las webs tradicionales.

Esquema del ciclo tradicional de una página (pág 20).

**MPA (Multiple Page Application)**

Es el sistema tradicional para crear páginas o aplicaciones web. El navegador se descarga el fichero .html, lo lee y luego realiza las peticiones de los restantes archivos relacionados que encuentra en el documento HTML. Si el usuario pulsa en algún enlace se descarga el .HTML de dicho enlace (recargando la página completa) y se repite el proceso.

**CSR (Client Side Render.**

CSR o client side rendering: se renderiza la aplicación completamente en el navegador (del cliente) haciendo uso de Javascript y la gestión del DOM. Comúnmente se conoce como Single Page application.

**Peticiones parciales:**

A través de Javascript (AJAX). Servían para actualizar secciones específicas, repintar bloques con datos actualizados, modificar vistas, etc. Esto hacía un SSR modificado, algo más liviano y llevadero

**Paradigma SPA**

Hay un desacoplamiento total entre los componentes. Las vistas son bloques parciales que obtienen o ingresan datos al modelo y se actualizan de manera individualista.

**Single Page Application (SPA)**

Una Single Page Application o SPA, es un sitio web que recarga y muestra su contenido en respuesta a acciones propias de la navegación (enviar formulario, hacer clic en enlace, acceder a una sección interna…) sin tener que hacer peticiones al servidor para volver a cargar más código HTML.

Las aplicaciones web básicas lo hacían por completo, AJAX lo intentaba resolver parcialmente y ahora SPA trata de reducirlo al mínimo necesario.

El navegador se descarga una versión mínima de .html junto a un .js que se encargará de controlar toda la web.

Hará peticiones de los archivos relacionados junto a peticiones a archivos .json o .js con más información o nuevos contenidos, que mostrará en el navegador parcial o completamente, pero sin la necesidad obligatoria de recargar la página completamente.

Este sistema se usa mayoritariamente para construir aplicaciones web como dashboards o sitios de gestión en los que no necesitamos «navegar» a través de una serie de páginas.

Ej. Las páginas como WhatsApp Web, Twitter o Google Drive podrían ser ejemplos de SPA.

 ejemplos app SPA gmail, netflix, trello, github Hibrido. La rehidratacion es una tenica de renderizados hibrido, la cual try posicionarse en el medio de SSR y CSR, aprovechando lo mejor de cada mundo. 3 FRAMEWORK JS: VUEJS- QUE ES?. Vue.js (tmb llamado VUE o VUEJS) es un framework front-end (lado del cliente) basado en javascript k permite contruir sitios web interactivos. (JAVASCRIPT. Lenguaje de prog soportado x todos los nav y permite actualizar la interfaz web sin acceder al servdiro y ofrece gran interactividad al usuario/ FRAMEWORK. es una biblio (creada x terceros) k expone funciones utiles y un conjunto d reglas (y una clara guia/ documentacion) para desarollar javascript/ INTERACTIVO. la aplicaciones web es capaz de interactuar con el usuario y actualizar la pantalla de forma dinamica/ PAGINAS WEB FRONT-END. Lo k el usuario ve HTML+CSS+JS y se ejecuta en el nav del cliente. Caracteristicas VUE(mas info en pag 3) Es una framework progresivo, es decir, no hae falta incluir todas las librerias hasta que se necesitan. /El desarrollador incorpora modulos segun sus necesidades en el proyecto./---- Proporciona componentes visuales de forma reactiva (renderiza los cambios automaticamente): 1) Piezas de interfaz de usuario (ui) bien encapsulados k exponen una api con propiedades de entrada y emision de eventos. 2) Los componentes reaccionan ante eventos masivos sin k el rendimiento se vea perjudicado./----- Dispone de directivas, filtros y componentes bien difereciados: DIRECTIVAS(ref + extens pag 3). atributos especiales para escribir el cod/ FILTROS (ref + extens pag 3): transforman datos en la vista (ej. cambian de minusculs a mayus)/ COMPOENTES. (ref + extens pag 3)  elementos reutilizables. 

Módulos VUE. 1) VUE. El core o nucleo del framework Vue, dnd residen sus funciones principaes (permite le desarrollo de componentes de UI x medio de JavaScript). 2)VUE CLI. Asistente xra crear y administrar proyectos de vue desde un terminal o entorno grafico. 3)VUE ROUTER. Sistema para crear y gestionar rutas URL desde el nav en una aplicacion de vue. 4) VUEX gestor de estados para aplicaciones SPA de Vue. 5)VUE TEST UTILS- API para hacer test sbre nuestr aplicacion vue. K ES DIRECTIVA.? Son atribtos especiales k se colocan en las etiquetas HTML./ Tienen prefijo v- (ejemplo: v-for/ v-bind o v-on..)/ Permiten hacer cciones dinamicas potentes (bucles, condicionales...) k no se pueden hacer en html por si solo, pero k VUE permite usar en sus etiquetas . K ES FILTRO?: Tranform un dato para k pueda visualizarse en la interfaz de forma apropiada (ej. cambiar de minusvulas a mayusculas) K ES COMPONENTES? Son elementos k tienen nombre y se puede instancializar (hacer un componente concreto para utilizar) de forma indefinida (muchas veces). Caracteristias VUE. Utiliza Virtual DOM -no need(las operacioens mas costosas en javascript suelen ser las k work con la api dom/ vuejs por su naturaleza reactiva, esta produciendo cambios en el DOM constantemente/ par ir mas rapido, usa una copia en chache del arbol DOM para actualizar partes de la interfaz o de componentes. /// Externaliza el ruteo y la gestion de estado en una lbreria -no need(un enrutador nos permite decir, para la url det, k componente renderizar/ utiliza libreria de vue-router)// Sigue un flujo one-way data-blinding para la comunicacion entre componentes/ que es flujo one way data blinding? el flujo de datos unidireccional means k el modelo es la unica fuente d verdad donde se encuentran los datos/ los cambios en la interfaz de usuario desencadean mensajes k indican la intencion del usuario para el modelo/ solo el modelos tiene accesos para cambiar el estado de la aplicacion caracteristcas VUE Tmb sigue un flujo de doble-way data binding para la comunicacion de modelos dentro de un compoennte aislado. que es el flujo doble way data binding? el enlace d dats bidirecional means k los campos d la interfaz de usuario (ui) estan vinculados a los datos del modelo d forma dinamica, de modo k cuando un campo de la IU cambia, los datos del modelo cambian con el (se actualizan) y viceversa. Caracteristicas vue el codigo generado es compatible con qualquier nav (no ned- a prtir de internet explorer 9/ soporte nativo de componentes web para safari 10.1+, chrome 54+ and firefox 63+) / es extensible. VUE se puede extender sus funcionalidades mediante plugins/ T-4.1 USO DE DATOS DINAMICOS:Acceso y uso d datos d forma dinamica. 1.- Servicios web, APIs y Json Servicios web: es una tecnología k usa un conj d protocolos y estándares k sirven para intercambiar datos entre aplicaciones. Interfaz de programacion de Aplicaciones (API)- tipos d apis (pag4) : Es una interfaz k permite el intercambio d informacion entre dos componentes de software independientes. JavaScript Object Notation (Json): Un archivo que almacena objetos y estructuras de datos simples, para el intercambio de datos./ Es una representacion d datos en un fichero de txt plano./ Facil de leer y escribir/Se usa mucho para intercambio de datos ligeros.

2.- Ejemplos de uso de APIs (Pract2). Ej1: Acceso a una API propia (en el propio servidor). Ej2: Acceso a una api externa (colgada en un servidor web) Como funciona? AXIOS: para obtener el fichero de la web./ Axios es una libreria JavaScript que puede ejecutarse en el nav y k nos permite hacer sencillas las operaciones como cliente HTTP, por lo k podremos configurar y realizar solicitudes a un servidor y recibiremos respuestas faciles d procesar. FETCH: para tratar los datos (añadirlos a una array)./fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, como peticiones y respuestas. Recursos de otras Apis Json: TIPOS DE APIS: 1)Auth: con autentificacion (need registros) /2)HTTPS: el tipo de conexión /3)CORS: necesita control de acceso.