Construyamos una Navegación Espacial para TV

Rate this content
Bookmark

En esta charla, te llevaré a través de mi viaje cuando me uní al equipo que apoya nuestra aplicación de Smart TVs y compartiré mi experiencia aprendiendo una de las funcionalidades más esenciales pero pasadas por alto que tenemos.

This talk has been presented at React Advanced Conference 2023, check out the latest edition of this React Conference.

FAQ

Sergio Avalos es un ingeniero de software en Spotify que trabaja en el equipo del cliente de Spotify que se ejecuta en smart TVs.

La navegación espacial describe la interacción del usuario con el control remoto de la TV, utilizando las teclas direccionales para seleccionar y navegar entre aplicaciones.

Es necesario debido a que las smart TVs operan con diferentes sistemas operativos y para facilitar la interoperabilidad y reducir los costos de mantenimiento, se utiliza una única aplicación web cargada en todas las aplicaciones nativas, lo que requiere una biblioteca específica para gestionar la navegación.

Sí, existen proyectos de código abierto como el proporcionado por Medios Noruegos en 2019, aunque no estaba disponible cuando se desarrolló la aplicación de Spotify más antigua.

Se implementa identificando cada elemento interactivo con un ID y definiendo las direcciones de navegación entre estos elementos, aunque este método puede resultar en errores y es difícil de manejar en vistas dinámicas.

Se utilizó React junto con la biblioteca React Router DOM para gestionar las rutas y navegación dentro de la aplicación de demostración.

Los desafíos incluyen el manejo de vistas dinámicas, la propensión a errores humanos al asignar IDs manualmente y la necesidad de agregar información extra que no está relacionada directamente con la funcionalidad principal de la aplicación.

Sergio Avalos
Sergio Avalos
18 min
23 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute los desafíos de implementar la navegación espacial para los controles de TV y la necesidad de una biblioteca. El enfoque a la navegación espacial puede ser mejorado desarrollando lógica extra para conectar el control de TV con la aplicación. La aplicación de demostración muestra el uso de una clase NavigationEngine y la función de gancho useFocusRef. La lógica de integración implica seleccionar el siguiente nodo basado en las pulsaciones de teclas y las coordenadas de los nodos. La charla también destaca los desafíos de los arreglos complejos y las navegaciones circulares en el desarrollo de aplicaciones para Smart TVs.

1. Introducción a la Navegación Espacial

Short description:

Bienvenidos a la charla sobre Navegación Espacial. Discutiremos los desafíos de implementar la navegación espacial para los controles de TV y por qué se necesita una biblioteca. El mercado de las smart TVs tiene múltiples marcas con sus propios sistemas operativos, lo que hace necesario tener aplicaciones nativas para cada una. Sin embargo, para simplificar el mantenimiento, construimos una aplicación web para la interfaz de usuario. Lamentablemente, este enfoque resultó en la pérdida del soporte nativo de la plataforma para la navegación espacial. Aunque hay una propuesta para proporcionar esta funcionalidad en los navegadores, todavía está en proceso.

Bienvenidos a todos. Muchas gracias por unirse a esta charla. Mi nombre es Sergio Avalos, y vamos a hablar sobre Navegación Espacial. Pero más que hablar, vamos a construir. Soy ingeniero de software en Spotify y hace aproximadamente un año me uní al equipo que trabaja en el cliente de Spotify que se ejecuta en tu smart TV. Eso significa que en esta charla, no vamos a hablar sobre móviles, tampoco vamos a hablar sobre escritorio. Y lo más importante, no vamos a hablar sobre el ratón. En cambio, vamos a hablar sobre el control de la TV, ese dispositivo que apuesto a que todos ustedes tienen en sus salas de estar. La navegación espacial no es más que un nombre elegante para describir lo que haces con el control de la TV cuando presionas las teclas direccionales, las teclas de flecha para seleccionar una aplicación o simplemente navegar a una de ellas. Eso me intrigó mucho cuando me uní al equipo reciente en el que estoy trabajando porque no sabía que, quiero decir, me sorprendió que uno tuviera que crear una biblioteca para eso. Así que decidí profundizar en el código y me fascinó. No porque el código fuera increíble, quiero decir, estaba bien, el código, pero lo más importante es que sentí que era un problema muy interesante de resolver. Así que de eso se trata esta charla. Quiero compartir con ustedes mi aprendizaje de cómo aprendí sobre esta biblioteca y qué mejor manera de aprender que simplemente construyéndola nosotros mismos. Pero en caso de que te lo preguntes, porque esa fue mi primera impresión, ¿por qué necesitamos construir una biblioteca para la navegación espacial? Quiero decir, ¿no es una gran utilidad que debería ser proporcionada por las plataformas? Y la respuesta es sí, totalmente. Si estás construyendo una aplicación nativa. Déjame intentar explicar. El mercado de las smart TVs es bastante cemento, hay muchas marcas y cada una de ellas ejecuta su propio sistema operativo. Eso significa que necesitas tener tu aplicación nativa funcionando para cada una de ellas. Pero, sólo para hacer nuestras vidas más fáciles y reducir los costos de mantenimiento, decidimos construir una interfaz de usuario utilizando una aplicación web que puede ser cargada en cada una de las aplicaciones nativas. Eso nos dio una gran interoperabilidad para enviar el mismo código a todas estas aplicaciones nativas. Pero, vino con el costo de perder el soporte de la plataforma nativa. En ese caso, es obviamente la navegación espacial. Entonces, estaba pensando, okay, okay. Pero, estamos en el año 2023. ¿No debería ser proporcionado por el navegador? Quiero decir, el navegador, hoy en día, es un software muy sofisticado. Y, la respuesta es aún no. Es un trabajo en progreso. Hay una propuesta. Todavía es un borrador para construir esta funcionalidad,

