Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

La lógica detrás de nuestro enrutador

3/13
Recursos

¿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!

Aportes 47

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Los pasos que se van a seguir para llevar a cabo la creación del Router del lado del cliente para SPA son:
.

Cargar la ruta
Identificar en donde nos encontramos en el sitio. (Carga inicial de la ruta).

  • loadInitialRoute()
    .

Comparar la URL con una ruta
La URL a la que nos queremos mover, se debe comparar con las rutas que tenemos.

  • matchUrlToRoute()
    .

Actualizar la URL en la barra de navegación
Para esto utilizaremos el método de HTML pushState. (windows.history.pushState).

  • loadRoute()
    .

Actualizar el DOM con el nuevo contenido
Para esto vamos a usar innerHTML.

  • loadRoute()

Está excelente este tipo de introducciones a los proyectos. Tener el “overview” global del da más confianza y uno ya no se siente a ciegas de lo que va a estar aprendiendo y estudiando. Estaría excelente que se fuera implementando este tipo de iniciativa a más cursos. 👏🏼

Excelente, así da ganas de estudiar:

  • Muestra los pasos a seguir
  • Muestra la arquitectura
  • Muestra el código en resumen
  • Muestra el trabajo a donde tenemos que llegar

felicitaciones profesor

Excelente forma de enseñar Ricardo, puedo decir que es la primera vez que siento que realmente estoy aprendiendo algo de la forma correcta en Platzi y no solo siguiendo instrucciones. Sigue así,realmente inspira la forma en que enseñas.

Este fue uno de los temas donde quede flojo en el curso de SPA de Oscar. Y viendo el código me parece que nos ira super bien!

Me encanta que podamos ver de antemano que vamos a hacer y cómo lo vamos a hacer.
Así sabes qué puedes esperar y te emociona al ver qué serás capaz de lograr 😄

Vengo del curso de SPA y la verdad que esta introducción me hubiera gustado que hubiera algo así en el curso anterior donde me sentía super perdido y solo era seguir las instrucciones del profe sin saber que eran ni para que.

Ufff la **mejor ** clase introductoria que he visto.

Que buenos estos cursos de Ricardo, el porque y cómo de las cosas!!!

Me gustab este curso está muy interesante, y con JavaScript puro 👍😉

Es nos ayuda a que cada ves que cambiamos de pagina no se haga una recarga full de estas, y el fin principal de hacerlo con JS puro es poder ver como funcionar por detrás react router, angula router, etc.

Los pasos que se van a seguir para llevar a cabo la creación del Router del lado del cliente para SPA son:.

  • Cargar la ruta: Identificar en donde nos encontramos en el sitio. (Carga inicial de la ruta), aqui crearemos dos función llamada loadroute() loadInitialRoute()
  • Comparar la URL con una ruta: La URL a la que nos queremos mover, se debe comparar con las rutas que tenemos, ya que si esta ruta no esta en las rutas de nuestro sitio web no enviar a nuestro usuario a ella, al igual esto garantiza un mejor nivel de seguridad para no ir a sitios que nosotros no queremos matchUrlToRoute()
  • Actualizar la URL en la barra de navegación: Para esto utilizaremos el método de HTML pushState que forma parte del objeto windows.history.pushState, esto nos agrega un estado a nuestro history o historial de navegación y al agregarle un estado este se ve reflejado en la barra de navegación loadRoute()
  • Actualizar el DOM con el nuevo contenido: Para esto vamos a usar innerHTML, loadRoute()

Arquitectura que se utilizara para esta aplicación:

  • Vamos a tener un archivo html básico en donde va a vivir nuestro template, al cual le vamos a estar pasando el contenido que va a cambiar en el DOM y se va a actualizar cuando nosotros lo necesitemos.
  • La logia para instanciar a nuestros router va a estar en un archivo index.js
  • el otro va ser nuestro archivo de rutas routes.js
  • el tercero sera un archivo llamado router.js este tendrá toda la magia guardando toda la logica de nuestra aplicación

Buena Explicación Vamos por el siguiente vídeo

Una consulta… Hay svelte router?? En el curso no lo tacaron, y me quedé con la duda

Excelente introduccion, es necesario conocer bien JavaScript antes de pasar a los frameworks

Se nota que tienes una gran pasión por enseñar. Estoy haciendo este curso y el de algoritmos también y me siente muy cómodo con tu forma de explicar. ¡GENIO! un cordial saludo desde Argentina

Estoy haciendo actualmente el curso de SPA con Oscar Barajas, lo pausé en la parte del router ya que no lo comprendí del todo y viene a este curso… creo que es fundamental.

Este curso debería estar antes de este **Curso de Single Page Application con JavaScript Vanilla ** en la ruta de desarrollo web, creo que se entendería mejor

Aunque esta documentación está en Inglés, si no sabían mucho sobre Routers (como yo) pueden checar este artículo de medium.

https://medium.com/@fro_g/routing-in-javascript-d552ff4d2921

Espero que les sirva.

les recomiento la app goodNotes para iPad, para mi ha sido la mejor para usar el apple pencil

Por si alguien las necesita:

Excelente Celis, se nota que tenías bastantes ganas de enseñarnos esto 😃

Muy buena explicación, yo estoy trabajando con Angular routes y este curso me dará una muy buena idea de como funciona

Excelente

Nice

Me recordo la metodologia mecatronico de la uni :d vamos por él

Excelente!

Genial, gran introducción, Motivación Full. A Darle 💪

Empecemos!

Bien explicado profe! Hora de aprender algo nuevo!

Vamos a darle Celis!!!

Genial 😄 a aprender algo nuevo

Buena introducción y me gusta el contenido que trae este curso.

Excelente, ya estoy emocionada de iniciar, muchas gracias.

Mi primera clase con Ricardo y ha sido una excelente 👌

Excelente introducción, gracias Ricardo

Que buen chute de motivación nos da el profesor desde el primer instante del curso.

Muy bueno que los cursos empiecen con un algoritmo basico de resolucion del problema hahaha

Muy buena introducción del curso, tengo muchas ganas de saber como funciona el Router en una SPA.

El enlace : Instalación de Ubuntu Bash en Windows en Curso de Prework: Buenas Prácticas y Entorno de Desarrollo

da error

Excelente clase , quedo todo muy claro.

f

tengo el impulso de darle click al boton de me gusta… jaja… muy buena la explicacion y un gran placer descubrir como profesor a ricardo celis…

Este es curso es MUST antes de ver cualquier FrameworkJS, le va a agregar un plus enorme a nuestro conocimiento de JavaScript, grande Ricardo!

El curso se ve bien, sin embargo, el profe me cae aún mejor por que usa una ThinkPad… 😄

A pesar de lo que se tiene planeado para el desarrollo del curso se vea un poco engorroso la verdad es que es muy importante saber como funciona por ‘detras’ la interacción que tienen los DOM. Me parece muy bien que este en la carrera de Arquitectura FrontEnd ya que muestra de una manera explicativa esa interacción que se usa tanto en Front como Back. 👏👏

Súper ansioso por empezar!!

Estos cursos de JavaScript puro son una maravilla