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

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

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.

3. React, TVs, Aprendizaje y el Proceso de Registro en TV

Short description:

Hablaré sobre React y TVs, cómo se conectan, la construcción de una nueva pantalla de TVUi y la importancia del aprendizaje continuo. Aprender una nueva plataforma implica entender el producto, leer la documentación, configurar un entorno de desarrollo local y aprender los fundamentos. El proceso de registro de Netflix TV implica ingresar un número de teléfono, recibir un mensaje de texto con un enlace, configurar el correo electrónico y la contraseña, seleccionar un plan, ingresar los detalles de pago e iniciar sesión.

Y para comenzar, empezaré con un poco de lo que voy a hablar. Explicaré un poco cómo React y los TVs se conectan entre sí. Mostraré un poco de cómo construimos una nueva pantalla de TVUi. Y finalmente, daré un poco más de comentario sobre lo que quiero decir con la importancia del aprendizaje continuo.

Entonces, comencemos con React y los TVs. Lo primero que fue muy obvio cuando me uní en mi primera semana de incorporación es que web y TV, aunque ambos se usaban en React, eran similares, pero no eran lo mismo. Al igual que una versión animada de One Piece, que fue increíble. Es similar, pero no exactamente lo mismo que la acción en vivo, y realmente disfruté la acción en vivo personalmente.

Entonces, cuando comencé mi incorporación esa semana, comencé a pensar en cómo podría desglosar el aprendizaje de una nueva plataforma para poder empezar a dar impacto en mi nuevo rol como desarrollador senior. Y entonces lo desglosé en estas cuatro áreas. Aprender más sobre el producto que estaría apoyando. Comenzar a leer la documentación. Espero encontrar un diagrama de cómo funciona TVUI y la imagen general. Pasar por las alegrías de configurar un nuevo entorno de desarrollo local en una nueva empresa. Siempre es divertido, ¿verdad? Descubrir qué documentos están desactualizados y qué paquetes de NPM no funcionan en tu nuevo Mac. Y finalmente, ¿cuáles son algunos de los fundamentos que podría aprender para llegar al 80% del camino de manera que si estuviera trabajando en mi propia característica por primera vez, al menos tendría un buen punto de partida.

Y entonces, cuando pienso en los detalles del producto, mucho... Al menos para mí, no me había registrado en Netflix en mucho tiempo porque tenía una cuenta durante tanto tiempo. Tuve que dar un paso atrás y simplemente... ¿Cómo es realmente el proceso de registro de TV? Entonces, esto está un poco acelerado. Comenzamos mostrando algunos de los videos y contenido de Netflix. Mostramos algunas de las principales razones para tener una membresía. Ingresas un número de teléfono. El número de teléfono te envía un mensaje de texto. Ese mensaje de texto te da un enlace a la web. Y luego en la web es donde realmente configuras tu correo electrónico, tu contraseña. Eventualmente seleccionas un plan, premium, estándar, etc. Y luego ingresas tus detalles de pago. Y entonces la interfaz de usuario de TV se está actualizando mientras haces eso para darte algunas imágenes geniales en el fondo. Y una vez que terminas eso, eventualmente puedes iniciar sesión en Netflix.

4. Proceso de Registro y React Given

Short description:

Hablaré sobre el proceso de registro y la importancia del rendimiento en el desarrollo de la interfaz de usuario de TV. Las TVs tienen memoria limitada, por lo que el rendimiento es crucial. Trabajar en un mono-repositorio puede ser caótico pero requiere asegurar que todo funcione perfectamente. React Given es similar a React DOM, pero en lugar de elementos DOM, usamos widgets para renderizar en las pantallas de TV.

Y esto es alguien que ya ha tenido un perfil antes. Selecciona tu contenido o tu perfil. Selecciona algún contenido. Y luego presiona play. Así puedes comenzar a disfrutar del maravilloso contenido que tenemos. Ejemplos súper básicos de un sistema muy complejo que tiene muchas más características que eso. Pero para mí, quería tener una idea de lo que estaría apoyando. Y estoy en el equipo de crecimiento. Así que principalmente me enfoco en el proceso de registro. Y así como pasé del producto para comenzar a aprender más sobre los fundamentos de la interfaz de usuario de TV. Y podemos asumir en este punto que mi entorno de desarrollo estaba configurado. Hablaré un poco más sobre los primeros dos aquí en la diapositiva. Y luego profundizaré en los de abajo.

