8. Librerias y Frameworks JS¶
Como último tema del módulo, veremos cómo reutilizar código o incluso una arquitectura para desarrollar aplicaciones web más rápido, con cierta complejidad y fáciles de mantener. Aprenderás a:
Utilizar algún ejemplo de librerías javascript
Conocer los elementos de la arquitectura Jamstack
Usar React como ejemplo de framework web
Esfuerzo Necesario
El curso está organizado en 8 sesiones de clase. Cada clase (sesión) implica una dedicación de entre 2 y 4 horas.
La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.
8.1. Utilidad de las librerías JS¶
Biblioteca (library): conjunto de funciones (y más cosas) reutilizables en tu código
Usa la programación modular:
Dividir en bloques pequeños
Usando el patrón de diseño KISS
Para compartir el código
Librerías JS vs Frameworks Web vs Jamstack
Una librería no es un framework
Un framework usa, generalmente, librerías JS
Jamstack es una arquitectura de la aplicación
Javascript: como tecnología principal
Apis: para implementar funcionalidad externa
Markup: directo o para generar estáticamente (SSG), usando plantillas (frameworks web)
Actividad T08-A01. Tu biblioteca JS
Crea tu propia biblioteca JS (biblioteca.js), que podrías usar en diferentes sitios web. Por ejemplo, que tenga las siguientes funciones que ya hemos visto:
Cálculo del IMC de una persona
Función calculadora con la función como operador
Suma a cada elemento de un array, un valor. Los dos se pasan por parámetro.
Validación de un dni
Validación de una matrícula española
8.2. Bibliotecas JS¶
Hay un montón de bibliotecas JS
Empezaron siempre como una biblioteca particular
Cada día más útiles porque:
Genera código de más calidad (profesional)
Para cubrir necesidades específicas
Permite desarrollar mucho más rápido
Pero a un coste:
Rendimiento
Dependencia
Un primer ejemplo: librerías para dibujar gráficos (ChartJS )
Creas el componente donde irá el gráfico (elemento canvas en este caso porque usa el Canvas API)
Añades la librería
Usas la librería para dibujar el gráfico que te interesa (en este caso un diagrama de barras con los valores en el array data) usando el objeto Chart
<div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); </script>
Actividad T08-A02. Dibujar dos gráficos en una página web
Crea una página web que contenga dos gráficos, dentro de un componente con su título h1 correspondientes (fuera del gráfico). Es decir, es una web no sólo con los dos gráficos, que tenga al menos algo de texto.
Los 2 graficos son:
Un diagrama de barras con la cantidad de fruta que tenemos: 6 peras, 10 naranjas y 4 manzanas
Un histórico de temperaturas para los 12 meses del año (te inventas las temperaturas de cada mes)
8.3. Librería de Geolocalización¶
Leaflet permite la creación y uso de mapas interactivos
Funciona en la web única y con un peso ligero (menos de 50 KB)
Tiene multitud de funcionalidades:
Para visualizar información: mapas, imágenes, puntos de interés, marcadores …
Para interactuar con el mapa: desplazamiento por el mapa, de objetos, eventos …
Para controlar el mapa: capas, zoom …
Y es muy fácil de utilizar:
var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS popup.<br> Easily customizable.') .openPopup();
Actividad T08-A03. Mi primer mapa con Leaflet
Crea una web que tenga un componente que se llame mi-mapa en el que cargues un mapa de Vigo (España) y coloques un marcador sobre la posición en la que el CPR DanielCastelao y que diga «Aquí estudio yo».
8.4. Leaflet Quick Start Guide¶
Una guía paso a paso para conocer los elementos básicos
Usa las «teselas» de openstreetmap
Pasos a seguir:
Incluyes la librería JS y la hoja de estilos CSS
Defines el componente en el que irá el mapa (con un identificador y un tamaño)
Defino el objeto mapa (posición y nivel de zoom, vía opciones o con setView)
Añadimos información al mapa (podríamos tener varias capas y de diferentes orígenes). P.ej para capas raster usamos tileLayer
Añades objetos sobre el mapa (por ejemplo Marker , Circle , Polygon )
Puedes añadir mensajes a los objetos (PopUp )
Además cada objeto tiene un conjunto de eventos:
El evento se lanza cuando interactúa al usuario (hace zoom, pulsa sobre un objeto, …)
Capturas el evento y le asignas una función
Actividad T08-A04. Mi primer mapa con Leaflet
Al mapa creado en la sesión anterior, le vas a añadir los siguientes requisitos:
Le añades dos marcadores más
Y un círculo de color azul
Y un polígono de color verde
Cada objeto tendrá un aviso (popup) que se abrirá cuando pulses en el objeto
¿Sabrías como añadir las «teselas» de Google Maps?
Además, ya que el mapa está en la web, vas a crear una lista (una especie de log) donde, cada vez que se pulse en un objeto o en un punto del mapa, quedará registrado. Por ejemplo:
Pulsaste en el círculo
Pulsaste en la posición X,Y (x, y las coordenadas de la posición)
Pulsaste en el marcador
… y así sucesivamente
8.5. El Framework React¶
Biblioteca JS:
Centrada en el Diseño UI Web (también con React Native para desarrollo móvil)
Con datos que cambian continuamente («reacciona constantemente»)
Lenguaje declarativo, sencillo y fácil de combinar (componer)
Algunas características:
Usa componentes: bloques con los que construyes tu interfaz
Aunque opcional, usa el lenguaje de marcado JSX
Usa un DOM Virtual (frente al real de la aplicación), para controlar los cambios
Usa variables de estado para controlar cada elemento (visión instantánea del componente)
Usa atributos (propiedades) para configurar cada componente
Usa un ciclo de vida para el componente
Es una librería con un fuerte paradigma funcional
import { useState } from 'react'; export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>Counters that update together</h1> <MyButton count={count} onClick={handleClick} /> <MyButton count={count} onClick={handleClick} /> </div> ); } function MyButton({ count, onClick }) { return ( <button onClick={onClick}> Clicked {count} times </button> ); }
Permite realizar aplicaciones realmente complejas (vamos a ver sólo lo más básico)
-
Defines un componente (es una función que devuelve HTML o JSX)
Que exportas para poder reutilizarlo
Y luego lo usas como si fuera una nueva etiqueta HTML (la primera letra en mayúsculas y con cierre)
Construyes tu aplicación con diferentes componentes
Actividad T08-A05. Tu primera interfaz con React
Para el despliegue de la aplicación usas el editor en línea del tutorial (tiene un editor y visualizador integrado).
Diseño de componentes:
Crea un componente que devuelva la cadena de texto «Hola Mundo»
Crea un componente (como el ejemplo Profile) que devuelva una imagen
Crea un componente que sea una lista de tres elementos
Diseño de tu aplicación:
Mostrará un título h1 que sea «Ejemplo de Aplicación»
Y después una imagen, con un texto debajo que diga «Hola Mundo»
Y lo repites dos veces más. La última no llevará el texto que dice Hola Mundo
8.6. Describir la Interfaz¶
-
Devuelve un sólo nodo raíz (del que dependen todos los elementos)
Si no hay un div, usas etiquetas vacías
Todas las etiquetas han de cerrarse
Recuerda que es lo que devuelve tu componente
En JSX puedes usar expresiones JS usando llaves
Puede definir variables (o expresiones)
Y luego usarlas dentro del etiquetado JSX
Un objeto (JSON) es una variable también (puede ser confuso las dobles llaves)
Puedes usar «argumentos» en los componentes (props)
Son los «atributos» que le pasas a las etiquetas JSX (que pueden ser elementos HTML o componentes)
A su vez, un componente los puede usar. Es decir, un hijo puede leer esos valores (props) del componente padre
Permiten añadir personalización de los componentes usando «atributos» (propiedades)
import { getImageUrl } from './utils.js'; function Avatar({ person, size }) { return ( <img className="avatar" src={getImageUrl(person)} alt={person.name} width={size} height={size} /> ); }; export default function Profile() { return ( <div> <Avatar size={100} person={{ name: 'Katsuko Saruhashi', imageId: 'YfeOqp2' }} /> <Avatar size={80} person={{ name: 'Aklilu Lemma', imageId: 'OKS67lh' }} /> <Avatar size={50} person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} /> </div> ); };
Actividad T08-A06. Describiendo la interfaz
Refactoriza la aplicación de la clase anterior usando props, es decir, los componentes permitirán escribir texto diferente y url diferente para la imagen.
Añade un componente con una lista de 5 frutas (que estarán en una lista/array)
8.7. Programando la Interfaz¶
Puedes usar if/then/else o el operador ternario
?::
La lógica se hace en JS, pero está insertada en JSX (que devuelves en el componente)
Puedes usar arrays y programación funcional en el renderizado (por ejemplo con listas ):
Creas un array (simple o un array de objetos)
Creas un conjunto de nodos JSX usando el array (con la funcion map)
Usas ese nuevo array (de elementos JSX) en tu componente
const people = [ 'Creola Katherine Johnson: mathematician', 'Mario José Molina-Pasquel Henríquez: chemist', 'Mohammad Abdus Salam: physicist', 'Percy Lavon Julian: chemist', 'Subrahmanyan Chandrasekhar: astrophysicist' ]; export default function List() { const listItems = people.map(person => <li>{person}</li> ); return <ul>{listItems}</ul>; };
En la creación del array puedes usar objetos y filtrarlos usando el método filter() de un array
Cada elemento de un array necesita tener un identificador único (key)
Actividad T08-A07. Programando la interfaz
Crea una lista con 5 frutas que tienes en un array. Las frutas cuyo nombre tenga más de 5 caracteres, aparecerán en negrita
8.8. Agregando Interactividad¶
Puedes usar tu manejador para responder a eventos en JSX
Usas tu función como una prop del componente
Defines la función dentro del componente (o como función anónima en el evento JSX)
function AlertButton({ message, children }) { return ( <button onClick={() => alert(message)}> {children} </button> ); }; export default function Toolbar() { return ( <div> <AlertButton message="¡Reproduciendo!"> Reproducir película </AlertButton> <AlertButton message="¡Subiendo!"> Subir imagen </AlertButton> </div> ); };
La memoria de un componente se llama estado (y se puede gestionar)
Necesitamos guardar el estado (tener memoria de lo que ocurre en el componente)
Para eso usamos variables de estado
Que se definen usando una función especial (hook) llamada useState
Se pueden definir más de una variable de estado
// Es necesario importar la función especial (hook), en este caso useState import { useState } from 'react'; (...) // useState devuelve un array con dos valores (el estado inicial y la función que actualizará esa variable de estado const [index, setIndex] = useState(0);
Actividad T08-A08. Programando la interfaz
Tienes una BD de usuarios en el archivo usuario.json . Tiene 5 usuarios, con nombre, apellidos y edad de cada uno
Desarrolla una aplicación que muestre el detalle de un usuario, con un botón que permite avanzar. Añade otro botón que te permita retroceder.