React Native, como se ve en la TV

Cuando me uní a Just Watch, no sabía mucho sobre el desarrollo de aplicaciones de TV, y honestamente me resultó difícil encontrar información al respecto en línea. Porque sí, hay una sección dedicada a ello en el sitio web de React Native, pero no hay mucho. Así que el año pasado, cuando el equipo de React publicó esta entrada de blog titulada la Visión de Muchas Plataformas, estaba emocionado y pensé, oh, genial, finalmente están hablando del desarrollo de aplicaciones de TV. Pero resulta que no lo estaban haciendo. Estaban hablando realmente de React Native Windows y Mac OS y VR, pero no mencionaron las TVs. Así que esta cosa aquí en la animación no es una TV en caso de que lo pensaras, en realidad es un escritorio. Qué decepción.

Así que en mi charla de hoy, voy a hablarles sobre cómo pueden construir sus aplicaciones de TV utilizando React Native. Qué es especial sobre el desarrollo de aplicaciones de TV en comparación con el desarrollo de aplicaciones móviles. Y finalmente, les daré un par de pequeños consejos y trucos que pueden usar para hacer que su aplicación tenga un mejor rendimiento en un entorno limitado como el entorno de TV. Cuando estás construyendo para TVs, las tres plataformas principales a las que te vas a dirigir son Android TV y Fire TV, basadas en Android, y tvOS. Para estas, puedes usar React Native tvOS, que es un fork del repositorio principal de React Native, lo cual es un poco desafortunado porque significa que siempre estará un poco atrasado, pero se actualiza con bastante regularidad. Y este repositorio de React Native tvOS te brinda una serie de funcionalidades y características que puedes usar para construir tus aplicaciones de TV. Sin embargo, esto no es todo, porque si quieres apuntar a TVs LG y TVs Samsung o Xboxes como nosotros, necesitarás construir tu aplicación como una aplicación HTML. Y para hacerlo mientras aún usas la misma base de código que estás usando para las otras plataformas, puedes usar React Native web. Hablando de cosas específicas del desarrollo de aplicaciones de TV, definitivamente hay navegación direccional o navegación basada en teclas de flecha. Tus usuarios interactuarán con tu aplicación solo usando su control remoto. Así que sus opciones están limitadas allí. Solo pueden ir hacia arriba, abajo, izquierda, derecha, seleccionar, retroceder, a menos que tengan un TV LG, que tiene su propio control remoto mágico. Así se llama realmente, que es una interfaz basada en puntero. Pero aparte de eso, tendrán esta navegación basada en teclas de flecha. React Native tvOS te brinda este controlador de eventos de TV que te permite interceptar estas teclas eventos. Y también te brinda una serie de props como focusable, unfocus, unblur. Estos funcionan exactamente como lo hacen en pressable en el repositorio regular de React Native. Pero también algunos que son específicos para el desarrollo de aplicaciones de TV, como hasTVPreferredFocus, que le dice al sistema operativo qué componente debe recibir el enfoque de forma predeterminada al renderizar tu vista. O las props next focus down, left, up y right.

Y también se utilizan para indicar al sistema operativo dónde debe ir el enfoque, en este caso, cuando los usuarios presionan las teclas de flecha. Así que en comparación con el desarrollo de aplicaciones móviles, el enfoque es mucho más complejo. Por lo general, con las aplicaciones móviles, lo que haces es simplemente decir, hey, si este campo de entrada tiene el enfoque, por favor, muestra el teclado. Algo así. Por lo general, no es mucho más que eso.

Así que veamos algo de código. Tengo un repositorio aquí, que creé utilizando la plantilla de React Native CLI, clonando esta plantilla de React Native con TypeScript para TV. Así que si ejecuto Yarn iOS, esto abrirá el simulador de Apple TV y la aplicación de demostración regular de React Native. Se ve un poco raro con estos colores. No estoy seguro por qué. Y aparte de eso, es solo tu aplicación regular. Pero puedes ver en la parte superior derecha aquí, puedes ver que me está diciendo qué tecla de flecha estoy presionando. Esto es React Native TV OS.

Así que limpiemos todo aquí dentro para mostrarte cómo es desarrollar aplicaciones de TV con React Native. Tengo mis propios estilos, nada extravagante, solo, sí, son míos. Los estoy importando y limpiando las importaciones. Así que ahora tenemos un lienzo en blanco. Aquí vamos. Tengo esta API, que es una API pública llamada Docs.io. No es mía. Solo la estoy usando. Estoy obteniendo 10 imágenes aleatorias de perros y dándoles un ID basado en su posición en el array. Así que vamos a obtenerlas cuando el componente se monte. Estoy usando hooks. Así que dogs, set dogs. Vamos a tener un useState, que contendrá un array de imágenes. Queremos obtenerlo, así que vamos a tener un useEffect, que realmente obtendrá las imágenes de perros. Aquí vamos. Es una promesa. Cuando obtengo el resultado, llamo a setDogs.

