Haciendo un Impacto: La Historia de una Migración del Mapa de Baños

Hola, mi nombre es Oliver y hoy estoy aquí para contarles una historia interesante que ha tenido lugar en el último año, o quizás un poco más. Y se trata de una migración de Create React app a Next.js. El proyecto en cuestión es el mapa de baños. Anteriormente se conocía como el Gran Mapa de Baños Públicos Británicos. Pero tenemos planes para expandirlo internacionalmente en el futuro. Así que es un proyecto bastante emocionante. He estado involucrado en él durante aproximadamente dos años en diferentes grados de participación. Pero durante el último año, como mencioné, este ha sido un proyecto bastante concentrado para modernizarlo por completo.

Así que les contaré una historia, básicamente por qué lo hicimos. Veremos algunos de los aspectos más destacados interesantes de ese viaje. Y también explicaré brevemente por qué es importante que estemos realizando este trabajo. Así que sin más preámbulos, vamos a sumergirnos directamente en ello. Aquí está el logo y la URL, si les apetece visitarlo. Y así es como se veía en la primera iteración. Esto habría sido alrededor de 2010, 2012, mucho antes de mi primera participación en el proyecto. Y creo que se construyó utilizando jQuery, una tecnología bastante anticuada según los estándares de hoy en día, pero ya estaba cumpliendo su función. Y creo que solo cubría los municipios de Londres. Pero rápidamente surgieron estas cosas, y se adaptó para dispositivos móviles. Así que comenzamos a tener diseños más adaptables. Y en su última iteración, se parece un poco a esto. Realmente nos esforzamos en hacerlo adaptable y fácil de usar, especialmente cuando están en movimiento. Entonces, ¿cuál es la situación actual de los baños públicos en el Reino Unido? Desafortunadamente, no es buena. La persona que fundó el proyecto, Gayle Ramster, es investigadora senior asociada en el RCA, y es bastante crítica con la situación de los baños públicos en el Reino Unido, no es una situación ideal. Y a partir de esa cita, probablemente puedan darse cuenta de que para una gran parte de las personas, esto es bastante importante. Justo antes de armar estas diapositivas, estuve navegando por la web en busca de otras citas sobre esto. Esta en particular me llamó mucho la atención, en ocho años hemos perdido más del 10% de los baños públicos en el Reino Unido, lo cual es bastante importante. Esto ha sido cubierto por varios medios de noticias. Y realmente, aunque se haya cubierto, probablemente se podría hacer mucho más para ayudar en esta situación. Y como proyecto, eso es lo que realmente estamos tratando de hacer. Estamos tratando de solucionar la situación de la mejor manera posible, dado que nosotros

en realidad no ayudan a mantener los baños en el Reino Unido. Sí, así es como se ven. Es una situación bastante mala. Afortunadamente, hay otro tipo de baño que aún no he mencionado, conocido como baños públicos accesibles. Estos son proporcionados por todo tipo de negocios. Y estos son los que buscamos incluir en el mapa. Así que no solo son baños públicos Son baños de una variedad de negocios y cualquier persona puede contribuir. Además de eso, también tenemos programas de acceso comunitario. Entonces, estos negocios pueden registrarse a través de programas administrados por los consejos locales para registrarse, de modo que las personas que realmente necesitan un baño puedan buscar en varios conjuntos de datos, pero también en nuestro mapa, donde hemos tomado estos datos y los hemos trazado Así que puedes averiguar fácilmente dónde puedes ir localmente. Entonces, ¿cómo se ve estedata? Tenemos alrededor de 14,000 ubicaciones que se han marcado como activas y con el tiempo hemos visto que alrededor de 2,000 de ellas se han eliminado o actualizado. Los datos abiertos para esto en parte son proporcionados por el gobierno y varias otras fuentes a lo largo de los años. Pero las contribuciones de los usuarios, especialmente en el pasado reciente, han sido la principal forma en que hemos ampliado nuestro conjunto de datos. Las personas contribuyen yendo a esta página en el sitio web y tenemos un pequeño diálogo allí donde puedes ingresar toda la información sobre el baño. También tenemos esta herramienta de exploración para que puedas consultar el conjunto de datos, ver qué se ha actualizado recientemente y volver al principio. Así que puedes ver en 2014 cuando esto se creó por primera vez. Brevemente durante el confinamiento, hubo un esfuerzo increíble por parte de una organización llamada Lucations UK para hacer algo bastante similar a lo que hacemos nosotros. Así que se volvieron muy activos, ganaron mucha tracción en las redes sociales y muchas personas contribuyeron. Fue un esfuerzo increíble y después de aproximadamente, creo que alrededor de un año de actividad, decidieron fusionarse con nosotros. Así que nos han dado sus datos y tenemos un desafío técnico muy interesante entre manos para tomar sus datos e integrarlos con lo que tenemos en el proyecto. Definitivamente no es simple porque algunas de estas ubicaciones podrían contener duplicados, algunas de ellas no son muy precisas. Es un conjunto interesante de problemas.

