Cierre del curso y conclusiones

Lo hice con el template de platzi video 😄

Una pregunta al profesor o a quien sepa la respuesta. Si no es recomendable hacer la inserción de código con el innerHTML, ¿Cuál es el método correcto de hacerlo?

Exelente curso, realice una pequeña practica e implemente Web Components. SPA

Hola Celis, muchas gracias. estos cursos son realmente importantes ya que no se trata de saber hacerlo con alguna librería o framework si no entender el proceso o flujo de información que sucede detrás con vanila js.

lo unico que me confundio un poco es que este curso sale como primero en la lista de la carrera de Js de Platzi, deberían estar en orden, de resto esta genial.

Excelente curso pero me hubiese gustado que cada paso que se explica se probará al momento y no hay final.

Mi resultado del curso

Mi repositorio con el proyecto
https://github.com/mancillajonathan/spa-routing

A mi si me gustaria mas ver cursos como este, pero ir viendo en camino que es lo que va pasando con cada codigo 😄

El curso deja mucho que desear en cuánto a la manera de explicar del profesor, el paso a paso que realiza para escribir el código no es muy entendible. Sin embargo les recomiendo que este curso les sirva como esa semilla que planta la curiosidad en su cerebro e investiguen y aprendan más de este tema por su cuenta, eso los hará unos grandes desarrolladores y muy valiosos en el actual contexto laboral que requiere no solo gente calificada (título), sino gente autodidacta con ganas de aprender nuevas cosas todos los días. Saludos!

Excelente curso, muchas gracias!!

Y coincido con @maoacrlearn, los cursos no están ordenados dentro de la ruta.
Me paso en varias oportunidades que al comenzar un nuevo curso de la ruta, el profesor nos dice que ya tendríamos que saber ciertos temas, y si no los sabemos, nos indica que debemos realizar antes otros cursos. y esos cursos se encuentran mas adelante en la ruta.

por ejemplo en este curso, nos indicas que si no sabemos nada de JS, deberíamos tomar antes el curso de “fundamentos de JS”, dicho curso se encuentra ubicado en la linea de la ruta mucho después de este.

La verdad confunde un poco.

Muy buen curso, a veces es necesario no quedarse con la “magia” de las librerias y entender como funcionan las cosas. Como aporte tal vez seria bueno ir probando parte del codigo y no todo al ultimo, por si alguien cometio algun tipo de error en el tipeo por ejemplo.

Saludos.

Me gustó mucho el curso, definitivamente tengo que practicarlo más para entender mejor la lógico pero si me siento capaz de entender el curso! Gran profe!

Me falta para llegar a acá, pero vaya que buen profesor es Celis

Chevere la idea pero este curso fue confuso para mí de todas formas aprendí cositas acerca d elo importante del curso que era saber como funciona herramientas que implementan dichas tecnicas. gracias.

No he llegado hasta este nivel pero fue bueno ver este curso para tener idea de lo que se viene

Excelente explicación, buen curso.

Me gustó mucho este curso!

Excelente!

Me gustó mucho este curso, claro, conciso pero bien explicado. Sobre todo me gustó la parte inicial, donde se explica bien la arquitectura y el pensamiento detrás del proyecto, algo que no se ve en muchas otras clases. ¡Me encanta! fue mi primer curso con Ricardo, pero me emociona tomar muchas más con él.

Esta bien usar este tipo de router si no es una spa muy grande son menos de 5 paginas pero necesito parametros dinamicos en la url. Debo usar reactDOm aunque sepa que no va a escalar . Gracias

Muy buen curso

Muy buen curso, creo que son de las cosas que deberían explicarse de esta manera tan sencilla y directa.

Me gusto el curso , solo que si en cada pasa lo probara entenderiamos mas. Yo con un debug pude comprender todo. Pero muy bien el profe.

Excelente curso, como indico el profesor lo aplicare en mi portafolio, creo que es una excelente opcion 🙌🙌

excelente curso

1. Este curso debería ir antes del de SPA con Vanilla JavaScript que dicta Oscar.
2. Recomendación: Ir probando el código que vamos haciendo en cada clase, aunque estuvo sencillo es mejor para nosotros como estudiantes.

⭐⭐⭐⭐⭐

Muy buen curso!

Fué un curso genial, muchas gracias Ricardo.

Hola, Buen tema, me queda la duda sobre http-server-spa, es necesario? Acaso no puede probarse el tema de forma local con explorador? Me da la impresión que el http-server-spa no es necesario para el curso.

Excelente Taller cargado de mucho conocimiento, fue corto pero sustantivo. muchas gracias👍

Excelente curso, gracias por la clara explicación.

Excelente, conocí algo nuevo e importante de Javascript, muy buen profesor. Pienso añadir más funcionalidades al proyecto, a modo de práctica.
Espero que hayan más talleres así a futuro.