Y así, un concepto interesante similar pero no igual es que las TVs en general, no tienen tanta memoria. Y también hay una gama de esos dispositivos. Y así como tenemos que prestar atención al performance en la web, es incluso un poco más prioritario para nosotros en la TV porque realmente puedes impactar la experiencia de visualización o el proceso de registro si tienes algún código, especialmente en React, que no está funcionando bien. Y luego, en segundo lugar, no sé si alguien aquí trabaja en un mono-repositorio. Pero como alguien que nunca había trabajado en un mono-repositorio, estaba muy confundido sobre lo que está pasando todo el tiempo. Es un proceso muy, muy, muy caótico controlado donde pones un PR, hay un montón de otras personas teniendo PRs. Esperas un proceso de construcción para asegurarte de que no rompes nada. Y como alguien que está poniendo código allí para que eventualmente lo use tanta gente, quieres asegurarte de que cada cosa está funcionando perfectamente esas primeras dos veces. Y para mí, eso fue realmente un gran fundamental y algo que tuve que aprender realmente y obtener un poco más de comodidad con.

Así que a continuación hablaré un poco sobre qué es React Given. Aquí es donde brilla la parte de React de TVI. React Given es algo similar a React DOM. Escribimos JSX en la Web. Lo compilamos y eventualmente React crea elementos DOM como div, botones, secciones, artículos, etc. Y en la TV, en lugar de tener DOMs, tenemos lo que llamamos un given. Y given es lo que usamos para renderizar cosas en la pantalla. Y está compuesto no de elementos HTML sino de widgets.

5. Widgets, Navegación y TVUI Explorer

Short description:

Los widgets son cajas rectangulares con propiedades. La navegación en la interfaz de usuario de la TV es crucial para una buena experiencia de usuario, considerando los controles remotos y los dispositivos de puntero. La aplicación TVUI Explorer es similar a Storybook y permite la exploración de piezas del sistema de diseño y el desarrollo iterativo rápido con datos simulados.

Y los widgets son solo cajas rectangulares con propiedades. Y cuando miras este ejemplo aquí a la derecha, esto son widgets de widgets de más widgets. Y cada uno de esos widgets tiene propiedades. Y solo para dar un poco más de una vista cercana de eso. Al igual que podemos usar un inspector en el DOM. Puedes ver los widgets aquí a la izquierda. Widgets de widgets de widgets. Y luego, en el lado derecho, las propiedades reales que usamos para dar estilo a esos widgets para asegurarnos de que la pantalla se renderiza realmente con el diseño o los colores que queremos que tenga. Así que he resaltado algunos que son similares pero no iguales. El orden JAW, por ejemplo, es similar al índice Z. Y este es un enfoque de tipo RCSS.

A continuación, una parte importante del desarrollo de una pantalla para TV es que la mayoría de las personas están usando, ¿qué? Un control remoto. Así que no están usando su ratón para navegar y hacer clic en cosas. Y aunque en la web es similar en que tenemos que asegurarnos de que el lado de la accessibility todavía funciona con las pestañas y deberías poder navegar sin un ratón. Pero en el caso de la TV, ya que la mayoría de las personas están usando controles remotos, queremos asegurarnos de que la navegación es una buena user experience. Y por lo tanto, es realmente importante para nosotros hacerlo. Y al mismo tiempo, esto era algo muy nuevo para mí, pero en realidad puedes para algunas TVs te permiten apuntar y hacer clic. Y pensé que eso era realmente, realmente interesante. Así que tenemos que asegurarnos, cuando estamos desarrollando, que ambos funcionen y nos aseguramos de que se prueben. Especialmente para los punteros, a veces puedes superponer widgets en el orden incorrecto al igual que el índice Z en la web. Y entonces no puedes apuntar y hacer clic en él. Así que esto es solo una demostración muy, muy corta de cómo puedes moverte con, como, un ratón o los dispositivos de puntero en la TV. Y luego también puedes usar la navegación LRUD para hacer lo mismo. Como mencioné, fundamental.