Y quiero ejecutar esto solo una vez, al menos en React Native 17. Y esto no es bueno porque TypeScript no sabe qué tipo de array es. Entonces este será el tipo de retorno de la función que acabo de llamar. Entonces fetchDogs. Aquí vamos.

Aún no es bueno porque es una promesa y quiero obtener el valor del resultado en su lugar. Así que ahora está todo bien, pero aún no estoy renderizando nada. Así que vamos a renderizarlo aquí. Vamos a mapear nuestros perros. Así que ahora tengo un perro aquí, en realidad una imagen de perro. Y vamos a renderizar un pressable, que es exactamente el mismo pressable que conoces y amas de React Native. Aquí vamos. Pressable. Vamos a darle una clave porque está dentro de un array. Y vamos a renderizar una imagen dentro, que es la imagen del perro, más o menos lo que queremos. Así que URI de la imagen del perro. Aquí vamos. Vamos a darle un estilo. Estilo. Una imagen. Y digamos que debe ocupar toda el área disponible. Aquí vamos. Así que ahora deberíamos tener, y tenemos, una lista de imágenes de perros.

Y si mantengo presionada la tecla Opción y desplazo aquí, puedes ver que en realidad se desplaza. Pero si presiono las teclas de flecha en su lugar, puedes ver que todavía se desplaza, pero nada cambia porque no estoy renderizando nada diferente si algo está enfocado. Así que primero, déjame hacerlo horizontal porque me gusta más. Y vamos a realizar un seguimiento del enfoque, que es algo que harás todo el tiempo en las aplicaciones de TV. Así que vamos a mantener el estado aquí. Y digamos que este es el ID del componente que está actualmente enfocado. El ID será simplemente una cadena.

Y vamos a realizar un seguimiento de eso. Entonces, cada vez que uno de esos perros esté enfocado, quiero actualizar el ID de enfoque. ¿Cómo hago eso? Con una devolución de llamada. Llamémoslo en el enfoque. Y digamos que useCallback. Voy a pasarle este ID a esta función. Y seguirá siendo una devolución de llamada. Así que quiero otra flecha aquí. Y quiero llamar a setFocusedID, pasándole el ID. Aquí vamos. Array de dependencias. Boom.

En el enfoque. Y ahora vamos a pasarle el ID del perro. Aún no cambia nada en la representación. Quiero actualizar el estilo. Tengo los estilos presionables. Pero si está enfocado, quiero que también tenga un marco, un marco azul alrededor, que está en un estilo que he llamado estilos enfocados. Y así que si este es el perro con el ID de enfoque, entonces el ID del perro es igual al ID de enfoque, quiero agregar este otro estilo. Así que no solo presionable, sino también enfocado. Aquí vamos. Y ahora, si me muevo con la tecla de flecha, puedes ver que todo funciona.

Así que agreguemos otro botón justo debajo para tener al menos navegación 2D. Así que digamos estilos.botones. Sí. Y agreguemos otro presionable. Y le daremos el mismo tratamiento que le dimos a los perros. Así que si el ID de enfoque es igual a, llamémoslo botón, voy a decir estilos.botón, pero también estilos.enfocado. Si no, solo estilos.botón. ¿Qué fue eso? No lo sé.

Styles.button. Aquí vamos. También necesitamos actualizar el enfoque. Entonces, nuevamente, en el enfoque, y esto es el botón que acabamos de mencionar. Y dentro de él, vamos a renderizar solo la etiqueta. Estilo de etiqueta. Aquí vamos. Y digamos que esto es un botón. Esto simplemente agrega otro botón aquí, y puedo navegar hacia él.

Pero si presiono aquí abajo, por ejemplo, o aquí en cualquier imagen de perro que no sea la primera , tvOS no me permite enfocar el botón. Esto se debe a que tvOS, de forma predeterminada, no te permite mover hacia abajo con enfoque si el componente al que deseas enfocar no está directamente debajo del que está actualmente enfocado. Entonces, funciona aquí, pero no funciona aquí. Entonces, ¿cómo le digo a tvOS lo contrario? Se lo digo estableciendo la propiedad next focus down. Esto funciona en base a refs. Así que tendré que crear una ref, llamándola button.ref. Establezcámoslo en null para que TypeScript no se queje. Y establezcámoslo en el botón. Entonces, justo aquí, ref es igual a button.ref.

