En aplicaciones web como Gmail o Facebook, la mayor parte de la interacción se realiza una vez la página original se ha cargado, de manera que la URL a la que se accede originalmente no cambia. Esto provoca que al refrescar la página en el navegador, cualquier cambio efectuado en el estado se pierda.
Dos enfoques distintos
Estas aplicaciones sí que mantienen el estado del lado del cliente manipulando la URL original, como se puede ver en estos dos ejemplos:
- Gmail basa su URL en carpetas y mensajes en ese contexto, con lo cual /mail/u/0/#starred carga la carpeta de favoritos y /mail/u/0/#starred/13da7c68fe1d0cc0 enlaza a un mensaje para un mensaje en el contexto de esa carpeta.
- Trello por su parte es un gestor de tareas ordenadas por listas en tableros, la url puede representar un tablero /b/Pvr5jDBv/recetas o una tarea específica /c/e0y3broE/12-arroz. La URL se modifica para definir el tipo de recurso, un identificador y un nombre legible.
Ambas soluciones emplean una manera diferente de modificar la URL, Google agrega un hash (#) al final de la URL, mientras que Trello modifica completamente la misma mediante el uso de PushState, una manera de manipular el historial del navegador introducida en HTML5.
Utilizado Hash para agregar estado y leerlo
El hash (#), como se ha mencionado anteriormente, se sitúa al final de la URL, y no se envía al servidor, sino que se procesa en el propio navegador. Su uso está muy extendido ya que no requiere HTML5, cosa que sí pasa con PushState.
Para modificar la URL se puede acceder como se ve en el ejemplo, el acceso a la misma se realiza leyendo la misma variable:
function pushUrl(value) {
document.location.hash = "key=" + value;
}
Al no enviar el contenido al servidor, no es necesario agregar soporte de backend de ningún tipo, y se puede emplear con páginas estáticas servidas con Github pages, por ejemplo. Esto también tiene una desventaja, que es que limita cualquier tipo de pre-procesamiento que se quiera realizar al recargar la página.
PushState por otra parte, al no utilizar Hash, genera URLs mucho más limpias, permite cierto procesado inicial del lado del servidor, y además permite modificar el historial, haciendo que la interacción sea más cercana a la de una aplicación web.
Un ejemplo práctico
En este ejemplo se ha creado una aplicación de búsqueda, al introducir un criterio, se agrega a la URL, de tal manera que al refrescar la página se lee el contenido y se aplican los cambios:
La aplicación de ejemplo se encuentra disponible aqui y el código está disponible en Github.
Conclusiones
Al desarrollar una aplicación web es importante preguntarse si se quiere conservar el estado (guardado en favoritos, envío de enlace vía e-mail, mailing lists, etc) y qué opción usar. Hash es una manera cómoda de agregar estado como se puede ver, aunque existen maneras más sofisticadas como el uso de PushState, que permite de manera adicional modificar el historial de navegación.
Enlaces
rlbisbe @ dev 