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!

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
Seamos realistas: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica.En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
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
En esta charla, construiremos nuestro propio Jarvis utilizando Web APIs y langchain. Habrá codificación en vivo.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
Next.js y otros marcos de trabajo que envuelven a React proporcionan un gran poder en la construcción de aplicaciones más grandes. Pero con gran poder viene una gran responsabilidad de rendimiento - y si no prestas atención, es fácil añadir varios segundos de penalización de carga en todas tus páginas. ¡Vaya! Vamos a recorrer un estudio de caso de cómo unas pocas horas de depuración de rendimiento mejoraron tanto los tiempos de carga como los de análisis para la aplicación Centered en varios cientos por ciento cada uno. Aprenderemos no solo por qué ocurren esos problemas de rendimiento, sino cómo diagnosticarlos y solucionarlos. ¡Viva el rendimiento! ⚡️
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Muchas empresas en todo el mundo están considerando adoptar Micro-Frontends para mejorar la agilidad empresarial y la escala, sin embargo, hay muchas incógnitas cuando se trata de cómo se ve en la práctica el camino de migración. En esta charla, discutiré los pasos necesarios para migrar con éxito una aplicación React monolítica a una arquitectura de frontend más modular y desacoplada.
Edición de video en el navegador
React Summit 2023React Summit 2023
24 min
Edición de video en el navegador
Top Content
La edición de video es un mercado en auge con influencers siendo toda la rabia con Reels, TikTok, Youtube. ¿Sabías que los navegadores ahora tienen todas las APIs para hacer edición de video en el navegador? En esta charla voy a darte una introducción sobre cómo funciona la codificación de video y cómo hacerla funcionar dentro del navegador. Spoiler, ¡no es trivial!

Workshops on related topic

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.