Magnifico curso. 10/10 👌🏻

Gracias por compartir tu conocimiento Ricardo. Encantado con el curso.
Si tuviese que mejorar algo, seria la dificultad del examen final. Quizás, elaborarlo un poco mejor.
Slds!

Que gran curso, excelente explicación

Realmente gracias por el curso, fue muy completo para tratar el tema de SPA y me dio a entender muchas cosas, espero que sigan sacando mucho mas cursos como este.

Aún sabiendo que es inseguro llevarlo a producción, me gustaría saber cómo se haría el deploy.

Hay alguna forma de tener el routing sólo del lado del cliente? o se necesita un servidor que gestione las rutas (en el curso http-server-spa)?

Más cursos como este estaría genial

INCREIBLE!!!

Buen contenido y buena explicacion, solo se podria mejorar un poco en el manejo de errores.
Saludos desde Chihuahua Mexico xD

Genial

Gracias muy buen curso.
Asì me quedó.

Excelente curso, aunque hubo muchas cosas que no entendí por falta de conocimientos más profundos de JS, pero lo importante del curso sí que lo entendí y me gustó. Ahora voy a continuar con “La escuela de JS” y al terminarla, volveré a repasar este curso. Encantado! Muchas gracias Ricardo, excelente forma de enseñar!

Muchas gracias por el curso, muy claro y ameno.
El estar de primero en la lista permite vislumbrar el poder de javascript y anima a realizar con juicio la carrera.
Ejecute el código en el servidor generado con http-server-spa de manera satisfactoria , sin embargo en mi servidor XAMPP dentro del directorio que tengo reservado para este tipo de ejercicios no me quiso correr, incluso copie los archivos al directorio principal del servido local y tampoco.

Los errores son:

router.js:16 Uncaught TypeError: Cannot read property ‘template’ of undefined
at Router.loadRoute (router.js:16)
at Router._loadInitialRoute (router.js:42)
at new Router (router.js:5)
at index.js:1

index.html:11 Uncaught ReferenceError: router is not defined
at HTMLButtonElement.onclick (index.html:11)
index.html:12 Uncaught ReferenceError: router is not defined
at HTMLButtonElement.onclick (index.html:12)
Uncaught ReferenceError: router is not defined
at HTMLButtonElement.onclick (index.html:13)

De nuevo muchas gracias.

Excelente curso, el profesor explica bastante bien y excelente iniciativa de este tipo de diseño de curso corto con buen contenido.

Buen curso.

Con este curso entendí lo que no me había quedado claro en el curso de SPA con Vanilla JavaScript.
Estuvo genial! 😄

Corto pero poderoso.
Muchas gracias.

Buen curso, sin embargo hace falta mejor estructura en la metodología y desarrollo del curso.

Estaría interesante ver cómo se puede reemplazar el innerHTML para hacerlo más seguro 😀

Excelente curso, deseando que hagan mas cursos experimentales de este tipo.

Hola!
Les dejo mis notas de router.js de lo que entendí que hacía cada linea de código, espero que a alguien le sirva y me puedan corregir si cometí errores en las notas

router.js

class Router {

      constructor(routes) {
//traemos las rutas de routes.js, no es necesario importar ya que esta linkeado en el 
//HTML
        this.routes = routes; 
        this._loadInitialRoute(); //Al instancias la clase se llama a esta función
    }

	_loadInitialRoute() {
		//Location.pathname Obtiene la url de nuestro navegador luego del 
		//puerto en este caso que nuestra URL Es "localhost:8080/" lo que tomaría
		//Sería unicamente el "/" que esta enseguida del 8080
		//El metodo split separa en un array los elementos cada vez que encuentra el caracter
		//Que le pasemos, en este caso "/" lo cual nos generaría un array
		//De dos espacios, lo que había antes y despues del "/" de esta manera
		// ["",""] 
    const pathNameSplit = window.location.pathname.split('/');

		//En esta parte lo unico que hace el eliminar el indice cero de nuestro array 
		//con el metodo slice, al indicarle un "1" le decimos que tomaremos desde el 
		//indice 1, recordemos que los arrays comienzan su indice desde el 0
    const pathSegs = pathNameSplit.length > 1 ? pathNameSplit.slice(1) : '';

		//Por ultimo mandamos a llamar la función loadRoute y le pasamos nuestro arreglo con
		//un "spread operator", que transforma nuestro arreglo en elementos individuales, en este
		//caso un string por lo que en lugar de mandar [""] mandaremos solamente ""
    this.loadRoute(...pathSegs);
    }