2. Mejorando el Enfoque de la Navegación Espacial

Short description:

Necesitamos seguir esperando. ¿Existen proyectos de código abierto que podríamos usar? Los medios noruegos lanzaron uno en 2019, pero nuestra aplicación es más antigua. Comencemos a construirlo. Envuelve cada elemento de navegación con un ID y diles a dónde ir. Este enfoque tiene inconvenientes: es difícil con vistas dinámicas, propenso a errores y agrega información extra. Mejoremos este enfoque desarrollando la lógica adicional para conectar el control de la TV con nuestra aplicación.

pero aún no está. Necesitamos seguir esperando. Entonces, estaba pensando, vale, vale. Pero, ¿existen proyectos de open-source que podríamos usar? Y, de hecho, hay uno. Muchas gracias, Medios Noruegos, por proporcionar esto. Desafortunadamente, lo lanzaron en, no, desafortunadamente, pero lo lanzaron en 2019, y nuestra aplicación es un poco más antigua que eso. Así que, no teníamos ninguno en ese entonces. Bien. Habiendo respondido a esa pregunta, comencemos. Comencemos a construirlo. Si te pregunto así, de la nada, como tu intuición, ¿cómo lo harías? No sé ustedes, pero para mí, fue, quiero decir, lo más simple que pude imaginar, y creo que lo leí en un blog de Medios Noruegos, e incluso de Netflix. Es básicamente, solo envuelves cada uno de lo que llamo elementos de navegación como el elemento con el que el usuario puede interactuar, con solo un ID, solo identifícalos, y luego les dices a dónde ir. Tomemos por ejemplo, la barra lateral de nuestra aplicación, la aplicación Spotify. Cada uno de estos elementos es solo un enlace para la vista de inicio, la búsqueda, y así sucesivamente, y como expliqué antes, los envuelves con un ID, y en ese envoltorio, les dices a dónde ir, así que si vas a la, si estás en la búsqueda y vas a la aplicación, entonces les dices, ve a este ID que es el inicio. Ese enfoque realmente hace el trabajo, pero obviamente tiene algunas advertencias como puedes, imagino, anticipar. Uno es que es difícil trabajar con vistas dinámicas. Piensa por ejemplo, recomendaciones, el desarrollador no sabe lo que van a obtener. Además, es propenso a errores, porque es el papel del desarrollador agregar este ID manualmente, así que los errores pueden ocurrir. Somos humanos. Y finalmente, solo agrega información extra que no está relacionada con la aplicación, como dije, esto es solo una utilidad que debería ser invisible para la capa de la aplicación. Así que mejoremos este enfoque. Para esta presentación, construí una aplicación muy pequeña que básicamente solo tiene dos vistas. Es una bienvenida. Haz clic en este. Luego vas a otra vista que te muestra solo una sorpresa por lo que sea. Y luego tienes el enlace para volver. Y luego vuelves a SMBN. Funciona perfectamente bien con el ratón, pero no funciona con el control de la TV. Así que esto es exactamente lo que vamos a hacer. Vamos a desarrollar la lógica adicional

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Workshops on related topic

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
JSNation 2023JSNation 2023
57 min
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.