Desglose del proyecto del curso y explicación del SPA Routing

Taller de Creación de Router para Single Page App con JavaScript

Clase 4 de 13

Clase 4 / 13

Recursos

¿Qué es un router en una aplicación de una sola página?

En el mundo del desarrollo web, comprender el funcionamiento interno de una aplicación de una sola página (o SPA, por sus siglas en inglés) es vital para optimizar la experiencia del usuario. Un router es un componente esencial que nos permite dirigir a los usuarios por diferentes rutas de nuestra aplicación sin recargar la página completa. Pero, ¿cómo funciona realmente este proceso?

Redirección sin recargas: En una SPA, al cambiar la URL en nuestro sitio, evitamos las recargas completas de la página. Esto se traduce en una experiencia más fluida, donde el usuario no nota interrupciones visibles.
Interacción con el navegador: Las aplicaciones SPA permiten utilizar las flechas de navegación del navegador para moverse entre las distintas vistas de la aplicación, manteniendo un historial de navegación controlado mediante JavaScript.

¿Cómo funciona el proceso detrás de una SPA?

Para aquellos acostumbrados a usar bibliotecas como Vue Router o React Router, a veces desconocen el funcionamiento interno de estas herramientas. Este curso se enfoca en desentrañar ese misterio usando JavaScript 'vanilla'.

JavaScript 'vanilla': Se refiere al uso del lenguaje en su estado original, sin frameworks externos. Esto es crucial para entender el funcionamiento intrínseco de las herramientas de routing.
Entender la API del navegador: Utilizaremos características específicas del navegador, como la API de history, que permite manipular el historial de navegación mediante métodos como pushState.

¿Por qué no usar siempre bibliotecas de terceros?

No todos los proyectos requieren de la complejidad que aportan bibliotecas como React Router. En casos sencillos, como un portafolio web, crear una librería de routing desde cero puede ser más eficiente y educativo.

Proyectos simples: Para pequeños proyectos o prototipos, una solución más ligera puede ser suficiente y óptima.
Educación y comprensión: Desarrollar una SPA desde sus fundamentos da una visión clara de los procesos y puede fortalecer tus habilidades como desarrollador frontend.

Implementación del router: El enfoque práctico

Nuestro objetivo es crear un router funcional utilizando JavaScript 'vanilla'. Para ello, necesitamos comprender algunos conceptos básicos y herramientas disponibles en los navegadores.

Método pushState: Este método nos permite agregar entradas al historial de navegación sin recargar la página. Imagina un stack de navegación; pushState añade nuevas rutas a este stack, ayudándonos a gestionar la navegación de la aplicación.
Carga previa de contenido: Para que el proceso de navegación sea fluido, es importante tener el contenido previamente cargado. Esto asegura que al cambiar de ruta, la información se muestra instantáneamente sin demoras.

Con este conocimiento, estarás en camino de construir aplicaciones web más modernas y eficientes, comprendiéndolas desde el nivel más fundamental. ¡Adelante y sigue explorando el fascinante mundo del desarrollo de aplicaciones web!