Así que pasemos a la migración en sí. ¿Cómo se veía desde una perspectiva técnica? Bueno, como mencioné, el proyecto era una aplicación Create React. Muy orientada al cliente, con muchoJavaScript, sin renderizado del lado del servidor. Y yo y Rupert, mi colaborador en el proyecto, echamos un vistazo a lo que estaba disponible en 2021 en términos de frameworks a los que podríamos migrar y NextJS destacó. Las características realmente hablan por sí mismas y, como se enumeran aquí, las que realmente nos llamaron la atención fueron el renderizado del lado del servidor y la capacidad de admitir la precarga de raíz, lo cual fue especialmente interesante porque tenemos muchos marcadores en un mapa, sería genial poder precargar algunos de estos marcadores con un framework como este. Entonces, sí, comenzamos por aquí. Pensamos, bueno, la tendencia comienza a subir, eso probablemente sea algo bueno, vamos a intentarlo. Esto es de lo que partimos.

Así que logramos migrar a TypeScript durante el transcurso del proyecto, y aprovechamos al máximo el hecho de que TypeScript está diseñado teniendo en cuenta la adopción incremental. También logramos mejorar significativamente la experiencia de usuario, hicimos que los baños se cargaran más rápido, agrupamos los marcadores para que fuera más fácil verlos en el mapa, y comenzamos a almacenar en caché las páginas utilizando algunas de las increíbles características que Next ofrece.

Además, para los desarrolladores, cualquiera que desee contribuir al proyecto ahora encontrará una experiencia mucho más fácil, porque hemos adoptado un lenguaje que posiblemente sea uno de los más populares en el planeta en estos días. Además, el renderizado del lado del servidor, por lo que ya no se ve eso más, ya no tienes JavaScript por alguna razón, ahora ves eso. Las cosas se cargarán un poco más rápido porque no tienes que cargar un paquete masivo de JavaScript y ejecutarlo, en su lugar, solo obtienes el HTML de la página.

Entonces, hagamos un recorrido rápido de algunas de las cosas que tuvimos que considerar cuando hicimos esa migración. Los enlaces, principalmente un trabajo de copiar y pegar, no tan malo. Las imágenes, también bastante copiables. También pudimos aprovechar algunas de las características que Next ofrece en torno a las imágenes, por lo que manejan muchas de las cosas que tendríamos que manejar manualmente, como el tamaño de imagen receptiva, y lo que realmente me interesó fue en torno a los marcadores de posición. ¿Podríamos cargar una versión borrosa de la imagen u otros tipos de optimizaciones, porque, al final del día, lo que impulsa nuestro trabajo aquí es ayudar a las personas a encontrar un baño.

Páginas dinámicas, una característica bastante interesante. Aquí hay un pequeño fragmento de cómo generamos una de estas páginas. Obtenemos una conexión a la database y renderizamos la página. Al finalizar ese método, deberías tener un panel de detalles de Lou completamente renderizado para tu dispositivo móvil.

