Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 9D : 2H : 52M : 38S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Implementando routing del lado del cliente

5/13

Un poco mas de como funciona history
Documentación sobre history

Al fin comprendí lo que hace el path.
Este curso debería estar antes del curso de SPA.

ALGUNOS MÉTODOS DE HISTORY

window.history.back();

Nos permite ir un paso hacia atrás en nuestro historial

window.history.forward();

Lo opuesto a back(), nos permite movernos hacia adelante en nuestro historial

window.history.go(n);

Nos permite movernos n páginas.
Por ejemplo, si n=-1 nos iremos una página atrás. Por otro lado, si n=1, iremos una página hacia adelante. Y si n=0, se recargará la página actual.

window.history.length;

Nos devolverá el número de páginas en nuestro stack de historial

pushState(estado,titulo,url)

Se encarga de añadir una entrada al stack de nuestro historial.
Estado es el objeto al cual esta asociado con la nueva entrada al historial creada.
Título, de momento es ignorado la mayoría de las veces.
Url es la ruta que será añadida a la nueva entrada de nuestro historial

replaceState(estado,titulo,url)

Trabaja de la misma manera que pushState() Con la diferencia que modifica una entrada, en vez de crear una nueva.

history.state;

Nos da el estado actual de nuestro historial

Fuente: https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador

Magnífico

El método pushState()
pushState()toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y (opcionalmente) una URL. Vamos a examinar cada uno de estos tres parametros en más detalle:

##Object estado
El objeto estado es un objeto JavaScript el cual esta asociado con la nueva entrada al historial creada por pushState(). Cada vez que el usuario navega hacia un nuevo estado, un evento popstate event se dispara, y la propiedad state del evento contiene una copia del historial de entradas del objeto estado.

El objeto estado puede ser cualquier cosa que puedas pasar a JSON.stringify. Dado que Firefox guarda los objetos estado en el disco del usuario para que puedan ser restaurados después de que el usuario reinicie su navegador, se ha impuesto un tamaño límite de 640K caracteres en representación JSON de un objeto estado. Si pasas un objeto estado cuya representación es más larga que esto a pushState(), el método arrojará una excepción. Si necesitas más espacio, se recomienda usar sessionStorage y/o localStorage.

##Título
Firefox actualmente ignora este parámetro, aunque podría usarse en el futuro. Pasar una cadena de caracteres vacia aquí podría asegurar estar a salvo de futuros cambios en este método. Alternativamente podrías pasar un título corto del estado hacia el cual te estás moviendo.

##URL
La URL de la nueva entrada al historial está dada por este parámetro. Recuerda que el browser no intentará cargar esta URL después de llamar a pushState(), pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador. La nueva URL no necesita ser absoluta; si es relativa, es resuelta relativamente a la actual URL. La nueva URL debe ser del mismo origen que la actual URL. Si no es así, pushState() arrojará una excepción. Este parámetro es opcional; si no se especifica, se tomará la URL actual del documento.

Puedes conseguir la guia completa Aqui!

jajajaaj solo es un meme
meme.png

Orale wow

window.history.pushState({data:'Movimiento'}, 'Title','/');

Saben cuál theme es el que usa el profe en su VSCode ?

Hasta ahora todo bien explicado y comprendido.

Super la explicación del profesor

Entendido 😄

algo nuevo y aprendido hoy 😄

Entendido

pushState() Toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y la ruta a la cual nos queremos mover.

window.history.pushState({ data: 'Movimiento'}, 'Títle', 'path');

codigo de la clase:

// window.history.pushState
// Permite Pasar un nuevo estado a la aplicaciones, parametros:
// data: vamos a poner los datos q queremos guardar
// titulo:
// path: la mas importante aqui se pasa la ruta que nos queros mover

window.history.pushState({data:'Movimiento'},'Titulo','/path')

Si la aplicacion es muy grande, digamos “Platzi”, ¿Como afecta el concepto de SPA a Platzi? porque para moverme entre secciones si recarga la pagina, otra cosa, ¿Como es el Router en Backend? y si uso SSR ¿Cambia la forma del router?

pushState

Este metodo pertenece a la propiedad history y esta al objeto Window.

window.history.pushState({data:'Movimiento'},'Title','/');

Hasta ahora todo bien

VSC es tan bueno que incluso si alcanzan a ver arriba aparecen los parametros que recibe el metodo que se esta usando, por algo se convirtio en el editor favorito

Las posibilidades que te brinda la api son increíbles.

Super interesante estas etiquetas, lo las había llegado a usar en lo largo de la carrera de Arquitecto FrontEnd, no me quiero ni imaginar toda la cantidad de contenido que hay en la escuela de JavaScript