Muy bien. A continuación, hablaré sobre el último fundamental, que es nuestra aplicación TVUI Explorer. Es muy similar, pero no exactamente igual, a Storybook en la web si lo has usado. Y entonces tenemos realmente dos razones principales para usar la aplicación TVUI Explorer. La primera razón principal es poder entrar y, al igual que Storybook en la web, explorar las pequeñas piezas de nuestra biblioteca de sistema de design para aprender cómo funciona, qué propiedades se están utilizando y cómo se ven. Y luego la segunda razón principal es que en realidad podemos simular data y construir iterativamente una nueva pantalla de TVUI súper rápido, porque no tienes que cargar toda la aplicación, entrar en un estado específico en la aplicación, como navegar a un lugar determinado, etc.

6. TVUI Explorer y Construcción de una Nueva Pantalla

Short description:

En lugar de recargar manualmente con datos simulados, podemos usar TVUI Explorer para navegar rápidamente y explorar diferentes opciones de botones. También proporciona acceso al código y la documentación. Estos fundamentos de TVUI me ayudaron a construir mi nueva pantalla con confianza.

Y en lugar de eso, podemos recargar rápidamente con los datos simulados para construir una pantalla. Lo mostraré un poco más en un segundo. Pero solo para mostrarles un poco más sobre TVUI Explorer, esto es lo que veo al navegar en el componente del botón. Puedes ver todas las diferentes opciones para los botones allí. Esto es lo que veo al comprobar cómo se ven cuando te enfocas en ellos, los diferentes colores. E incluso puedes ver el código dentro de TVUI Explorer. Y luego, para mí, realmente me gustan un poco más los documentos en la web. Así que en realidad nos proporcionan un enlace a ellos desde el equipo del sistema de design justo allí, para que puedas explorarlos un poco más. Así que eso es todo lo que esperaba de los fundamentos de TVUI cuando construí mi nueva pantalla me llevaría a un lugar cómodo mientras construía algo nuevo.

7. Proceso de Desarrollo de TVUI y Tokens de Diseño

Short description:

Hablaré sobre el proceso de desarrollo de TVUI al construir algo nuevo. Comenzamos con diseños del equipo de diseño y utilizamos tokens del sistema de diseño. Verifico los tokens de diseño y componentes para entender la estructura antes de construir.

Así que a continuación hablaré un poco más de cómo se ve ese proceso de desarrollo de TVUI cuando estamos construyendo algo nuevo. Asegúrate de que eso te parezca bien. ¡Sí! Vale, genial. Así como en Web y otros flujos de desarrollo, siempre comenzamos con diseños del equipo de design. Créeme, no querrías que yo diseñara para TVUI. Así que usamos nuestros tokens del sistema de design cuando los diseñadores están diseñando nuestras pantallas, ellos los conectan para usar los tokens del sistema de design. Y entonces, lo que normalmente comienzo es que reviso el design, y mientras reviso el design, puedo mirar cada uno de los componentes para ver qué tokens están usando, como el tipo, el color, el tamaño, etc. Y entonces, comienzo con eso solo para obtener una imagen general de cómo se verá la estructura del componente mientras comienzo a construir.

8. Construyendo la Interfaz de Usuario con Historias y Superposición de Diseño

Short description:

Configuro un componente base para renderizar algo en la pantalla. Luego, defino historias, que son diferentes variaciones de los diseños que voy a construir. Itero en la interfaz de usuario contra estas historias, haciendo ajustes según sea necesario. Usando TVI Explorer, puedo previsualizar y navegar a través de las historias. Además, utilizo una superposición de diseño de Figma para comparar el diseño con lo que estoy construyendo.

Entonces, lo siguiente que hago es configurar un componente, lo que llamo un componente base. Y la razón es simplemente para renderizar algo en la pantalla. Y eso es realmente importante porque el siguiente paso sería definir lo que llamo historias, que como mencioné es similar a storybook. Y las historias que usualmente definimos cuando estamos construyendo una pantalla son las diferentes variaciones de los diseños que vamos a construir. Y para este ejemplo, hay tres historias principales que quiero asegurarme de que funcionen.

