La lógica detrás de nuestro enrutador

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