 //Cuando tenemos los tres puntitos "..." como argumento de una función ya no estamos 
//Hablando de un "spread operator" si no de un "rest operator" que hace todo lo contrario
//Pues en lugar de sacar nuestros elementos del array, los envuelve dentro de uno
//por ejemplo si llamaramos "loadRoute(hola, comunidad, de, platzi)" el valor de 
//"urlSegs" sería igual a [hola, comunidad, de, platzi]
 loadRoute(...urlSegs){

		//Comprobamos si nuestro urlSegs tiene coincidencias con nuestras rutas
    const matchedRoute = this._matchUrlToRoute(urlSegs);

		//Aqui armamos nuestra url diciendo que nos agregue un "/" al principio.
		//A su vez también agregaremos un "/" por cada elemenot del 
		// Array, eso es lo que hace join.
		//Por ejemplo si "urlSegs" fuera [hola, comunidad, de, platzi] el resultado seria
		// url = /hola/comunidad/de/platzi 
    const url = `/${urlSegs.join('/')}`;

		//Luego de eso pasamos la url al navegador 
    history.pushState({},'this works', url);

		//Con querySelectorAll obtenemos un array de todos los elementos que tengan la 
		//propiedad ['data-router'] en este caso solo tenemos un div con esa propiedad,
		//por lo que el indice 0 será el que buscamos.
    const routerOutElm = document.querySelectorAll('[data-router]')[0];

		//Por ultimo agregamos el contenido de nuestro template al div
    routerOutElm.innerHTML = matchedRoute.template;

 }

//En esta parte si estamos recibiendo un array de datos 
	_matchUrlToRoute(urlSegs){
		//Al ser un array tenemos el metódo find que va a recorrer cada
		//objeto de nuestro array routes.js y va a regresar el primer 
		//objeto que coincida con lo que le indiquemos dentro de la función 
    const matchedRoute = this.routes.find(route => {
			  //route.path va a tomar un valor distinto de path en cada iteracion
				// hasta encontrar coincidencias 
				//Ejemplo:
				//path: '/',
				//path: '/contacto',
				//path: '/about',

				//Con esta linea de codigo le quitamos el "/"
        const routePathSegs = route.path.split('/').slice(1)

				//Aqui comprobamos si coincide el tamaño de lo que mandamos con alguna de nuestras
				//  rutas, si no coincide, pasamos a la siguiente iteracion retornando false
        if (routePathSegs.length !== urlSegs.length){
            return false;
        }

				//Una vez tenemos una coincidencia con el tamaño, comrpobará letra por letra si
				//son iguales, si es el caso, regresará ahora si la ruta que coincidió al 
				//metodo find
        return routePathSegs
            .every((routePathSeg, i) => routePathSeg === urlSegs[i]);
    });
		//Aqui regresamos el valor de la función
    return matchedRoute;
	}

}

…spread operator and rest operator - Beau teaches JavaScript

Documentación del método .every

Gracias Ricardo es bueno haciendo algoritmos como este curso reitera los pasos a seguir y recomendaciones para avanzar let go!!

Gran curso maestro, me abrió mucho la mente!

Muy bueno este tipo de cursos enfocados. Aportan mucha claridad 😃 Gracias

Buen curso “Suanfonson” 😄
.
A los compañeros les recomiendo leer y comprender la lógica detrás del código, no se queden solo con lo que da el profesor. Si entran en la consola del navegador y van probando por ejemplo el código window.location.pathname.split("/") pueden ver literalmente lo que se obtiene y aclarar muchas dudas.
.
Lo otro que recomiendo es utilizar la metodología de depuración del patito de goma, parece tontería, pero funciona de maravilla xD

No me gusto para nada la pedagogia que tuvo este curso. La forma de dar ir programando fue muy mala. No puede ser que tenes que esperar hasta la ultima clase para ejecutar el codigo y ver si anda. No puede ser que no se les ocurrio como crear el proyecto de forma iterativa e incremental. Todo el curso invocando metodos que no existen.

Me gustó mucho este curso, solo se pudo probar el código hasta el final, pero todo fue muy bien explicado. Gracias Ricardo.

Excelente curso Ricardo, me gusta saber siempre el ¿Por qué? de las cosas, y esto nos da una idea básica de cómo funcionan algunos frameworks o librerías por detrás.

Me gustaría ver una comparativa de Programación Orientada a Objetos VS Programación funcional, ambas en Javascript por supuesto.

Saludos.

Me gusto mucho el curso, la temática de desglosar el funcionamiento de algo que ya usamos pero desconocemos como funciona. Pero agregaría mas desglose como imprimir en consola lo que esta haciendo cada función nueva que se crea para ir entendiendo mejor y no esperar hasta que el proyecto este finalizado para mostrarlo.

Excelente explicación sobre como funciona el SPA Routing y como implementarlo.

Si saben inglés, les ULTRA recomiendo este curso de SPA en youtube.
El autor tiene buena oratoria, prolijo en el paso a paso y el producto final bastante profundo, pulido y avanzado.
https://www.youtube.com/watch?v=6BozpmSjk-Y