Viaje al desconocido: Mi aventura desentrañando los misterios del universo TVUI de Netflix

Rate this content
Bookmark

En Netflix, millones de nuestros usuarios ven Netflix en dispositivos de TV. ¿Cómo desarrollamos la interfaz de usuario para todos los diferentes tipos de dispositivos? ¡Eso es exactamente lo que quería saber! Compartiré por qué es importante asumir nuevas oportunidades de crecimiento, cómo navegar por las dificultades de aprender una plataforma completamente nueva en una nueva empresa y algunas de las cosas que he aprendido sobre cómo usamos React para llevar Netflix a tu TV!

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

FAQ

La entrevista fue el 21 de octubre de 2021.

En la interfaz de usuario de TV de Netflix se utiliza principalmente React.

El desarrollo de UI para TV debe considerar la menor cantidad de memoria de los dispositivos, la diversidad de dispositivos y la prioridad en el rendimiento. Además, la navegación se realiza principalmente con controles remotos, lo que afecta la experiencia de usuario.

TVUI Explorer es una herramienta interna de Netflix utilizada para explorar componentes de la biblioteca de diseño y construir iterativamente pantallas de TVUI, facilitando la simulación de datos y la revisión visual rápida.

El proceso de prueba en TVUI incluye la comparación de capturas de pantalla, pruebas unitarias/integración de la biblioteca React y pruebas de extremo a extremo, con un enfoque en evitar pruebas de extremo a extremo extensivas debido a su lentitud y inestabilidad potencial.

El aprendizaje continuo es crucial para el crecimiento profesional de un desarrollador, permitiendo adaptarse a nuevas tecnologías y desafíos, y mejorando la capacidad de contribuir de manera efectiva en diferentes roles y proyectos.

Kaleb McKelvey
Kaleb McKelvey
30 min
13 Nov, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla explora el viaje de un desarrollador de software en desentrañar los misterios de la interfaz de usuario de TV de Netflix. Enfatiza la importancia del aprendizaje continuo en el desarrollo de la interfaz de usuario de TV y discute el uso de React y el proceso de registro de TV. La charla también destaca la importancia de los widgets, la navegación y la aplicación TVUI Explorer en la construcción de la interfaz de usuario de TV. Se adentra en el proceso de desarrollo de TVUI, las capas de prueba y el valor del aprendizaje continuo y las perspectivas frescas en la industria tecnológica. La charla concluye con ideas sobre oportunidades de trabajo, recursos para el desarrollo de TV y el proceso de contratación de Netflix.

1. Desentrañando los Misterios de la Interfaz de Usuario de Netflix para TV

Short description:

Gracias a todos por acompañarme. Hablaré sobre mi aventura en desentrañar los misterios del universo de la Interfaz de Usuario de Netflix para TV. Hace dos años, durante una entrevista en Netflix, descubrí que el puesto era para la Interfaz de Usuario de TV, sobre la cual no sabía nada. A pesar de mis preocupaciones iniciales, aprendí que el desarrollo de la Interfaz de Usuario de TV utiliza React, con lo cual estoy familiarizado.

Muchas gracias a todos por acompañarme. Sé que mi charla ha cambiado un poco, así que quizás me den algunos aplausos si tienen hambre ahora mismo. Sí, no se preocupen. Yo también. Y sé que soy algo así como el camino intermedio. Así que espero que disfruten de la charla, y que valga la pena esperar el almuerzo antes... Esperar para almorzar.

Quiero... Como dijo Anika, voy a hablarles un poco sobre mi aventura, desentrañando los misterios del universo de la Interfaz de Usuario de Netflix para TV. Así que voy a empezar.

