Table of Contents
Los días 8 y 9 de noviembre de 2022 asistí al React Global Online Summit, un evento organizado por el equipo de Geekle. Ya escribí un artículo sobre el evento React Global Online Summit junior track, pero esta vez me gustaría centrarme en mi experiencia en el senior track.
«React & Performance» – Balram Singh
La primera charla que me gustaría compartir es la de Balram Singh, que es Manager en Publicis Sapient. Balram comenzó su charla recapitulando la evolución de la web. Luego empezó a comparar Gatsby y Next.js en una variedad de características porque ambos ofrecen las técnicas de renderizado más recientes, SSG y SSR.
Plugins y plantillas
Los más de 3000 plugins y plantillas estables que proporciona Gatsby ahorran una cantidad significativa de tiempo de desarrollo en comparación con Next.js.
Espacio de despliegue preferido
Gatsby Cloud es el entorno de despliegue ideal para Gatsby, mientras que Vercel es el área de despliegue preferida para NextJs. Si eliges la opción sugerida, te beneficiarás de una serie de características que acelerarán el desarrollo.
Obtención de datos
Gatsby promociona las ventajas de GraphQL y aconseja a sus usuarios que lo utilicen, mientras que Next.js no lo hace.
Características de React
Aunque React 18 todavía está en beta, Next.js tiene ejemplos para su componente React Server. Gatsby aún no nos ha dado nueva información al respecto.
Docker
A diferencia de NextJs, que puede desplegarse en cualquier proveedor de alojamiento que admita contenedores Docker, Gatsby Docker puede desplegar sitios web en un contenedor Docker.
MonoRepos
Monorepos nos ofrece compartir código y componentes entre diferentes aplicaciones frontend. Lorna y Travis están acostumbrados a construir repos mono en Gatsby, mientras que Turbo repo se puede utilizar para producir repos mono en Next.js.
Balram concluyó su charla explicando cuándo usar Nextjs y Gatsby. Gatsby es la mejor opción si queremos GraphQL, necesitamos construir nuestro sitio rápidamente utilizando plugins y plantillas de Gatsby, y la estabilidad y consistencia de los datos son cruciales para nosotros. Next.js debería usarse si necesitamos un control completo del código, y actualizaciones frecuentes del sitio web, y las características más recientes de React son esenciales para nosotros.
«Writing Fantastic Tests!» – Abhighyaa Jain
La segunda charla del evento React Global Online Summit estuvo a cargo de Abhighyaa Jain, ingeniera de software en DisneyPlus Hotstar+. Hizo hincapié en la importancia de escribir pruebas y habló de las diferencias entre las pruebas E2E y las pruebas unitarias, así como de la forma de llenar el vacío existente entre ellas.
Abhighyaa explicó que las pruebas unitarias son sencillas y rápidas de desarrollar, sus componentes de prueba están aislados y detallados, pero su alcance es muy limitado. En cambio, las pruebas E2E no tienen estas restricciones e incluyen todo el sistema en su ámbito de aplicación, además de no requerir ninguna simulación. Pero son caras y entran muy tarde en el ciclo de desarrollo.
Según ella, existe una brecha entre las pruebas unitarias y las E2E, y necesitamos algo intermedio para conseguir confianza en la aplicación global. Para ello, nuestras pruebas deben ser sencillas de entender y rápidas de construir, proporcionar suficiente confianza, superar la prueba de refactorización, entrar en una fase temprana del ciclo de desarrollo y eliminar dependencias.
Mostró las opciones de prueba de páginas que ofrece Next.js. Next.js considera una página como una unidad independiente y permite realizar pruebas en esa página. Concluyó sugiriendo a quienes desarrollan pruebas que escribir pruebas con confianza y cubrir todos los casos de uso es más importante que la cantidad de pruebas y el porcentaje de cobertura.
«Supporting React, A Library Providers Perspective» – Niall Crosby
La tercera charla estuvo a cargo de Nial Crosby, fundador de Ag Grid, una librería de rejilla de datos que se utiliza en diversos frameworks para mostrar datos en filas y columnas. Nial demostró por qué la rejilla Ag no había funcionado bien con React, los problemas con los que tuvieron que lidiar y los cambios que hicieron. También evaluó su nuevo enfoque con SolidJS para compararlo con ReactJs y soluciones Javascript.
El proyecto Ag grid comenzó en 2015. Niall había creado Ag grid para sí mismo en su anterior trabajo. Como el código era abierto, pudo ver que había muchas descargas del proyecto, así que decidió dejar su trabajo para crear su empresa. Ag-grid tiene una versión empresarial con más funciones, y hoy son diez mil las empresas que lo utilizan. A pesar de las numerosas modificaciones en tiempo real, Niall afirma que el rendimiento de la grid es bueno.
El problema al que se enfrentaron con ReactJs
Para soportar tantos frameworks como fuera posible, tenían dos opciones: una era envolver el componente (el mismo código Js para usar en cada framework), y la otra era escribir un componente Ag grid para cada framework. Optaron por la solución de envoltura, escribiendo el código JS y envolviéndolo para entregarlo a otros frameworks. Luego tuvieron la libertad de personalizar el framework que eligieron.
Tenían un problema con el enfoque de React. Para explicar el problema añadió suppressReactUI={true} prop en el componente AgGrid. Había un div adicional en la consola que se llamaba ag-react-container. La estructura del componente grid tampoco era visible. Con la prop dada, usaban componentes js en vez de React. Por otro lado, no era una buena experiencia duplicar el número de elementos div en DOM para el rendimiento.
La solución fue desacoplar la lógica de negocio de las operaciones DOM, dejando a los componentes únicamente a cargo de interactuar con el DOM. El controlador asigna la operación DOM al componente.
Después de eliminar ese prop que añadió al principio de su charla pudimos ver los componentes de fila y celda en la consola y ya no había ningún div extra.
Demostró que redimensionar el ancho de las columnas en React lleva más tiempo (60ms) que cambiarlo en JS (11ms). Esto se debe a que React utiliza el Virtual Dom para aplicar estilos, mientras que JS no lo hace. React funciona bien cuando se trata de modificar datos.
Entonces descubrió SolidJS, un framework similar a React sin DOM virtual. Creó el motor de renderizado SolidJS y vio que era mucho más rápido que ReactJs en el styling y similar a la hora de actualizar los datos.
«React Remixed Advanced» – Daniel Afonso
Daniel Afonso, el defensor de los desarrolladores en OLX Group, comenzó su discurso aconsejando a la audiencia que vieran su charla React-Remix en el JS Global Summit en 2022, ya que era la continuación de lo que estaba hablando en ese momento. Daniel afirmó que, dado que Learning Remix hace las cosas como la web las ha estado haciendo durante los últimos 20 años, es similar a aprender la web.
Nos explicó cómo crear mensajes amigables con componentes UI comprobando errores de estado y manejándolos con el hook useCatch. Dijo que los casos ErrorBoundry se pueden utilizar cuando nos olvidamos de añadirlos en CatchBoundaries. También podríamos añadir mensajes personalizados como ‘se ha producido un error inesperado’. Además, mostró el hook useTransition para renderizar un componente UI cuando nuestro formulario es enviado.
«Session Management Using React Router V6» – Anton Kalik
Anton Kalik, ingeniero de software sénior de Amenitiz, presentó durante su charla las nuevas funciones de gestión de sesiones de React Router v6.4. Nos aconsejó ser conscientes de dónde están el sitio protegido y el público. Cuando necesitamos acceder a información protegida, no podemos conseguirla si no tenemos sesiones, sin embargo, en las rutas públicas, somos libres de mostrar lo que queramos aunque no tengamos ninguna sesión.
En V6.4, hay nuevas características y requieren el uso de element prop y tener un MainLayout con navegación y todas las páginas requeridas dentro de él. Además, el uso de peticiones y acciones async también hace la vida más fácil. Anton nos aconsejó que cuando comencemos un nuevo proyecto utilicemos la versión 6.4, de esta forma podremos entregar valor de negocio rápidamente.
Conclusión
Fue estupendo participar en el evento React Global Online Summit. Aunque no pude incluir un resumen de todas las charlas, realmente las disfruté. Si te interesan estos temas, te animo a participar en la próxima edición que tendrá lugar los días 18 y 19 de abril. Para más información, no dudes en visitar el sitio web del evento.
