La lógica detrás de nuestro enrutador

¿Cómo empezar con la implementación de un router del lado del cliente?

Antes de sumergirnos en el código, es crucial tener un entendimiento claro del algoritmo o los pasos que vamos a seguir. Aunque este proyecto es bastante sencillo, es esencial establecer una estructura clara para no perdernos durante el desarrollo.

¿Cuáles son los pasos básicos del proyecto?

1. Identificación de la ubicación actual en el sitio: Comenzaremos con la carga inicial de la ruta.
2. Comparación de la URL con las rutas definidas: Esto nos asegura que no dirigimos al usuario a una ruta inexistente, garantizando así la seguridad y el control de la navegación.
3. Actualización de la barra de navegación: Utilizaremos pushState del objeto window.history para reflejar cambios en la barra sin alterar el contenido instantáneamente.
4. Actualización dinámica del contenido: Utilizaremos innerHTML para modificar elementos HTML en el DOM con el nuevo contenido.

¿Cómo se estructura la aplicación?

La arquitectura de nuestra aplicación se dividirá en:

• Archivo HTML básico: Donde vivirán nuestras plantillas a modificar.
• Archivos JavaScript: Se dividirán en index.js, routes.js, y router.js. Cada uno tendrá su papel específico:
  • index.js: Instancia la clase Router.
  • routes.js: Listado de rutas disponibles en el sitio.
  • router.js: Contendrá la lógica principal para manejar las rutas y el cambio de contenido.

¿Qué funciones y métodos utilizaremos?

Analicemos las funciones esenciales para cumplir con la lógica del proyecto:

• loadRoute: Se encargará de cargar la ruta solicitada y actualizar tanto la barra de navegación como el contenido.
• matchURLToRoute: Comparará la URL deseada con las rutas establecidas en el sistema.
• updateBrowserHistory: Implementará pushState para actualizar el historial de navegación.
• Actualización del contenido mediante innerHTML: Asegura que el contenido del DOM se refleje correctamente con la nueva ruta.

¿Cómo asegurar que la aplicación funcione correctamente?

Para que nuestra aplicación funcione sin problemas, consideraremos lo siguiente:

1. Separación de la lógica: Mantener la lógica separada en distintos archivos JavaScript mejora la legibilidad y mantenibilidad del código.
2. Buenas prácticas de programación: Escribir todo en inglés y emplear nombres significativos para las funciones ayuda a otros desarrolladores (y a nosotros mismos) a entender el propósito y funcionamiento del código.
3. Pruebas exhaustivas: Verificar el correcto funcionamiento de cada parte de la aplicación mediante pruebas antes de desplegar.

¿Cómo ejecutar el proyecto localmente?

El siguiente paso será ver el proyecto en acción:

1. Ejecutar en un entorno local: Usaremos comandos específicos (explicados en el curso) para ejecutar la aplicación en un servidor local.
2. Verificar la navegación: Debemos asegurarnos de que podemos navegar entre diferentes rutas (Home, About, Contact) sin refrescar la página, corroborando así que la implementación de pushState y innerHTML sea correcta.

Con esto, podrás crear una aplicación sencilla pero efectiva que demuestra el poder de manejar rutas del lado del cliente con JavaScript puro. Te invitamos a seguir explorando y aprendiendo, desarrollando así habilidades valiosas y soluciones creativas a problemas reales. ¡Buena suerte!