Construyamos una Navegación Espacial para TV

Bienvenidos a todos, muchas gracias por unirse a esta sesión. Hoy vamos a hablar sobre la navegación espacial. Pero en lugar de hablar, vamos a construir la nuestra. Mi nombre es Sergio Abalos. Soy esposo, padre y dueño de un pequeño perro salchicha. Y cuando no estoy corriendo detrás de ninguno de ellos, también trabajo como desarrollador front-end en Spotify, donde formo parte del equipo que está construyendo el cliente de Spotify que puede funcionar en tu Smart TV. Esa es la razón por la que, aunque esta es una conferencia de React, no estaremos hablando sobre móviles, no, no estaremos hablando sobre escritorio o portátiles y especialmente no estaremos hablando sobre tu ratón. En cambio, vamos a hablar sobre el control de la TV, ese pequeño dispositivo aburrido que estoy seguro que todos ustedes tienen en sus salas de estar. Así que en caso de que te lo estuvieras preguntando, la navegación especial se refiere, como dice la definición aquí, a una modalidad de entrada del usuario que permite la navegación sin ratón por la página. Básicamente lo que esto significa es como la acción que haces con las teclas direccionales, arriba, abajo, izquierda y derecha de tu control de TV es lo que haces, como seleccionar una aplicación y seleccionar cualquier elemento o simplemente ejecutar cualquier acción. Así que la razón por la que elegí este tema es porque, como la mayoría de ustedes en la audiencia, apuesto a que han estado trabajando en móviles o escritorios. Lo mismo me pasó a mí hasta que llegué a desarrollar una aplicación para Smart TVs y quería traer esos temas que sentí que eran únicos para, obviamente para mí, pero la mayoría de ustedes que han estado trabajando en otras plataformas y no necesité buscar muy lejos. Vi que Spotify desarrolla internamente una biblioteca para manejar este caso específico, así que decidí echarle un vistazo, por pura curiosidad y me fascinó, no porque el código fuera wow, no, el código estaba bien, pero sentí que era un problema muy interesante de resolver, así que de eso se trata esta charla, quiero compartir con ustedes lo que aprendí y cómo empecé a profundizar en el código y, como dije, en lugar de simplemente hablar de ello, vamos a construir la nuestra. Disculpen porque no tengo mucha experiencia, no voy a hacer ninguna codificación en vivo, pero les voy a mostrar paso a paso cómo pueden construir su propia biblioteca, pero antes de todo, creo que es muy importante preguntarnos por qué necesitamos construir nuestra biblioteca, ¿estamos utilizando el tiempo de manera eficiente porque si estamos hablando de construir una aplicación en una Smart TV, ¿no debería la navegación especial ser proporcionada por la plataforma de la TV? Y la respuesta es que sí, lo es si estamos construyendo una aplicación completamente nativa. Así que déjenme tratar de explicar en el mercado de las Smart TVs, hay tantas marcas que está realmente bastante segmentado y cada uno de estos jugadores tiene su propio sistema operativo. Así que para ellos, uno tiene que ser viejo y aplicaciones nativas para que puedas instalar usando su propia tienda de aplicaciones. Así que no puedes evitar esto, pero para hacer nuestra vida mucho más fácil, decidimos usar una aplicación híbrida donde solo la interfaz de usuario se hace usando una aplicación web. Eso nos dio una increíble interoperabilidad porque podemos usar el mismo código fuente, el mismo proyecto para funcionar en todas estas plataformas. Pero por supuesto, vino a un costo. Y en este caso, perdimos el soporte para algunas de las características que la plataforma proporciona como la navegación espacial. Después de esto, estaba pensando como, okay, okay, es 2023. Hoy en día, los navegadores web son un software muy sofisticado. ¿No es la navegación espacial ya soportada por los navegadores web? Aún no. Es un trabajo en progreso. Hay un borrador para proponer esta nueva API desde 2019. Pero de nuevo, este mercado es muy nuevo. Creo que las aplicaciones de Smart TV's empezaron a salir en 2017. Así que, se siente como ayer. Así que, es comprensible que los navegadores estén poniéndose al día. Porque apuesto a que no todos los jugadores ahí fuera están usando este modo híbrido como lo estamos haciendo nosotros.

Entonces pensé, está bien, está bien, pero no somos la única empresa que construye una aplicación de Smart TV. Debe haber un proyecto de código abierto. Así que busqué y sí, en realidad hay uno. Y medios noruegos, muchas gracias por contribuir a eso. Desafortunadamente no teníamos su biblioteca en el momento en que comenzamos a construir nuestras propias aplicaciones. Así que esa es la razón por la que no pudimos usar la suya. Pero recomiendo totalmente usar esa.