En cuanto a la migración de la API, originalmente se ofrecía utilizando el framework express. Afortunadamente, Next hace que sea muy sencillo llevar algo así a su plataforma. En cuanto a GraphQL, que utilizamos como una capa superior de nuestro Mongo database, en su mayoría se mantuvo sin cambios, por lo que así es como se ve ahora la arquitectura. Donde se encontraban el GraphQL y las partes de Next.js solía estar el servidor express, pero ahora Next ha absorbido ese Create React app y hemos logrado ponerlo todo en el mismo nivel de pila. También hemos añadido esta agradable adición de una capa de caché Redis, lo que significa que cuando un usuario solicita un mosaico de mapa, primero verificamos en nuestra caché y, si está allí, se lo proporcionamos en lugar de generar uno nuevo. Así es como se ve Aloo. Ha evolucionado a lo largo de muchos años, por lo que su estructura no es perfecta, pero cumple su función. Y así es como obtienes Aloo desde nuestro resolutor de GraphQL, y en cuanto a la ejecución del servidor GraphQL, nos conectamos a nuestra database, iniciamos el servidor Apollo y tienes tu API principal. En cuanto a la autenticación, originalmente estábamos utilizando Auth0, y todavía lo estamos haciendo. De hecho, Next hace que sea muy fácil manejarlo. Proporcionan un componente de alto nivel y pudimos envolver una de nuestras rutas con eso, y todo funcionó como se esperaba. Por lo tanto, otra parte clave de este trabajo fue mejorar la experiencia de usuario general del proyecto. Así que eso se centró en la mecánica de pasar de la aplicación create react a Next. Estas son algunas cosas que hicimos además de eso para realmente mejorar el sitio para todos. Lo primero que hicimos fue reducir el tamaño de un objeto de un bucle individual desde un gran bloque de JSON, alrededor de 260 bytes, a una sola cadena. Y vamos a ver rápidamente la anatomía de esa cadena y cómo podemos representar prácticamente la misma información en un espacio reducido.

Si desglosamos esa cadena, verás que está compuesta por el ID del bucle, que es único, un geohash y un filtro. Antes de comenzar esto, no tenía idea de qué era un geohash, y vamos a profundizar en eso brevemente. Pero primero, vamos a ver cómo optimizamos estos filtros. Como usuario del mapa, tienes estos interruptores que te permiten filtrar según varios criterios. Es una característica bastante útil. Estos se pueden representar fácilmente utilizando solo bits. Parte de un número binario con el que seguramente estás familiarizado. Y eso fue un gran descubrimiento, porque significaba que de repente podíamos representar el estado de estos interruptores utilizando esos bits. Y eso es importante, porque pasamos de una pieza de información bastante grande a un solo número para representar cualquier combinación de esos filtros que quisiéramos. Así que, en esta demostración, tenemos lo siguiente:

se resalta el primer bit, lo que significa que es un baño sin pago. Y el quinto también está resaltado, lo que significa que también tiene cambiador para bebés. Entonces, realizamos una operación OR en ambas opciones. Y el resultado de esa operación es el número 17, o una palabra binaria con esos dos bits establecidos. Y una vez que se ha enviado al lado del cliente, todo lo que tenemos que hacer es tomar la máscara y realizar una operación AND entre el primer y el quinto bit para determinar si están encendidos o apagados. Así que, como puedes ver, hemos recorrido cada uno de los bits y hemos determinado que es gratuito y tiene cambiador para bebés.

