La lógica detrás de un enrutador contiene los siguientes pasos.
pushState. Este método forma parte del objeto window de nuestro navegador windows.history.pushState. Este método nos agrega un estado a nuestra historia de navegación y al agregar un estado nuevo se refleja en la barra de navegación.innerHTML.La arquitectura para esta aplicación contempla un archivo HTML donde vivirá nuestro template el cual recibirá el contenido que va a estar cambiando en el DOM.
Por otro lado la lógica de la aplicación estará en nuestros archivos .js los cuales serán tres como se muestra en el siguiente diagrama.
Estructura de carpetas con las que trabajaremos.
|- root
|-- /js
|--- index.js
|--- router.js
|--- routes.js
|-- index.html
|-- style.css
Las SPA como su nombre lo indica son páginas web de una sola página y la navegación dentro de ella ocurre sin la necesidad de recargar el navegador.
El propósito de realizar el routing con JavaScript vanilla es entender el funcionamiento de las librerías de routing de los frameworks.
Para trabajar con la URL haremos uso de la API history, la cual no es una característica propia de JavaScript si no del navegador. Esta API trae un método llamado pushState que nos ayuda a traer los datos del stack de la navegación.
Empezamos dandole estructura a nuestro template de HTML. Recordemos que la funcionalidad de esta pequeña practica es hacer un router con JavaScript Vanilla por lo que nuestro template será lo más sencillo posible.
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>SPA Routing</title><linkrel="stylesheet"href="style.css"></head><body><!-- Botones de navegación --><header><buttonid="Home"onclick="ROUTER.load('home')">Home </button><buttonid="About"onclick="ROUTER.load('about')">About</button><buttonid="Contact"onclick="ROUTER.load('contact')">Contact</button></header><!-- Aquí es donde se insertará el contenido según la página en la que nos encontremos --><divid="content"></div><!-- En estos archivos estará la mágica para la navegación --><scriptsrc="./js/router.js"></script><scriptsrc="./js/routes.js"></script><scriptsrc="./js/index.js"></script></body></html>Con nuestro template HTML realizado el siguiente paso será definir nuestro diccionario de rutas, aquí estará una lista de todas las rutas disponibles dentro de nuestra SPA y el contenido de cada una de ellas.
const PATHS = {
home: {
path: "/",
template: `<h1>🏠 Home</h1>`,
},
about: {
path: "/about",
template: `<h1>👩🏻💻 Sobre mi</h1>`,
},
contact: {
path: "/contact",
template: `<h1>📱 Contacto</h1>`,
}
}
El archivo siguiente a trabajar será el que contiene toda la lógica para hacer funcionar nuestras rutas, si ahora trabajaremos en el router.js. En el cual definiremos una clase llamada Router, esta clase es la que inicializaremos en nuestro index.js, pero eso lo veremos más adelante.
classRouter{
Lo primero será definir un constructor para nuestra clase. Las funciones de este constructor será cargar nuestro listado de rutas e inicializar el router.
constructor(paths) {
this.paths = paths;
this.initRouter();
}
Con nuestro constructor creado escribiremos la lógica para iniciar el router. Esta función se encarga de identificar la ruta en la que se encuentra nuestro navegador.
initRouter() {
const { location: { pathname = "/" } } = window;
const URL = pathname === "/" ? "home" : pathname.replace("/", "");
this.load(URL);
}
Con la ruta identificada, podemos empezar a trabajar en la función que se encargará de cargar las páginas que desee visualizar el usuario. Esta será la función load que recibe por defecto el parámetro de home ya que queremos que ese contenido sea el contenido principal de nuestra SPA.
load(page = "home") {
const { paths } = this;
const { path, template } = paths[page] || paths.error;
const $CONTAINER = document.querySelector("#content");
$CONTAINER.innerHTML = template;
window.history.pushState({}, "done", path);
}
}
Ahora con toda la lógica de nuestro router construida sólo nos resta inicializar la clase en el index.js.
const ROUTER = new Router(PATHS);
Ahora para poder probar correctamente nuestra pequeña SPA es necesario tener un servidor local. Esto se puede implementar de muchas maneras pero yo recomiendo que si están usando VSCode instalen el Live Server el cual les hará la vida más fácil.
Live Server - Visual Studio Marketplace
Esta sería de una forma muy básica la forma en que trabajan los routers de algunos frameworks de JavaScript como Angular o Vue. En lo personal no recomiendo realizar “a mano” el router a menos que vaya a ser un proyecto muy pequeñito. Lo mejor es utilizar las implementaciones propias de cada framework.
Aunque claro, siempre es bueno destripar un poco las cosas y conocer desde las bases.
El código del artículo lo pueden encontrar en mi repositorio de GitHub. Aquí les dejo el enlace.
… … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … … …
El artículo original, escrito por mi también lo pueden encontrar aquí. Cualquier retro es bien recibida.
Bua cuando vi tu post en internet sabia que tenias que ser de platzi hahahaha.
Me gusto mucho tu post, lo explicas de una forma sencilla y clara. Gracias.
Una cosa sabrias como hacerlo seguro sin HTML ? que es lo que me gustaria saber.
Saludos 😃
¿A qué te refieres con seguro sin HTML? xDu