Y podrías pensar que todo lo que necesito hacer aquí es simplemente decir next focus down button.ref, lo cual tendría sentido, pero no funciona porque realmente quiere un número y no una ref. Entonces, para obtener un número de una ref, necesitas usar la función findNodeHandle de React Native. FindNodeHandle. Aquí vamos. Entonces, toma, por supuesto, un valor actual de alguna ref, y en realidad no me deja establecer así porque no puede ser null, pero puede ser undefined. Entonces, puedo simplemente decir esto. Entonces, ahora si guardo y cargo y presiono aquí abajo, todo funciona. No importa dónde esté.

Asegúrese de tener la última versión de React Native tvOS porque había un error para tvOS relacionado con next focus down o next focus anything solo en tvOS, pero se solucionó en la última versión. Hemos visto esto para React Native tvOS, pero si estás en React Native web en su lugar, no hay gestión de enfoque nativa porque es solo una página HTML. En ese caso, deberás agregar tu propia biblioteca de navegación espacial, como Norwegian Spatial Navigation, que estamos usando. Solía llamarse React Spatial Navigation.

Recientemente fue renombrada porque la reescribieron para usar hooks en lugar de componentes de alto orden. Esta biblioteca se basa en una clave de enfoque única, que es una cadena, que es mejor que una ref, creo, aunque tendrás que lidiar con refs, pero ya veremos eso. Y puedes pasar estas IDs de enfoque únicas a las claves de enfoque de esta función de establecimiento de enfoque, que también es proporcionada por la biblioteca.

Y esa función de establecimiento de enfoque te permite establecer imperativamente el enfoque en un componente específico, lo cual es agradable. Aún puedes definir tus propias props de enfoque siguiente porque esas son específicas de React Native tvOS, pero puedes crear las tuyas propias, como enfoque siguiente hacia abajo en web, por ejemplo, usando la función onArrowPressed, que es proporcionada por la biblioteca. Así que vamos a verlo.

Así que tengo otra rama aquí que quiero revisar en la que instalé React Native Web. Tengo una configuración de webpack. Si ejecuto yarn web, esto va a iniciar un servidor de desarrollo de webpack. Tengo una configuración regular para TypeScript. Y si veo localhost:8080, ahora debería estar funcionando. El enfoque funciona si presiono cosas como lo estoy haciendo ahora. Pero si presiono las teclas de flecha, no hace nada, como puedes ver, porque no hay navegación espacial.

Aquí agregué la navegación espacial noruega. Hice la configuración. Hay esta función init. Puedes pasarle algunos valores que no lo hice. Necesitas envolver tu aplicación alrededor de este proveedor de enfoque. Y esta clave de enfoque que mencioné antes es pasada por el gancho useFocusable. Este es el gancho número uno que quieres usar de esta biblioteca. Lo usarás en todas partes. También te estaba diciendo antes que aún tendrás que lidiar con refs. ¿Y por qué? Porque estos ganchos useFocusable realmente devolverán una ref que necesitas establecer en cada componente que pueda ser enfocado por la biblioteca. Entonces, dado que necesitas usar una ref para cada componente, estos deben ser extraídos a un componente diferente, lo cual hice en este componente doc. Como puedes ver, es exactamente lo mismo. Entonces, algo que harás más de una vez, al menos, mientras desarrollas aplicaciones de TV, es crear diferentes variantes de componentes, dependiendo de si estás en web o no. Para hacer esto, lo haces como lo haces para iOS y Android. Estoy copiando y pegando esta clase y renombrándola como doc.web.tsx. Esto será cargado solo por Webpack y no por el empaquetador regular de React Native metro.

Así como esto. Y agreguemos todos los atributos faltantes. Entonces, la imagen es doc.image y su enfoque no siempre es falso, sino focusedId igual a docId. Entonces, lo que queremos hacer cuando estamos en la versión web es dejar que la Navegación Espacial se encargue del enfoque. Este atributo se ignorará. Incluso si estará en la interfaz, no lo usaremos aquí.

Queremos tener la prop focused, que es devuelta por el gancho useFocusable. Y te estaba diciendo que esto se basa en refs porque devuelve algunas refs que necesitas establecer en tu componente que puede tener enfoque. Eso es todo lo que necesitas hacer. Aquí dijimos que estamos usando focused. Y otra cosa que debemos hacer aquí es sincronizar el estado de la interfaz de usuario con el estado de React Spatial Navigation o una Navegación Espacial de origen. Para hacerlo, hay esta función focusSelf que debes llamar cuando tu componente tiene enfoque. Esto mantiene ambos en sincronía.