Entonces, así es como mejoramos un poco los filtros. Veamos qué es un geohash. Sabes, encontré esto realmente emocionante, pero primero vamos a hablar rápidamente sobre what3words. Es un producto que quizás hayas oído hablar y es una forma de representar una ubicación utilizando, lo adivinaste, solo tres palabras. Esto es algo similar de alguna manera, pero diferente en un sentido muy importante. ¿Y en qué se diferencia? Entonces, esta es una descripción bastante concisa de lo que hace. Creo que es del creador, no puedo recordar exactamente. Pero lo importante aquí es que al cambiar la longitud de nuestro hash, podemos hacerlo más preciso. Entonces, si solo tiene un carácter, representará una parte bastante amplia del mundo. Pero a medida que aumenta la precisión de esos caracteres, ese algoritmo muy inteligente, que no podría entender, une esos caracteres en una representación cada vez más precisa de una ubicación en la Tierra. Entonces, esto es lo que esa cadena representa en Londres. Un pequeño trozo de tierra, justo al lado de Trafalgar Square. Así que fue un descubrimiento bastante asombroso para nosotros. Significaba que podíamos tomar una latitud y longitud bastante largas y convertirlas en una cadena de tamaño constante de bastante buena precisión. Es suficiente para poder encontrar el baño que está listado. Y, por supuesto, con cualquier esquema de compresión, siempre se puede llevar aún más lejos. Entonces, el ID todavía es bastante largo. Probablemente podríamos convertir esto en una secuencia de números. Así que solo nos referimos secuencialmente a cada bucle o algún otro tipo de operación de mapeo. Pero la vida es corta, y hicimos un buen trabajo. En cuanto a la longitud fija, podríamos haber eliminado esas barras porque conocemos la longitud de esta cadena. Realmente no necesitamos separarla. Eso fue solo para desarrollo. Así que todo eso fue bastante emocionante. Realmente disfruté trabajando en eso. Eso fue, si acaso, solo satisfactorio poder reducir la cantidad de data. Y en el aspecto técnico, bastante crítico, porque significaba que de repente estábamos enviando mucha, mucha menos información al cliente. Y lo que esto nos permite hacer es pasar de algo que se veía así, donde cargábamos todo de manera bastante desordenada, a un sistema de agrupación. Entonces, en lugar de eso, utilizamos una biblioteca llamada MarketBuster, con un nombre muy apropiado. Y nos permite agrupar nuestros marcadores existentes, renderizar el grupo y, mágicamente, de repente se ven así, lo cual es mucho mejor si quieres tener una imagen de un área más amplia, como si fueras de vacaciones a algún lugar. El problema con eso,

aunque es genial, es que agrupar 13,000 marcadores es lento cuando se carga la página por primera vez. Es una operación de bloqueo. Podría congelar el mapa en un dispositivo más antiguo durante unos cinco segundos, lo cual no es para nada genial. Así que pensamos en un sistema de carga de fragmentos. Es bastante simple en concepto. Miramos todos los geohashes dentro de la ventana gráfica. Estos son algunos geohashes de baja resolución, y dentro de esas cajas, podemos solicitar todos los baños. Entonces aquí tenemos la operación, y aquí tenemos el código para obtener esa información en el lado del servidor. No voy a repasarlo ahora, pero si estás interesado, está todo en GitHub. Y como resultado de esa operación, obtienes una lista de todas las cargas en la caja. Y luego, en el lado del cliente, tenemos otro código de React, que se utiliza para cargar los marcadores para cada caja específica, y para visualizarlo, se ve algo así. Entonces, cada una de esas cajas es otra instancia de ese componente. Y este es uno de esos hooks generados automáticamente, que mencioné, que se genera a partir de nuestro esquema de GraphQL, y podemos llamarlo Apollo almacenará en caché el resultado. Ahora las cosas son bastante rápidas. Y en cuanto a los marcadores, tenemos dos hooks, que nos permiten dejar de renderizar los marcadores cuando salen de la ventana gráfica, para que solo podamos renderizar lo que está en la pantalla. Entonces, ahora cuando estás usando el mapa, se ve algo así. Entonces, detrás de escena, aumentamos el nivel de detalle a medida que te acercas, utilizando un método como este. Y como demostración, esto es lo que se ve para un usuario en estos días. Mucho mejor de usar. Una experiencia mucho más agradable y espero que ayude a muchas personas necesitadas a encontrar un baño donde nadie vaya. Entonces, otra cosa emocionante fue una superposición de accesibilidad que proporcionaba la capacidad para que las personas que tal vez no pudieran ver bien cuando usan la aplicación puedan usar un diálogo que aparece sobre el mapa. Simplemente se superpone en la parte superior. Y proporciona una lista de los primeros cinco baños dentro de esa caja que ves en el medio. Entonces, mientras te desplazas por el mapa, incluso sin poder ver, aún puedes acceder a los datos que proporcionamos. Bastante importante para la accesibilidad. Entonces, realmente no agregamos el nombre a la cadena comprimida. Así que solo tuvimos que agregar otra consulta que nos permite cargar por lotes los nombres de los lugares según la demanda. Se superpondrá a un bot. Mueves el bot y encuentras nuevos nombres. Esto es cómo se ve. Entonces, puedes tocar con tus RPs.