Entonces, habiendo respondido esa pregunta, no estamos perdiendo nuestro tiempo, comencemos. Si te pregunto de la nada, tu intuición, ¿qué construirías? Hago esta pregunta porque esto es lo primero que tenía en mente cuando supe que había una biblioteca para resolver la navegación espacial. E incluso leí que el mismo enfoque fue utilizado por otras empresas en su blog. Quiero decir, ellos mismos lo pusieron. Es algo similar a esto. Imagina que tienes, por ejemplo, en el cliente de Spotify, el menú lateral donde tienes los diferentes elementos de él. Si quitas todas las imágenes y estilos, entonces obtienes el esqueleto con los enlaces a inicio, búsqueda, tu biblioteca y así sucesivamente. Y bueno, si estás usando una aplicación web, será un enlace a cada una de estas vistas. Así que nuestra intención era como simplemente envolver todos esos elementos que llamamos notas de navegación. Es decir, esos elementos con los que el usuario puede interactuar con el control de la TV y simplemente poner un identificador para identificar cada uno de los otros y decirles a dónde deben ir si suben y bajan y así sucesivamente. Así que este es un enfoque muy ingenuo. Esto realmente hace el trabajo. No hay problema con eso. Pero por supuesto, hay algunas pequeñas advertencias. Y la primera es que es muy difícil trabajar con vistas dinámicas. Y hoy en día, casi todas las aplicaciones ofrecen algún tipo de personalización de recomendaciones. Así que si estás construyendo la interfaz de usuario, lo más probable es que no sepas lo que vas a obtener. Y lo siguiente es que es propenso a errores porque, como desarrollador, necesitas poner los identificadores únicos. Somos humanos. Cometemos errores. Eso es común. Y finalmente, es solo que hay mucha información que tiene que ver con la navegación, el algoritmo para la navegación espacial, pero no tiene nada que ver con el diseño o la vista. Así que simplemente

Luego escuchamos los controles de la TV que vienen... Lo siento, a los eventos que vienen del control de la TV. Luego encontramos el nodo seleccionado dependiendo de dónde está la selección actual y dónde quieres ir, dependiendo de la tecla que estaba presionando. Y finalmente, solo actualizamos el estado para indicar cuál es el elemento que debería ser seleccionado ahora.

Si miras el diagrama desde el paso uno al tres, esta es la forma en que decidimos construir. Tendremos una clase de motor de navegación que tiene dos métodos. Uno para registrar todos esos nodos de navegación, y otro que manejará la navegación que estará escuchando las teclas eventos de bajada que vienen del control de la TV. Genial. Así que empecemos con el primer paso, los nodos de navegación. Aquí tenemos un esquema para el nodo de navegación que solo tendrá un identificador y una referencia al elemento HTML que se renderiza. Luego creamos la clase que tendrá una variable privada, un array de estos nodos de navegación y métodos para añadir valores, y otro método para eliminar los valores. Y luego vamos al script de índice donde creamos una instancia de esta clase NavigationEngine. Luego, solo para fines de depuración, lo añadimos a el ámbito global. Verás cómo lo usamos en cada uno de los pasos cuando estamos testing. Y finalmente, proporcionamos un proveedor de contexto de esta instancia, para que esté disponible a través de toda la aplicación usando un proveedor de contexto. Genial. Luego volvemos a la caja de preguntas y el enlace de navegación donde esta va a ser la API externa que usamos. Y es algo muy simple comparado con lo que estábamos usando antes cuando mencioné el enfoque ingenuo. Tenemos una función de gancho que devuelve solo dos valores. El primero es una devolución de llamada para saber qué elemento estamos renderizando, como qué elemento HTML. Y el segundo es solo un valor booleano que te dice si ese elemento que estás renderizando está enfocado o no. Eso es tan simple como eso. Genial. Así que, desarrollamos esta función de gancho llamada useFocusRef que, como mencioné, tiene una función de devolución de llamada donde tenemos un valor de referencia y también creamos el valor de devolución de llamada que será ejecutado por el elemento HTML solo para apuntar una referencia a este elemento. Luego creamos un identificador único. Obtenemos una navegación, lo siento, una instancia del motor de navegación y, con la ayuda de la función de gancho useEffect, cada vez que este componente se renderiza llamamos al método registerNode y cuando se desmonta llamamos al método unregisterNode solo para asegurarnos de que no hay fugas de memoria. Por ahora, vamos a dejar el valor isFocused como falso, pero en el último paso vamos a volver y poner el valor real, pero no te preocupes por eso ahora. Genial, así que volvemos a nuestra aplicación y luego vamos a hacer rápidamente una prueba. Si consigno el motor de navegación podemos ver que efectivamente tenemos diez elementos, y puedes ver que estoy apuntando a la referencia del primer elemento HTML, y así sucesivamente. Si hago clic en cualquiera de ellos, entonces