Fue hace unos dos años, el 21 de octubre de 2021. Estaba sentado en mi apartamento en mi silla de computadora. Tenía puesta mi camisa de vestir. Mis zapatos de vestir favoritos. Realmente estableciendo el ambiente para asegurarme de que, aunque estaba en casa, quería estar seguro de que estaba en un estado de ánimo profesional ya que esperaba que fuera mi última entrevista en Netflix. Y así, cuando se unió el gerente de contratación, los primeros 30 minutos de la entrevista iban realmente bien. Estaba hablando de mi experiencia. Cómo podría impactar en Netflix. Aprendiendo sobre el equipo. Super emocionado solo de ser parte de Netflix en el futuro, con suerte. Y fue entonces cuando el gerente de contratación mencionó esta pequeña salvedad.

Que este puesto no era en realidad para web. Sino que era para la Interfaz de Usuario de TV. Y así, mientras intentaba mantener mi cara de póker en la llamada de video, mi estómago empezó a revolverse. Mis pensamientos, ya sabes, empezaron a dar vueltas. ¿Interfaz de Usuario de TV? ¿Qué es la Interfaz de Usuario de TV? No tengo idea de qué es eso. ¿Qué voy a hacer en la Interfaz de Usuario de TV? ¿Y debería potencialmente prepararme para fracasar en una gran empresa tecnológica, aprendiendo algo que nunca había escuchado antes? Así que me obligué durante la entrevista a tomar un respiro profundo. Y empecé a preguntar un poco más sobre ello. Y así, mientras hacía más preguntas, y el gerente de contratación respondía más sobre qué es la Interfaz de Usuario de TV, cómo se veía el desarrollo, empecé a sentirme mucho mejor una vez que supe que en realidad se utiliza React. Eso ya lo he hecho antes.

2. La Importancia del Aprendizaje Continuo en la Interfaz de Usuario de TV

Short description:

Asumí el rol y quiero compartir mi viaje en la Interfaz de Usuario de TV. Inicialmente fue un desafío, pero aprendí que el crecimiento proviene de estirar nuestras habilidades. Hoy, compartiré lo que he aprendido y por qué el aprendizaje continuo es crucial.

Y así, mis pensamientos realmente comenzaron a cambiar mientras hacía estas preguntas, desde todo lo que podría salir mal hasta, oh, esta es una oportunidad increíble para crecer. Y solo una pequeña alerta de spoiler. Acepté el rol. Y así es como puedo compartir un poco sobre mi viaje en la Interfaz de Usuario de TV en los últimos dos años. Y la principal razón por la que cuento esta pequeña historia es que quiero mostrar que el sentimiento inicial para mí fue realmente difícil, aunque era algo completamente nuevo. Y quería demostrar que, al igual que los músculos, nuestras habilidades profesionales también solo crecen cuando las estiramos más allá de nuestros límites habituales. Y así, hoy solo quiero compartir un poco de lo que he aprendido en los últimos dos años de mi viaje en la Interfaz de Usuario de TV y tal vez demostrar por qué es tan importante ser un aprendiz continuo en nuestra career.

QnA

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 2023React Advanced 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 2023React Advanced 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 2022React Advanced 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.
Llevando tu aplicación web a nativa con Capacitor
JSNation 2023JSNation 2023
111 min
Llevando tu aplicación web a nativa con Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
Entonces, tienes una increíble aplicación web que has construido y quieres llevarla de tu navegador web a la App Store. Seguro, hay muchas opciones aquí, pero la mayoría requerirá que mantengas aplicaciones separadas para cada plataforma. Quieres que tu código base sea lo más cercano posible en la Web, Android e iOS. Afortunadamente, con Capacitor, puedes tomar tu aplicación web existente y crear rápidamente aplicaciones nativas para iOS y Android para distribuir en tu App Store favorita.
Contenido: Este masterclass está dirigido a desarrolladores principiantes que tienen una aplicación web existente o están interesados en el desarrollo móvil. Repasaremos:- ¿Qué es Capacitor?- ¿Cómo se compara con otras soluciones multiplataforma?- Usando Capacitor para construir una aplicación nativa utilizando tu código web existente- Organizando nuestra aplicación para su distribución en tiendas de aplicaciones móviles con convenciones de nombres, iconos, pantallas de inicio y más
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.