Y acceder a los mismos data que cualquier otra persona podría. En cuanto a testing y GitHub actions, esto era bastante nuevo para el proyecto. Y nos movimos, básicamente, de no tener integración continua, aparte de algunas pruebas de extremo a extremo muy, muy deficientes, a una suite muy completa de pruebas de Cypress, lo cual ha sido bastante increíble para nosotros como colaboradores, porque significa que podemos avanzar más rápido y con más confianza, especialmente porque somos solo nosotros dos.

Así que muy rápidamente, quiero contarles sobre el futuro. ¿Qué más tenemos planeado para este proyecto? Hay bastante, si soy completamente honesto. Lo que sucede con un producto como este es que todos necesitan usar el baño, todos tienen una opinión sobre lo que se podría cambiar. Todos quieren, pueden relacionarse inmediatamente con el tipo de problemas que estamos tratando de resolver. Nunca he tenido una conversación con alguien que haya ido y no haya tenido una sugerencia para una nueva función. Y llevamos un registro de esto en GitHub. Así que creamos problemas cada vez que surge algo.

También recopilamos activamente comentarios de los usuarios. Tenemos un pequeño cuadro de comentarios de los usuarios en el sitio web. Y todo el tiempo, las personas simplemente escriben sus pensamientos mientras usan la aplicación y nos dan una idea de lo que se podría mejorar. Y a menudo, son cosas que nunca hubiéramos notado nosotros mismos. Además de eso, actualmente está limitado al Reino Unido. Hay algunos baños mapeados en otros países. Pero definitivamente no es compatible oficialmente por el proyecto. Así que tenemos un trabajo muy interesante que se avecina. Y nos encantaría recibir ayuda con respecto a la pregunta de cómo llevar esto a otros países. ¿Necesitamos pensar en problemas de internacionalización? ¿Cómo almacenamos los datos? En este momento, funcionamos con un presupuesto muy limitado de alrededor de 40 libras al mes. ¿Cómo permitimos que alguien que quiera iniciar su propia versión del mapa en Francia pague por esa infraestructura? ¿Podría ser sindicado tal vez? Estas son todas preguntas bastante interesantes de las que podría hablar durante otra hora.

Pero voy a terminar la charla con este pequeño logotipo del mapa de baños impreso en 3D que hice para Rupert para Navidad. Pensé que sería un lindo regalo para él. Y un agradecimiento rápido a todos los demás que han contribuido al proyecto a lo largo de los años. Ha sido un esfuerzo grupal real. Y definitivamente sigue en marcha. Y con todo este trabajo que hemos estado haciendo, realmente esperamos recibir más contribuciones de personas interesadas ya sea desde la perspectiva técnica, el lado de la experiencia del usuario, o simplemente desde un punto de vista de defensa si estás interesado en ayudar a las personas a encontrar un baño, este proyecto es para ti. Muchas gracias por escuchar. Espero que hayas aprendido algo. Y si algo, espero que me alegre mucho poder crear conciencia sobre el proyecto porque creo que está haciendo un verdadero bien social. Gracias.