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!

30 min
13 Nov, 2023

AI Generated Video Summary

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
React Summit 2023React Summit 2023
24 min
Video Editing in the Browser
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
JSNation 2023JSNation 2023
111 min
Bringing Your Web App to Native With Capacitor
WorkshopFree
So, you have a killer web app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more