Implementando routing del lado del cliente

¿Qué es el método pushState?

El método pushState es esencial para el manejo de la historia de navegación en aplicaciones web. Pertenece al objeto history, el cual a su vez está contenido en el objeto window del navegador. Este método nos permite modificar el historial de la sesión del navegador sin recargar la página. Así, se puede alterar el URL que se muestra al usuario y actualizar el estado de la aplicación de forma dinámica.

¿Cuáles son las propiedades de pushState?

El uso de pushState implica proporcionar tres propiedades clave:

1. State Object (data): Aquí guardamos los datos que necesitamos preservar en este movimiento. Por ejemplo, si queremos rastrear una acción del usuario como "movimiento", se incluiría en esta propiedad.

2. Title (title): Aunque se incluye como propiedad, actualmente los navegadores suelen ignorarla. Sin embargo, es buena práctica definir un título que permita identificar de forma amigable el estado actual en el historial.

3. URL Path (path): Este indica la ruta a la cual deseamos dirigirnos. Es crucial, pues modifica el URL que aparece en la barra de direcciones del navegador, creando la ilusión de una navegación entre páginas diferentes.

window.history.pushState({data: 'movimiento'}, 'titulo', '/nueva-ruta');

¿Cómo se integra pushState en el navegador?

Para experimentar con pushState, puedes abrir la consola del navegador. Esta ofrece un acceso ágil para verificar el comportamiento del objeto history:

1. Presiona F12 para abrir las herramientas de desarrollo.
2. Selecciona la pestaña "Consola" para interactuar con el DOM y ejecutar JavaScript en tiempo real.

Aquí puedes visualizar la estructura del objeto history:

console.log(window.history);

Observarás propiedades como el tamaño del historial de navegación (length), útiles para verificar la cantidad de páginas por las que el usuario ha navegado durante la sesión actual.

Un ejemplo práctico con Platzi

Para comprender mejor el uso de pushState, sigamos un ejemplo interactivo en Platzi:

1. Visita platzi.com/clases y abre la consola.
2. Al escribir window.history, verificamos que el historial tiene un tamaño length inicial.
3. Modifiquemos el estado actual con pushState:

window.history.pushState({data: 'movimiento'}, 'titulo', '/');

Al ejecutar este código, notarás el cambio inmediato en el URL. Este tipo de interacción es clave para crear rutas personalizadas en nuestras aplicaciones, asegurando que el interfaz de usuario responda de manera dinámica sin recargar la página.

¿Por qué es importante para el desarrollo web?

El control sobre el history de una aplicación web es fundamental cuando se busca implementar un enrutador cliente-side en una aplicación de una sola página (SPA). Este control permite optimizar la experiencia del usuario, haciendo que las transiciones entre vistas sean más fluidas y eficientes.

• Mejora la navegación: Los usuarios pueden regresar a estados anteriores usando los botones de navegación del navegador, manteniendo el estado de la aplicación y sin requerir redespliegue de recursos.
• Facilita las URLs legibles: Se pueden mantener URLs descriptivas que facilitan al usuario conocer su ubicación exacta en la aplicación, mejorando la usabilidad y SEO.
• Enruta sin recargar: Al ser parte de las capacidades de JavaScript, permite realizar cambios en el estado de la aplicación sin interrupciones perceptibles para los usuarios.

Implementar pushState eficazmente ofrece a los desarrolladores una herramienta poderosa para mejorar la experiencia del usuario, y al mismo tiempo, construir aplicaciones robustas y coherentes. ¡Continúa aprendiendo y explorando estas capacidades para sacar el máximo provecho a tus proyectos web!