La visualización estándar es como cualquier idioma inglés, de izquierda a derecha con sinopsis y encabezado data ambos pasados. La segunda historia es que quiero asegurarme de que un idioma de derecha a izquierda funcione bien. Y la última es ¿qué sucede si no se pasa ninguna sinopsis data? ¿Y cómo se ve ese design? Por lo general, defino estas historias primero porque, como mencioné, podemos construir iterativamente nuestra interfaz de usuario contra esas historias y decir fácilmente, oh, ese espaciado se ve mal. Oh, necesito agregar este botón o este texto. E incluso a veces solo pongo el texto allí para construir esa pantalla. Y luego comienzo a hacer la integración con todos los data.

Y sé que esto puede ser un poco más pequeño para todos ustedes, pero el punto de esto es mostrar a medida que estoy construyendo iterativamente, eventualmente llegamos a este estado final donde estamos coincidiendo bastante bien con el design. Y solo quiero mostrar desde la perspectiva del código, ¿cómo se ve esto cuando realmente estoy usando TVI Explorer. Y en esta vista, tienes las tres historias a la izquierda. Y la demostración va a mostrar, puedes iterar rápidamente a través de las tres historias. Y luego los verás en lo que llamo modo de vista previa, donde no entramos en pantalla completa en ellos. Y luego la demostración irá donde realmente hago clic en una de las historias, y luego puedes usar teclas de acceso rápido para navegar a cada una. Y esa es una forma en que puedes verificar que todas se ven bien mientras estás construyendo esa interfaz de usuario. Así es como se ve. Este es el modo de vista previa, como mencioné. Luego hago clic allí, usando una tecla de acceso rápido para subir. Y luego tengo una pequeña animación divertida para ustedes de la que estoy muy orgulloso. Hola. Tu amigo, yo. Vale. Pasemos al siguiente.

Solo quería dar este consejo útil que ha sido realmente útil para mí. A medida que estamos construyendo iterativamente esa interfaz de usuario, usamos algo llamado superposición de design. Y la superposición de design es solo una exportación de Figma, y puedes ver cómo simplemente estoy presionando la tecla O en el teclado aquí, y está mostrando la imagen de Figma versus lo que estoy construyendo. Y puedes ver en ese ejemplo que mi espaciado estaba un poco desviado.

9. Capas de Pruebas en el Proceso de Desarrollo de TVY

Short description:

Después de hacer la interfaz de usuario simulada, nos aseguramos de que todo siga funcionando a medida que se producen cambios en el código en el Monorepo. Tenemos tres capas principales: datos simulados e historias para pruebas de comparación de capturas de pantalla, pruebas unitarias de la biblioteca común de React y pruebas de extremo a extremo. Equilibramos el uso de pruebas de extremo a extremo debido a su posible lentitud e inestabilidad.

Muy bien. Y luego, por supuesto, después de hacer la interfaz de usuario simulada, queremos asegurarnos de que todo sigue funcionando a medida que se producen cambios en el código en el enorme Monorepo que mencioné. Y así, en Netflix para TVY, tenemos tres capas principales en nuestra pirámide para las que normalmente construyo una prueba. La primera capa es con los datos simulados y las historias, automáticamente obtienes comparación de capturas de pantalla en las testing. Y eso es una característica realmente genial porque cuando estás usando algo como el sistema de design componentes, sabes que el equipo del sistema de design puede entrar y añadir nuevas características o quizás hacer una limpieza de código. Pueden presentar un PR y se asegurará de que mi historia con las propiedades específicas del botón que estoy usando no rompa nada. Y así que realmente me gusta esa parte. La segunda capa es lo que estás viendo en la pantalla, estas son pruebas unitarias muy comunes de la biblioteca React / pruebas de integración, cualquiera que creas que son. Y luego, diré dos antes de pasar a la siguiente sección, la última capa de prueba es de extremo a extremo. Así que intentamos no escribir demasiadas pruebas de extremo a extremo porque pueden ser un poco lentas en nuestro pipeline. Y también si están usando datos reales, pueden ser inestables. Y así que intentamos equilibrar eso a medida que construimos las diferentes capas.