Todavía hay una cosa que no hemos hecho aquí, que es lidiar con hasToBePreferredFocus porque también es una prop específica de React Native tvOS. Así que hagamos un useEffect porque esto solo se afecta en el montaje. Entonces, si está enfocado, si debe tener enfoque, llama a focusSelf. Eso es todo lo que hay que hacer. Y finalmente, otra cosa que podemos hacer es decidir el ID que se utiliza para nuestra clave de enfoque. Y para hacerlo, puedes establecerlo como un parámetro del gancho useFocusable. Entonces puedes decir focusKey. Y si tienes IDs, te sugiero que los uses porque facilita la depuración. Por supuesto, necesitas definirlo. No está ordenado alfabéticamente, pero sí, lo que sea. Y esto es ID. Y necesito pasarlo. Pero ahora algo que también sucede mucho cuando tienes diferentes variantes es que necesitas actualizar la definición de tipo en todas partes para que TypeScript lo entienda. Por lo general, puedes extraer eso a un archivo común. Eso es solo para los tipos. Eso es lo que suelo hacer. Eso es todo.

Y, por supuesto, ahora, dado que esto no es nativo, tenemos que decirle, oye, este es el componente que tiene el enfoque de forma predeterminada. Entonces, el primer perro tendrá el enfoque de forma predeterminada. Así que guardemos todo. Veamos cuando se recargue. Y ahora todo funciona. Muy bien.

Entonces, ahora el botón no funciona porque, nuevamente, esto no se ha extraído a un componente y no tiene el gancho. Entonces, para hacerlo, necesitamos extraerlo. Tengo lo mismo que te mostré para los perros, para un botón, y eso es todo lo que hace. Tiene su propio useFocusable y ref.

Así que te hablé de una función setFocus, y eso también es devuelto por este gancho useFocusable. Podemos, por ejemplo, establecer el enfoque de forma imperativa cuando presionas ese botón. Digamos que lo que queremos hacer es, al presionar, establecer el enfoque en el tercer perro, tal vez. Digamos solo para mostrar algo. Así que digamos setFocus dog2. Y necesitamos agregarlo. Aquí vamos. Y ahora onPress hará eso. onPress. Guardando todo de nuevo. Aquí vamos. Estoy usando las teclas de flecha. Y si presiono el botón, puedes ver que el enfoque va al tercer perro como queremos.

Entonces, consideraciones finales. Las TVs son muy poco potentes en general. Sus CPUs son más pequeñas y más lentas que los últimos y mejores teléfonos móviles. Y eso también se debe a que se reemplazan con menos frecuencia que los teléfonos, gracias a Dios, porque son dispositivos grandes. Pero por lo general, las personas no cambian su TV cada dos años como lo hacen con los teléfonos. Entonces, si estás viendo una TV del 2017, eso no es realmente antiguo. Y una TV de alta gama del 2017 podría tener una CPU de 1 GHz y Chromium 38, que en realidad es del 2014.

Y en algunos casos no se reemplazan nunca. Por lo tanto, deberás usar mucho Babel, agregar muchos polyfills, por lo que se volverá más lento. Así que sacando cosas del pasado, como una TV del 2017, como un Meme del 2005. Por lo tanto, tendrás que optimizar mucho.

Así que recuerda usar useMemo, useCallback y measurePerformance. ¿Por qué digo esto? Porque últimamente ha habido una tendencia en contra de useMemo y useCallback, diciendo que es una optimización prematura. Creo que es todo lo contrario, al menos para el desarrollo de aplicaciones de TV, porque no sabes si realmente requieren mucha CPU para usar useMemo y useCallback. Pero definitivamente sabes que si olvidas usarlos, y no tienes integridad referencial, es decir, si las funciones siguen cambiando y siguen provocando renderizados todo el tiempo, esto afectará mucho el rendimiento.

Un truco que puedes aplicar específicamente en aplicaciones de TV es volver a renderizar solo un componente cuando cambia el enfoque. ¿Qué quiero decir con esto? Entonces, los componentes de aplicaciones de TV son bastante complejos y tienen muchas props y valores que les pasas. Pero generalmente, solo quieres volver a renderizarlos cuando son el componente que está actualmente enfocado o el que solía estar enfocado. Entonces, tal vez tengas un marco como el que tenía en mi aplicación de demostración, y quieres moverlo. Solo necesito volver a renderizar esos dos. ¿Cómo lo hago? Puedo usar el segundo argumento de React memos, que no es un secreto, pero no muchos lo conocen. Aunque esta es exactamente la misma funcionalidad que proporciona shouldComponentUpdate en los antiguos componentes de clase del ciclo de vida. Está invertido. Entonces, en lugar de ser shouldComponentUpdate, es más bien shouldComponentStayTheSame. Por lo tanto, estás verificando las props anteriores y las props siguientes. Y si el enfoque no cambió, no quieres volver a renderizar.

Desearía tener más tiempo para profundizar y explicar todos estos trucos. Pero desafortunadamente, sí, mis 20 minutos han terminado. Así que muchas gracias por ver. JustWatch está contratando, así que por favor contáctame en Twitter o en cualquiera de mis contactos, que están publicados en el sitio web de React Summit. Y muchas gracias.