Superando Limitaciones de Rendimiento en Componentes React para Dispositivos de Baja Gama

¡Hola a todos! Estoy muy emocionado de hablar sobre cómo superar las limitaciones de rendimiento en los componentes de React para dispositivos de gama baja. Mi nombre es Seungho de LG Electronics y lidero el framework Enact. Enact es un framework de aplicaciones basado en React diseñado para componentes de interfaz de TV, navegación con control remoto, accesibilidad e internacionalización. Se utiliza en millones de TVs webOS, incluyendo las aplicaciones que ves en las TVs LG OLED.

En esta charla, compartiré nuestras experiencias en la superación de las limitaciones de rendimiento al crear un componente de React para esas aplicaciones. Los dispositivos de gama baja, como las smart TVs y los set-top boxes, suelen tener un rendimiento de hardware limitado. Esto dificulta el desarrollo de aplicaciones web de alto rendimiento en estos dispositivos. Hay muchas métricas de rendimiento, pero en esta charla me centraré solo en el tiempo de lanzamiento de la aplicación y el rendimiento del desplazamiento.

Hablemos primero sobre el tiempo de lanzamiento de la aplicación. El tiempo de lanzamiento de la aplicación es una de las métricas de rendimiento más importantes en dispositivos inteligentes para ofrecer una experiencia de calidad nativa a los usuarios. Al desarrollar el Marco de Aplicaciones, el mayor desafío fue proporcionar un rendimiento rápido y fluido para que el usuario no pueda distinguir si es una aplicación web nativa o una aplicación web. Entonces, ¿cómo mejoramos de izquierda a derecha? Obviamente, aplicamos el pre-renderizado. Probablemente hayas visto esta imagen antes. Es de web.dev para explicar el renderizado en el lado del servidor.

Dado que nuestro objetivo es desarrollar aplicaciones preinstaladas para el dispositivo, elegimos una estructura que se acerca a CSR con pre-renderizado. Esta es una versión muy simplificada de nuestro flujo de pre-renderizado. Este es un típico build de una aplicación React. Transpilamos el código JSX y ESCX y lo empaquetamos. En este tiempo de compilación, utilizamos el servidor de nodos para llamar a la función renderToString. Esto genera el HTML para la primera pantalla y empaquetamos la aplicación con este HTML. Cuando ejecutamos la aplicación, llamamos a la función hydrateRoot en lugar de la función createRoot. Para admitir más de 200 idiomas, generamos HTML pre-renderizado para cada idioma en tiempo de compilación. El contenido duplicado se guarda como multi.html. Un archivo localeMap.json mapea el idioma al archivo HTML y un archivo ebin4.json, que es el M-metadata, especifica el archivo HTML como el punto de entrada principal. Un consejo profesional, utilizamos VSnapshot para aplicaciones del sistema. Esta es una operación muy específica y definitivamente no es ideal para todos. Sin embargo, es útil en ciertos escenarios y esto ayudará a simplificar el proceso. Creamos el complemento de instantánea y asume el uso de React. Este complemento requiere obtener un binario MKSnapshot. Por lo general, está vinculado a la versión específica de Chromium que estás apuntando. Presta atención para asegurarte de tener versiones coincidentes. El tiempo de lanzamiento depende de la complejidad y el tamaño de la aplicación. Pero en general, la aplicación hecha con VSnapshot hizo que el tiempo de lanzamiento fuera más rápido en más del 30%.

Hablemos ahora sobre el rendimiento del desplazamiento. En dispositivos de TV, las aplicaciones de tipo multimedia como el Reproductor de Medios necesitan desplazarse por muchos elementos. Por lo tanto, garantizar un desplazamiento fluido es fundamental para ofrecer una experiencia de calidad de aplicación nativa a los usuarios. Entonces, ¿cómo mejoramos de izquierda a derecha? Para manejar elementos de lista muy largos, creamos el componente Virtual List. Las técnicas de virtualización ahora son comunes y hay muchos componentes de lista virtualizados excelentes disponibles.

La idea de la virtualización es que en lugar de crear todos los nuevos dominós, los reciclamos en dominós visibles. Esta pantalla es una capa del componente Virtual List. Hay un div contenedor largo que tiene la altura completa de toda la lista. Cada elemento está por encima de él. Creamos cada uno de estos dominós de elementos en números ligeramente mayores que el área de visualización.

A medida que el usuario desplaza la lista, desplazamos el div contenedor. Cuando el primer elemento sale de la vista, lo movemos al final de los elementos. De esta manera, reciclamos el dominó. Este es un flujo simple de Virtual List en modo de traducción. Lo llamamos modo de traducción porque movemos el div contenedor con la función Translate3D. Cuando el usuario gira la rueda, escuchamos el evento OnWheel. A partir de esta información del evento, calculamos la distancia que se debe mover. En el animador, movemos el contenedor llamando a la función Translate3D. A medida que el contenedor se mueve, virtualizamos los elementos. Y este comportamiento se realiza dentro del Request animation frame.

Sin embargo, esto no fue suficiente para lograr 60 FPS en dispositivos de gama baja. Así que intentamos delegar el desplazamiento al navegador. Lo llamamos Modo Nativo porque el navegador mueve el contenedor allí. Esto elimina el cálculo de distancia y todo el comportamiento de mover el contenedor dentro del Request animation frame. En su lugar, solo necesitamos observar el evento OnScroll y manejar la virtualización de elementos dentro de ese evento. Finalmente, logramos alcanzar los 60 fps en todos los dispositivos.

Los TBF necesitan admitir el desplazamiento a través de las teclas de control remoto hacia arriba y hacia abajo. Para mover el elemento contenedor a través de las teclas de flecha, llamamos a la función scrollTo(). Utilizamos la opción smooth para el desplazamiento con zoom. Para una entrada de teclado continua, necesitamos calcular la coordenada adecuada y seleccionar las opciones smooth o instant. A partir del flujo anterior en modo nativo, necesitamos agregar el controlador onKeyDownEvent. En este controlador, calculamos la coordenada y llamamos a la función scrollTo() para mover el elemento contenedor.

Ahora estamos en la página final. Resumamos. Para mejorar el tiempo de lanzamiento de la aplicación, hemos utilizado el pre-renderizado y VSNapture. Para mejorar el rendimiento del desplazamiento, hemos utilizado la virtualización con desplazamiento nativo. Al aplicar estas técnicas, hemos podido crear componentes de React de alto rendimiento que ofrecen una experiencia de calidad nativa en dispositivos de gama baja. Gracias por ver a todos. Espero que realmente disfruten mi presentación y la encuentren útil. Adiós.