10. Aprendizaje Continuo y Perspectivas Frescas

Short description:

Ese es el proceso de Desarrollo de TBY que utilizamos para construir nuevas pantallas. El aprendizaje continuo es importante en nuestra carrera. Cada año, reflexionamos sobre nuestro crecimiento como Desarrolladores. Aprender algo nuevo es desafiante y humilde, pero también divertido. Trabajar con personas reflexivas y de apoyo y ofrecer una perspectiva fresca es valioso en la tecnología.

Bueno, ese es el proceso de Desarrollo de TBY que utilizamos para construir algunas pantallas nuevas en TBY. Es súper rápido, y es un placer. Y doy mucho crédito a los equipos que han ayudado a hacer que ese proceso de Desarrollo y la experiencia de Desarrollo sea súper simple y un placer de usar.

Por último, hablaré un poco sobre mi historia al principio sobre por qué creo que el aprendizaje continuo es tan importante en nuestra career. Así que empezaré destacando. Cuando miras mi carrera de Desarrollador, puedes ver claramente que no hay… Bueno, si ves un patrón, entonces eres realmente bueno. Pero no tenía un patrón cuando estaba eligiendo esos roles. Generalmente hablando, estaba cambiando de roles a algo que me interesaba, algo que era nuevo, y algo a través de lo cual podría crecer. Y así TBY encajaba en ese espectro.

Y creo… Cuando pienso en mi career y cada uno de nosotros reflexiona sobre dónde estaba hace un año hasta ahora, ese crecimiento es una parte realmente, realmente impresionante de ser un Desarrollador, especialmente porque las tecnologías que usamos generalmente cambian mucho. Incluso como los React Server components se han convertido en un tema candente para nosotros. Y solo quería destacar en mi career, cada vez que tengo que aprender algo nuevo, es súper humilde, ¿verdad? Estás empezando desde que sé cómo funciona esta base de código en esta empresa, me estoy uniendo a algo nuevo o a un nuevo proyecto. No tengo idea de lo que estoy haciendo. Súper incómodo pasar de ser potencialmente experto a novato. Y luego es desafiante porque ahora tienes que tomar tu ego y ponerlo a un lado mientras tienes que decir, ayuda. Ayúdame. Ayúdame. Por favor, ayúdame. Tengo algunas historias para completar a tiempo. Pero al mismo tiempo, aunque es desafiante y humilde, etc., también es algo que creo que es muy divertido. Realmente crecemos a través de las experiencias como desarrollador, y muchas veces nos están pagando por ello. Eso es realmente, realmente especial, y personalmente me gusta mucho esa parte de estar en la industria de la tecnología.

En segundo lugar, cuando trabajas con muchas personas reflexivas y de apoyo en un entorno colaborativo, a muchos primeros malentendidos, y en cuanto a que quizás dos personas están tratando de explicar algo y no están en la misma página para poder estar en esa misma página y luego compartir ese contexto ampliamente con otras personas también, especialmente en una gran base de código. Y por último, creo que lo que es realmente único y lo que no se enfatiza lo suficiente en la tecnología es cuando entras con una perspectiva fresca, especialmente cuando te unes a una nueva empresa, muchas veces tu mentalidad es que quiero empezar a contribuir lo más rápido que pueda. Y creo que cuando das un paso atrás y puedes ofrecer tu perspectiva única a los desarrolladores que han trabajado en algo que ha sido cómodo para ellos, se ha normalizado, lo que trabajan, no necesariamente ven algunas de las peculiaridades que tienen que hacer estos rodeos para sacar una nueva característica. Y así que cuando eres nuevo, puedes señalar esos puntos, y al resolverlos, das una oportunidad para resolverlos para todos y hacer su trabajo un poco más fácil.

