Table of Contents
Los días 8 y 9 de noviembre participé en el evento React Global Online Summit como oyente. Se trataron numerosos temas en este evento online, y en este artículo, me gustaría repasar algunas de las sesiones del junior track, como Composable Microfrontends, React Hooks, TDD with User Interfaces, y Web Performance.
Composable MicroFrontends with React – Sohini Pattanayak
El evento React Global Online Summit comenzó con Sohini Pattanayak, Associate Product Manager en Entando, que ayuda a los desarrolladores, arquitectos y empresas a acelerar el desarrollo mediante el uso de la arquitectura modular en aplicaciones componibles. Comenzó su charla, «Composable MicroFrontends with React», esbozando la progresión de las aplicaciones monolíticas a los micro frontales a lo largo de la historia.
Pattanayak mencionó dos tendencias tecnológicas estratégicas para 2022: la primera es la de las aplicaciones componibles, que se crean a partir de componentes modulares centrados en el negocio que simplifican el desarrollo y la reutilización del código. La segunda tendencia es el uso de plataformas nativas en la nube, que son tecnologías que permiten crear nuevas arquitecturas de aplicaciones robustas, elásticas y ágiles.
A continuación, explicó su producto llamado «Entando», que es una plataforma de composición de aplicaciones de código abierto para construir aplicaciones web empresariales en Kubernetes. Esta plataforma proporciona un conjunto de tecnologías para construir, desplegar, ejecutar y gestionar aplicaciones desarrolladas mediante la composición de componentes (micro frontales, microservicios, elementos UI/UX, etc.) y capacidades empresariales. En el canal de YouTube de Entando puedes obtener más información sobre los diferentes roles y aprender cómo utilizar esta plataforma de forma eficaz.
REACT GLOBAL ONLINE SUMMIT 22.2 – Composable MicroFrontends with React, Sohini Pattanayak
All about React Hooks – Nivetha Maran
La segunda charla del evento React Global Online Summit que me gustaría mencionar es la de Nivetha Maran «All about React Hooks». Maran proporcionó una breve historia de React y luego describió los siguientes hooks: useState que da estado local a los componentes funcionales; useContext comparte valores utilizados por múltiples componentes en el estado global, como la autenticación del usuario o los idiomas preferidos; useEffect viene de «side effect», que afecta a algo fuera del ámbito de la función que se ejecuta (como peticiones de red, suscripciones, obtención de datos); useCallback se utiliza para evitar problemas de rendimiento en los componentes hijos que memorizan el callback; useReducer es una alternativa a useState y se utiliza para lógicas de estado complejas con múltiples subvalores o cuando el siguiente estado depende del anterior; useLayoutEffect es similar a useEffect pero se dispara de forma sincrónica después de todas las mutaciones del DOM.
Test-Driven Development for Building User Interfaces – Tyler Hawkins
La tercera presentación, «Test-Driven Development for Building User Interfaces», estuvo a cargo de Tyler Hawkins, Tech Lead en Adobe. Hawkins hizo hincapié en el uso de TDD cuando hay requisitos claros del proyecto, entradas, salidas y correcciones de errores. Enzyme era el principal marco de pruebas antes de que React Testing Library se centrara en los detalles de implementación, como la actualización automática del estado y los accesorios, en contraste con el enfoque de RTL en las interacciones del usuario. Su hipótesis es que conociendo nuestro diseño de UI y las interacciones, podemos hacer TDD para crear componentes de UI (incluso si no sabemos cómo implementar nuestros componentes). Hizo una demostración de un simple formulario de solicitud con TDD y la React Testing Library para demostrar su hipótesis.
Web Performance is more important than you think – Hemanth Udupi
La cuarta presentación del evento React Global Online Summit fue «Web Performance is more important than you think», a cargo de Hemanth Udupi, ingeniero de software senior de Adobe. Udupi explicó algunos de los datos devueltos por la Performance API para medir las métricas de rendimiento de nuestras páginas y dio algunas sugerencias sobre cómo optimizar estas métricas.
En su presentación, el rendimiento web se definió como la medida de la rapidez con la que el navegador web de un usuario puede descargar y mostrar páginas web. Si el tiempo de descarga de nuestra aplicación es inferior a 2,5 segundos, entonces tiene un buen rendimiento. Sin embargo, si supera los 4 segundos, se considerará que tiene un rendimiento deficiente.
Para evaluar el rendimiento de nuestras aplicaciones web, Udupi recomienda utilizar la Performance API. La Performance API es un conjunto de estándares que miden y analizan diversas métricas de rendimiento. Las ventajas de utilizar la Performance API incluyen la mejora de la experiencia de creación de perfiles de rendimiento en las herramientas de desarrollo, el uso de Chrome Dev Tools y otras herramientas (Lighthouse), la medición de usuarios reales en producción y la obtención de marcas de tiempo precisas para todas las solicitudes de red.
window.performance es un atributo de sólo lectura que devuelve un objeto que recoge todos los datos. Algunos de los datos clave son fetchStart y responseEnd que son los tiempos que se toman cuando se empieza a hacer una llamada de red y se recibe la respuesta del servidor. DomContentLoaded y Processing, que no están bajo nuestro control, que el navegador está digiriendo los datos recibidos del servidor.
La Performance Timeline API que es la extensión de la API de rendimiento tiene tres métodos principales como:
- getEntries()
- getEntriesByName()
- getEntriesByType()
También explicó definiciones importantes para entender los parámetros de la API de rendimiento:
El tiempo de navegación es el tiempo reportado desde el momento en que se pulsa «ir a la página» hasta que ésta comienza a cargarse. (Por ejemplo, de la página anterior a la nueva página, o de 0 a la nueva página)
El tiempo de pintado es el tiempo de dibujo de los píxeles en el navegador. Hay dos tiempos de pintado: first-paint (el navegador pinta el primer píxel) y first-contentful-paint (se pinta el primer trozo de contenido en el DOM).
Hemanth ofreció las siguientes sugerencias para mejorar el rendimiento de la web con React:
- haz que sus sitios web sean utilizables lo antes posible mediante la carga lenta y las transiciones,
- utiliza una biblioteca optimizada en lugar de construir la tuya,
- agrupa sólo lo que necesitas y optimiza las dependencias,
- usa React.PureComponent,
- no uses el índice como claves (es mejor usar claves únicas para que React sepa qué nodo debe volver a renderizar),
- utiliza React.Fragments o para evitar envolturas de elementos HTML adicionales (así no añadimos elementos extra innecesarios a nuestro DOM),
- considera el renderizado del lado del servidor (más rápido que el del lado del cliente y un rendimiento SEO consistente),
- activa la compresión gzip en el servidor web (podría mejorar hasta un 70% el tamaño de nuestro paquete).
Además, mencionó un próximo estándar de rendimiento web llamado «Largest contentful paint«, una métrica centrada en el usuario para medir la mala velocidad percibida. Indica cuándo es más probable que se haya cargado el contenido principal en la línea de tiempo de carga de la página.
Conclusión
Gracias al equipo de Geekle por organizar el evento React Global Online Summit y a los ponentes por sus magníficas charlas. Aprendí un montón de información nueva sobre las próximas tecnologías front-end. También escribí un resumen de las lecciones que aprendí en el evento React Global Online Summit – senior track – en caso de que estés interesado en echarle un vistazo.