Un poco mas de como funciona history
Documentación sobre history

Al fin comprendí lo que hace el path.
Este curso debería estar antes del curso de SPA.

ALGUNOS MÉTODOS DE HISTORY

window.history.back();

Nos permite ir un paso hacia atrás en nuestro historial

window.history.forward();

Lo opuesto a back(), nos permite movernos hacia adelante en nuestro historial

window.history.go(n);

Nos permite movernos n páginas.
Por ejemplo, si n=-1 nos iremos una página atrás. Por otro lado, si n=1, iremos una página hacia adelante. Y si n=0, se recargará la página actual.

window.history.length;

Nos devolverá el número de páginas en nuestro stack de historial

pushState(estado,titulo,url)

Se encarga de añadir una entrada al stack de nuestro historial.
Estado es el objeto al cual esta asociado con la nueva entrada al historial creada.
Título, de momento es ignorado la mayoría de las veces.
Url es la ruta que será añadida a la nueva entrada de nuestro historial

replaceState(estado,titulo,url)

Trabaja de la misma manera que pushState() Con la diferencia que modifica una entrada, en vez de crear una nueva.

history.state;

Nos da el estado actual de nuestro historial

Fuente: https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador

Magnífico

El método pushState()
pushState()toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y (opcionalmente) una URL. Vamos a examinar cada uno de estos tres parametros en más detalle:

##Object estado
El objeto estado es un objeto JavaScript el cual esta asociado con la nueva entrada al historial creada por pushState(). Cada vez que el usuario navega hacia un nuevo estado, un evento popstate event se dispara, y la propiedad state del evento contiene una copia del historial de entradas del objeto estado.

El objeto estado puede ser cualquier cosa que puedas pasar a JSON.stringify. Dado que Firefox guarda los objetos estado en el disco del usuario para que puedan ser restaurados después de que el usuario reinicie su navegador, se ha impuesto un tamaño límite de 640K caracteres en representación JSON de un objeto estado. Si pasas un objeto estado cuya representación es más larga que esto a pushState(), el método arrojará una excepción. Si necesitas más espacio, se recomienda usar sessionStorage y/o localStorage.

##Título
Firefox actualmente ignora este parámetro, aunque podría usarse en el futuro. Pasar una cadena de caracteres vacia aquí podría asegurar estar a salvo de futuros cambios en este método. Alternativamente podrías pasar un título corto del estado hacia el cual te estás moviendo.

##URL
La URL de la nueva entrada al historial está dada por este parámetro. Recuerda que el browser no intentará cargar esta URL después de llamar a pushState(), pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador. La nueva URL no necesita ser absoluta; si es relativa, es resuelta relativamente a la actual URL. La nueva URL debe ser del mismo origen que la actual URL. Si no es así, pushState() arrojará una excepción. Este parámetro es opcional; si no se especifica, se tomará la URL actual del documento.

Puedes conseguir la guia completa Aqui!

jajajaaj solo es un meme
meme.png

Orale wow

window.history.pushState({data:'Movimiento'}, 'Title','/');

Saben cuál theme es el que usa el profe en su VSCode ?

Hasta ahora todo bien explicado y comprendido.

Super la explicación del profesor

Entendido 😄

algo nuevo y aprendido hoy 😄

Entendido

pushState() Toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y la ruta a la cual nos queremos mover.

window.history.pushState({ data: 'Movimiento'}, 'Títle', 'path');

codigo de la clase:

// window.history.pushState
// Permite Pasar un nuevo estado a la aplicaciones, parametros:
// data: vamos a poner los datos q queremos guardar
// titulo:
// path: la mas importante aqui se pasa la ruta que nos queros mover

window.history.pushState({data:'Movimiento'},'Titulo','/path')

Si la aplicacion es muy grande, digamos “Platzi”, ¿Como afecta el concepto de SPA a Platzi? porque para moverme entre secciones si recarga la pagina, otra cosa, ¿Como es el Router en Backend? y si uso SSR ¿Cambia la forma del router?

pushState

Este metodo pertenece a la propiedad history y esta al objeto Window.

window.history.pushState({data:'Movimiento'},'Title','/');

Hasta ahora todo bien

VSC es tan bueno que incluso si alcanzan a ver arriba aparecen los parametros que recibe el metodo que se esta usando, por algo se convirtio en el editor favorito

Las posibilidades que te brinda la api son increíbles.

Super interesante estas etiquetas, lo las había llegado a usar en lo largo de la carrera de Arquitecto FrontEnd, no me quiero ni imaginar toda la cantidad de contenido que hay en la escuela de JavaScript