Y así que solo te dejaré con esta cita de Charlie Munger, que es el socio comercial de Warren Buffett. Ambos son personas súper inteligentes en lo que respecta al pensamiento crítico. Y él dice, nada me ha servido mejor en mi larga vida que el aprendizaje continuo. Y personalmente siento que nada me ha servido mejor en mi no tan larga carrera de Desarrollador de solo diez años, que el aprendizaje continuo también.

QnA

Reflexiones, Oportunidades de Trabajo y Preguntas y Respuestas

Short description:

Me encantaría asumir un nuevo desafío siempre y cuando estés de acuerdo con que aprenda sobre la marcha. Realmente he apreciado la cultura de apoyo en Netflix, donde está bien fallar y hacer preguntas. Es una experiencia de aprendizaje interesante comenzar desde cero y utilizar diferentes perspectivas en nuevos proyectos. Tenemos roles de TVUI disponibles en el sitio de Empleos. Ahora, pasemos a las preguntas y respuestas. La primera pregunta es sobre la prueba de la interfaz de usuario para TV durante el desarrollo. Tenemos un emulador y un laboratorio de dispositivos para pruebas. La siguiente pregunta es sobre compartir código entre la interfaz de usuario web y de TV. Netflix tiene diferentes equipos trabajando en diferentes partes del proceso de desarrollo, por lo que no tengo mucha información al respecto. Por último, alguien quiere saber dónde encontrar recursos para comenzar con el desarrollo de TV.

Y solo para dar un poco de lo que dije al gerente de contratación después de que mis pensamientos se calmaron, fue que me encantaría asumir un nuevo desafío siempre y cuando estés de acuerdo con que aprenda sobre la marcha. Y una cosa que realmente, realmente he apreciado en Netflix es esa cultura de apoyo. Y que está bien si fallas y haces preguntas, estoy aquí para ayudarte mentalidad. Y porque ese gerente de contratación pudo confiar en mí para aprender algo nuevo, he podido crecer en los últimos dos años. Y creo que es importante destacar eso. A los gerentes de contratación, para que tomen riesgos con las personas si sienten que es algo nuevo, pero pueden aprenderlo. Y también, desde una perspectiva de desarrollador, solo quiero compartir, es una experiencia de aprendizaje realmente interesante comenzar desde cero una y otra vez y poder usar esas perspectivas en nuevos proyectos.

Con eso, hemos llegado a la misión completa. Y solo quería destacar, tenemos roles de TVUI disponibles en el sitio de Empleos. Puedes escanear el código QR, o puedes ir a jobs.netflix.com, buscar TVUI, y sentirte libre de aplicar o preguntarme cualquier pregunta que tengas en la conferencia.

Con eso, es hora de las preguntas y respuestas. Sí. La primera pregunta que tenemos es... Para las TVUI, ¿cómo pruebas la interfaz de usuario para TV durante el desarrollo? ¿Usas emuladores? Sí, tenemos un emulador. También hay un laboratorio de dispositivos para asegurarse de que funciona en diferentes tamaños, etc. ¿Tienes compilaciones internas? ¿Se llama APK para las TVs? No estoy seguro de cómo lo llamarías como alguien que está más en el lado del consumidor. Solo sé que tengo un emulador para probar por mi lado. Suena bien. La siguiente pregunta que tenemos es... Dada la diferencia entre la web y la TV, ¿puedes compartir algo dentro de la base de código de la interfaz de usuario en absoluto? Parecen extremadamente diferentes, similar a React Native. Sí, buena pregunta. Con Netflix siendo tan grande... Hay diferentes equipos que están haciendo diferentes partes de nuestros procesos de desarrollo. Entonces, para mí, soy más un consumidor. No tengo mucha información sobre cómo funciona esa pieza. Pero, sí, lo siento, no tengo una mejor respuesta para ti. Vale. Tenemos a una persona que quiere empezar. Has animado a algunas personas. ¿Dónde conseguimos recursos para empezar cuando estamos mirando el desarrollo de TV? Oh, buena pregunta.

Recursos de TV UI y Experiencia

Short description:

Hay blogs en el blog técnico de Netflix que explican el desarrollo de TV UI. Si estás interesado en aprender más, es un excelente lugar para comenzar. También puedes aplicar a Netflix para aprender cómo lo hacen. En cuanto a la pregunta sobre los años de experiencia, depende de ti y de cuándo estés listo para aprender. Las TVs pueden tener diferentes pilas de UI, pero yo conozco más sobre React. No estoy seguro sobre la interfaz con el hardware de TV o las APIs.

Dado que solo he utilizado la TV UI interna, no estoy seguro de qué recursos existen en cuanto al desarrollo general de TV UI. Así que, es una buena pregunta. Para mí, lo que empecé a investigar es que hay algunos blogs en el blog técnico de Netflix que explican un poco más cómo se ve la TV UI allí. Entonces, si estás interesado en aprender más, es un excelente lugar para comenzar. Y si estás interesado en aprender cómo lo hace Netflix, entonces definitivamente eres bienvenido a aplicar. Y, podrás sumergirte de lleno una vez que empieces.

Suena bien. Le di tarea a Caeleb anoche. Voy a darte tarea de nuevo. Vale. Entonces, vas a enviar un tweet con algunos de los recursos que la gente puede consultar. Oh, vale. Puedo enviar los blogs. Perfecto. Entonces, quien sea que haya hecho la pregunta, solo busca un tweet de Caeleb. Gracias por ser un estudiante y permitirme darte tarea.

La siguiente es, ¿cuántos años de experiencia crees que necesita un desarrollador web en React antes de saltar a un rol de TV UI? Oh, buena pregunta. Yo, tal vez, esto es, soy un poco más arriesgado, o no adverso, soy más arriesgado en mi carrera, pero creo que deberías saltar cuando sientas que es algo que te interesa y quieres crecer a través de ello. No creo que necesariamente tengas un límite en, necesito X experiencia antes de aprender algo nuevo. Creo que es, lo que te hace, como dice Warren Buffett, saltar al trabajo todos los días y pasar un buen rato. Y si eso es uno, o cinco, o diez años en tu carrera, cuando estés listo para aprender, adelante. Me encanta eso.

La siguiente que tenemos es, ¿Todas las TVs ejecutan la misma pila de UI? ¿Esto se basa en Android o algo diferente? Buena pregunta. Sí, desafortunadamente solo conozco más sobre el lado de React, así que no puedo dar mucha información sobre el hardware o cómo funciona fuera de eso. Suena bien. Tenemos, Para las TV UIs, Oh, no. Ya hemos respondido a eso. Resolvámoslo. ¿Alguna vez necesitas interfaz con el hardware de la TV o la API, y si es así, ¿qué o cómo? Estás haciendo todas las preguntas de la plataforma, así que sí. Lo siento, no estoy seguro de eso, así que sí.

Normas de TV y Bibliotecas de Diseño

Short description:

Las normas de TV son diferentes a las normas web. En el pasado, nuestro código antiguo no utilizaba las bibliotecas de diseño y los componentes, sino que se basaba en el posicionamiento absoluto. Sin embargo, con la biblioteca del sistema de diseño, ahora tenemos más flexibilidad en nuestras prácticas de diseño.

Es una gran pregunta, sin embargo. Así que busquemos una que no sea de plataforma, probemos esta. ¿Cómo son las standards de TV diferentes de las web standards? Oh, hmm. Sí. Una cosa que fue súper interesante, podría ser un poco debatible también, pero cuando empecé, la biblioteca de design todavía estaba en pleno apogeo de obtener todos los componentes que podríamos reutilizar y reconstruir. Y lo que fue interesante es que realmente ves bastante de nuestro código antiguo que no está utilizando algunas de las bibliotecas de design que tenemos, los componentes de la biblioteca de design que tenemos, utilizando el posicionamiento absoluto. Y para mí, todavía puedo verlo en mi cabeza cuando estaba diseñando mi primera pantalla y estaba preguntando, ¿esto está bien? Esto se siente realmente extraño, y ellos decían, no, está bien, no te preocupes. Sí, lo usamos, lo hacemos todo el tiempo. Así que yo estaba como, oh, está bien. Pero a medida que la biblioteca del sistema de design nos ha ofrecido un poco más de flexibilidad en algunas de las formas en que hacemos los diseños, algunos dirían que tal vez ya no es la mejor práctica.

TV UI Explorer y Proceso de Contratación en Netflix

Short description:

El TV UI Explorer es una biblioteca de Netflix, no de código abierto. Nos permite construir pantallas rápidamente y ver los componentes de la biblioteca de diseño. Sin embargo, no puede ser enviado a un televisor. El proceso para entrar en Netflix varía según el equipo, pero generalmente implica entrevistas con gerentes de contratación, entrevistas de resolución de problemas técnicos y entrevistas interfuncionales con diseñadores o gerentes de producto.

Suena bien. De esto ya hemos hablado un poco, pero volvamos a sacarlo. Entonces, ¿el TV UI Explorer es una biblioteca de Netflix o de código abierto? Es solo una biblioteca de Netflix. Quiero decir, aparte de usarlo para construir nuestras pantallas y ver los componentes de la biblioteca design, no estoy seguro de qué obtendrías al usarlo porque somos nosotros los que lo consumimos y simplemente podemos construir cosas rápidamente. Pero no podrías enviarlo a un televisor, no creo, ni nada por el estilo.

¿Y qué tal el proceso para entrar en Netflix? ¿Cómo es eso? Buena pregunta. Cada equipo es un poco diferente, pero puedo hablar un poco por mí. Tuve una entrevista con el gerente de contratación para aprender más sobre el rol y asegurarme de que era adecuado para mí. Tuve un par de entrevistas técnicas solo para resolver problemas, no necesariamente de estilo de código líder, sino más prácticas y simplemente aprender más sobre cómo pensaba las cosas y cómo desarrollaba soluciones para ellas. Y luego, potencialmente hablarías con alguien del lado interfuncional, como un diseñador o un gerente de producto o algo así solo para ver cómo colaboras con socios interfuncionales. Y luego tendrías, potencialmente, otra última entrevista con el gerente de contratación. Al menos eso es lo que parecía mi proceso. Siempre está cambiando y cada equipo puede hacerlo un poco diferente, pero generalmente así es como lo he visto hecho. Suena intenso. Fue bastante intenso. Felicitaciones. Gracias. Fue un poco intenso. El siguiente que tenemos es, veamos, así que este es un poco más de hardware. Vamos a intentarlo. ¿Se basa el mismo código para Apple TV, Android TV, y fabricantes como Samsung o LG? Si es así, ¿puedes explicar el proceso de construcción? Sí, desafortunadamente no puedo explicar el proceso de construcción simplemente porque no trabajo en él. Cómo funciona para los diferentes sistemas operativos y cosas así tampoco estoy muy al tanto. Me enfoco principalmente en construir la interfaz de usuario y luego hay equipos que tienen la responsabilidad de asegurarse de que funcione de diferentes maneras. Colaboración cruzada. Sí. Mencionaste que estás en el equipo de crecimiento ¿cómo es la testing de crecimiento, TV versus web? Oh, en términos de pirámide es muy similar. No creo que en el sitio web usemos tanto la comparación de capturas de pantalla al menos no de la misma manera. Fue bastante interesante cuando se introdujo eso porque creo que generalmente la testing de instantáneas no ha obtenido los mejores resultados, como todos todavía lo están haciendo hoy en comparación con cuando salió por primera vez. Pero lo encontré inmensamente útil aunque no estamos creando instantáneas manualmente eso es lo que está haciendo en segundo plano definitivamente me ha salvado de romper el código antes especialmente para el código que se comparte en varias pantallas. En el sitio web creo que principalmente se centran en la prueba unitaria y la prueba de extremo a extremo y no tienen el lado de la testing de capturas de pantalla pero podría estar equivocado ya que no trabajo en la web muy a menudo. Oh, hay prueba de capturas de pantalla, bien, gracias John. Gracias, John. Hola John, encantado de conocerte. Bueno, se nos acabó el tiempo. Muchas gracias, Caleb. Ha sido maravilloso. Gracias a todos por unirse.

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

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.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top ContentPremium
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.
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

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
Workshop
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
Workshop
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
Workshop
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
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
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.
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.