Imagina que estamos en la aplicación de demostración y tenemos esta nota donde quieres distinguir aquellos que pertenecen a la navegación circular y el resto que no. Si miras este ejemplo, entonces te das cuenta de que ya no podemos usar la lista que tenemos porque necesitas distinguir cuál pertenece a esta lista. Así que en lugar de una lista terminamos usando un árbol de navegación y esto es lo que creo que es fascinante porque ya no es solo sobre las coordenadas de la dimensión, también es sobre la relación entre uno y otro. Así que vamos a construir esto. Estos son los pasos que podemos hacer para la navegación circular y de nuevo podemos usar muchos pasos pero estos son los que decidimos proponer. Primero creamos un contenedor de navegación solo para marcar qué región pertenece a la navegación circular y cuál no. Luego construimos un árbol de navegación y finalmente actualizamos el algoritmo de selección de nodos. Comencemos con el primer paso. Así que recuerdas esta vista que te estoy mostrando. Este es el código Muy similar a esta página de bienvenida que mostré antes. En lugar de tener un array de 10 elementos vacíos usaremos 5. Lo usaremos solo para renderizar dos veces, pero para la segunda vamos a envolverlo en el contenedor de navegación solo para distinguir la región donde queremos aplicar este nuevo atributo. Luego creamos un nuevo componente React llamado el contenedor de navegación donde llamamos a esta función de gancho llamada useRegisterNavigationalContainer y esta función es muy similar a la que estábamos usando para registrar el nodo normal de navegación. La única diferencia es que primero no tenemos ninguna referencia al elemento HTML porque no estamos renderizando nada y segundo tenemos un nuevo atributo, el nuevo parámetro para los atributos de este contenedor de navegación. Así es como se ve, lo cual creo que es más claro si te muestro el esquema. Tenemos un nuevo tipo llamado contenedor de navegación que tiene un nuevo atributo, un nuevo atributo llamado atributo donde solo por ahora puede ser tendrá la propiedad ciclo que describe si el ciclo es vertical o horizontal y como estamos usando TypeScript no necesitamos actualizar el método en el motor de navegación para que pueda recibir ambos tipos. Bien, entonces vamos y comprobamos si el contenedor de navegación se renderiza correctamente. Si voy al motor de navegación y traigo el valor del nodo verás que tenemos los 10 elementos pero hay uno aquí que no tiene ningún elemento HTML comparado con este y este tiene la propiedad ciclo por lo que se está registrando correctamente. Si vuelvo entonces solo tenemos los 11 elementos como de costumbre el último elemento es solo el enlace para ir a esta página. genial vamos al paso número dos construir un árbol de navegación. Para construir la relación o como invertir en el árbol de navegación lo único que vamos a hacer es que vamos a añadir un parámetro llamado ID del ancestro que apunta a el padre. Francamente es un enfoque diferente al que elegimos internamente, depende, quiero decir, este es el enfoque que decidió usar la media noruega en Spotify decidimos en cambio mantener un array de los hijos. Creo que no hay mucha diferencia entre ellos pero decidí elegir este método porque es más fácil de demostrar que tener el array de hijos pero puedes ir con lo que sea. bien, ahora creamos un proveedor de contexto donde definimos cuál es el ID del ancestro de los elementos que vamos a estar renderizando déjame tratar de explicar. si vamos a la aplicación de índice lo siento en el índice script entonces tendremos el proveedor de contexto envolviendo toda la aplicación donde por defecto el ID del ancestro va a ser la raíz es que es por defecto pero en el contenedor de navegación vamos a actualizar el valor del ID del ancestro con el ID único que obtenemos cuando estábamos registrando en este contenedor de navegación por lo que significa que cualquier hijo que se renderice dentro de este contenedor de navegación tendrá como ID del ancestro este nuevo ID. así que ahora vamos y probamos si comprueban si el árbol de navegación se renderiza correctamente si miro las notas entonces puedes ver que por defecto todos los nodos de navegación tienen como padre lo siento el ancestro el ID de la raíz si voy al nivel superior entonces esto va a ser diferente porque algunos de ellos tienen la raíz pero estos restos tienen el nuevo contenedor de navegación que puedes ver que es el mismo de este termina con uab uab genial impresionante podemos ir al último paso del nodo algoritmo para este tenemos tres casos diferentes primero cuando estás navegando a otro nodo que está dentro de la misma rama por lo que es algo que ya hemos cubierto pero luego también tenemos cuando donde cuando el cursor es moviéndose fuera de esa rama y finalmente cuando viste a alguien fuera de la rama pero a un elemento faltante para el primer caso donde ya estamos haciendo eso por lo que simplemente elegimos el nodo más cercano pero en el segundo caso necesitamos comprobar si el nodo ancestral tiene este modo de ciclo y si ese es el caso y luego también comprobamos si coincide con la tecla direccional es decir que si estás en el vertical solo te importa el arriba y abajo y si estás en el horizontal y solo te importa el izquierdo y el derecho si ese es el caso entonces encontraremos el nodo de ciclo y si no entonces simplemente elegimos el nodo más cercano como lo hicimos antes muy similar con el tercer caso el único patrón común es que necesitamos encontrar el nodo de ciclo cómo lo hacemos volvamos a la anterior matriz que teníamos antes el fuego y 5 por 5 e imagina que estás sentado este que estás que el cursor está seleccionado ahora en el último nota correcta vamos a imaginar que tenemos que el cursor está todo el camino a la izquierda como si tuviéramos un margen izquierdo que estamos seleccionando y desde allí seleccionamos el más cercano que va a estar en el otro lado así que con eso en mente vamos a la vamos a implementarlo por código y vamos al motor de navegación y todo lo que escribimos antes en vivo para en el manejo navegación lo movemos a un nuevo método privado llamado find next target node so I quiero decir solo para tener el caso por defecto donde simplemente tomamos el nodo más cercano y luego comprobamos si el nodo donde sea que estemos navegando pertenece a la misma rama si no entonces comprobamos si quiero decir la navegación debería ser circular y si ese es el caso son muy similares a los que hicimos antes vamos a encontrar el elemento en esa dirección y vamos a usar los valores codificados pero estos valores son los que estamos imaginando como si estás bajando entonces podrías terminar estás seleccionando todo el top el top mi margen de la viewport y lo mismo si estás subiendo lo siento si estás subiendo lo seleccionas abajo si estás bajando entonces lo seleccionas lo siento solo para quedarme en mi cabeza un poco bien así es como encuentras la navegación circular no importa si importa si no debería ser circular entonces haces lo mismo que antes y oh lo siento y luego simplemente seleccionas el nodo objetivo me adelanté un poco lo siento por eso y ven donde puede venir y testing así que estamos en el caso normal puedes ver que no hay navegación circular ni aquí pero si vamos a esta página y vamos a la navegación circular está haciendo como debería mmm eso es bastante mucho para mí pero confía en mí esto es solo el principio porque solo se pone más complicado desde aquí quiero decir obviamente tu aplicación sabes que no va a parecerse a una matriz perfecta tendrá como columnas filas y así sucesivamente así que literalmente vas a estar lidiando con H casos ¿qué pasa con esos inconvenientes y molestos modelos más que te dicen como hey deberías comprar premium y yo creo que deberías entonces espera eso es un caso interesante porque la navegación y sabes que todavía lo tienes en el fondo quiero decir que todavía están allí pero ¿quieres centrar toda la atención del usuario solo en esos elementos que están dentro de la ventana del modelo? así que ese es otro caso que tienes que soportar en el contenedor de navegación y finalmente performance no hemos hablado de esto uno en absoluto y este es uno de los más cruciales porque si quieres ejecutar esto aplicación más solo tienes 10 milisegundos y 10 milisegundos por frame quiero decir que la biblioteca de navegación no puede tardar tanto así que tienes que hacerlo lo más pequeño posible para no crear mucho sobrecarga para el resto de la aplicación pero eso es para otra vez hecho de todos modos si te sientes curioso acerca de estos el código que te mostré o cualquier cosa que hayamos hecho y lo dejé aquí el enlace al Red Bull que puedes ir y comprobarlo y jugar y también escribí ese post en nuestro blog de ingeniería donde puedes encontrar en detalle todo lo que hemos hecho aquí sin embargo te sientes inspirado y si quieres empezar a crear tu propia aplicación de TV inteligente no tienes que hacer esto por scratch por scratch como dije la Media Noruega ha proporcionado esto utilidad para que puedas ir y usarla y finalmente si te sientes desafiado y tú sientes que lo compliqué demasiado ponte en contacto mi objetivo personal es solo crear una community donde podamos ayudarnos mutuamente así que si estás corriendo en el mismos casos y nosotros quiero decir ponte en contacto y podemos continuar una conversación podemos crear esta community y ayudarnos mutuamente pero eso es todo por ahora gracias muchas gracias espero oír de ti pronto