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

Rate this content
Bookmark

El Gran Mapa de Baños Públicos Británico es un proyecto de código abierto impulsado por la comunidad y dedicado a ayudar a las personas a encontrar baños en todo el Reino Unido, con alrededor de 14,000 baños registrados y contando. En 2021 asumimos el desafío de migrar el proyecto de una aplicación React SPA escrita en JavaScript a NextJS y TypeScript. Juntos descubriremos por qué decidimos que era hora de migrar, los numerosos desafíos técnicos que enfrentamos en el camino, cómo este trabajo beneficia a nuestros usuarios y los emocionantes planes que tenemos para el futuro.

24 min
24 Oct, 2022

Video Summary and Transcription

La charla discute la migración del Proyecto del Mapa de Baños desde la aplicación Create React a Next.js, con planes de llevarlo a nivel internacional. El proyecto tiene como objetivo abordar la insuficiente provisión de baños públicos en el Reino Unido. Incluye baños de acceso público, esquemas de acceso comunitario y contribuciones de los usuarios. La migración a Next.js ofrece beneficios como renderizado en el lado del servidor y precarga de raíz. La charla también cubre la migración a TypeScript, mejoras en la velocidad de carga y almacenamiento en caché, páginas dinámicas, migración de API, geohashing, agrupamiento de marcadores, carga por fragmentos, superposición de accesibilidad y planes futuros de expansión y contribuciones de los usuarios.

Available in English

1. Introducción al Proyecto Toilet Map

Short description:

Hola, mi nombre es Oliver y hoy estoy aquí para hablarles sobre 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 de expandirlo internacionalmente. Cubriré por qué es importante que estemos realizando este trabajo. Aquí está el logo y la URL. La situación de los baños públicos en el Reino Unido no es buena. Hemos perdido más del 10% de los baños públicos en el Reino Unido en ocho años. Como proyecto, estamos tratando de solucionar esta situación.

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

2. Baños Públicos e Integración de Datos

Short description:

Existen baños públicos accesibles proporcionados por varios negocios que incluimos en el mapa. También tenemos programas de acceso comunitario donde los negocios pueden registrarse. El conjunto de datos consta de 14,000 ubicaciones activas, siendo las contribuciones de los usuarios la principal fuente de expansión. Durante el confinamiento, nos fusionamos con Lucations UK y enfrentamos desafíos al integrar sus datos. La migración a Next.js ofreció características como el renderizado del lado del servidor y la precarga de raíz.

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.

3. Migración a TypeScript y Next.js

Short description:

Nos mudamos a TypeScript, mejorando la experiencia de usuario, la velocidad de carga y el almacenamiento en caché de las páginas. Los desarrolladores encontrarán más fácil contribuir. El renderizado del lado del servidor mejora el tiempo de carga. Las consideraciones de migración incluyeron enlaces, imágenes y optimización de imágenes.

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.

4. Páginas Dinámicas y Migración de API

Short description:

Páginas dinámicas, migración de la API, arquitectura GraphQL, capa de caché Redis, Aloo, ejecución del servidor GraphQL, autenticación, mejora de la experiencia de usuario, optimización de filtros, representación mediante bits.

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:

5. Mejorando Filtros con Operaciones de Bits

Short description:

Realizamos una operación OR en las opciones y utilizamos una máscara para determinar el estado de cada bit. Esto mejoró los filtros.

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.

6. Geohash y Agrupación de Marcadores

Short description:

Veamos qué es un geohash. Es una forma de representar una ubicación utilizando una cadena de caracteres. Al cambiar la longitud del hash, podemos hacerlo más preciso. Esto nos permite convertir la latitud y longitud en una cadena de tamaño constante. Utilizamos una biblioteca llamada MarketBuster para agrupar nuestros marcadores y mejorar la velocidad de carga.

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,

7. Carga de fragmentos y Superposición de accesibilidad

Short description:

Implementamos un sistema de carga de fragmentos para evitar que el mapa se congele en dispositivos más antiguos. Al solicitar baños dentro de geohashes específicos, podemos cargar marcadores para cada cuadro y renderizarlos en el lado del cliente. Con un mayor nivel de detalle a medida que te acercas, el mapa ahora ofrece una mejor experiencia de usuario. Una superposición de accesibilidad permite a los usuarios con discapacidades visuales acceder a los datos de los baños al proporcionar una lista de baños dentro del área visible. También agregamos una consulta para cargar por lotes los nombres de ubicación según la demanda.

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.

8. Planes futuros y llamado a contribuciones

Short description:

Implementamos pruebas exhaustivas de Cypress para integración continua. Recopilamos activamente comentarios de los usuarios y planeamos expandir el proyecto a otros países. Tenemos preguntas sobre internacionalización, almacenamiento de datos y financiamiento de infraestructura. El proyecto es un esfuerzo grupal y da la bienvenida a contribuciones desde diversas perspectivas. Gracias por escuchar y apoyar nuestra misión.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn