Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe

Thank you all so much for joining me. I know my talk kind of got changed up, so maybe let me get some snaps if you're hungry right now. Yeah, don't worry. I am, too. And I know I'm kind of the path in between. So I hope you enjoy the talk, and it's worth waiting for lunch before... Waiting for to get lunch.

I want to... Like Anika said, I am going to be talking to you a little bit about my adventure, unraveling the mysteries of the Netflix TV UI universe. And so I'm going to go ahead and blast off.

So it was around two years ago, October 21st, 2021. I was sitting in my apartment in my computer chair. I had my dress shirt on. My favorite dress shoes. Really setting the vibe to make sure that even though I was at home, I wanted to make sure I was in a professional mood as I was hopefully going to be in my last Netflix interview. And so as the hiring manager joined, the initial 30 minutes of the interview were going really well. I was talking about my background. How I could impact Netflix. Learning about the team. Super excited just to be part of Netflix in the future hopefully. And that's when the hiring manager mentioned this small caveat.

That this role was not actually for web. But it was for TV UI. And so as I tried to keep my poker face straight over the video call, my stomach just started turning. My thoughts, you know, started whirlwinding. TV UI? What is TV UI? I have no idea what that is. What am I going to be doing on TV UI? And should I potentially set myself up for failure at big tech, learning something I've never even heard of before? And so I forced myself during the interview to take a deep breath. And started asking a little bit more about it. And so as I asked more questions, and the hiring manager just answered more about what TV UI is, what the development looked like, I started feeling a lot better once I learned Actually it's using React. I've done that before.

And so my thoughts really started to change as I was asking these questions from everything that could go wrong to, oh, this is an awesome opportunity to actually grow from. And so just a small spoiler alert. I did take the role. And that's how I'm able to share a little bit about my TV UI journey from the last two years. And the main reason I tell this small story is that I want to showcase that initial feeling for me was really hard, even though it's something brand new. And I wanted to demonstrate that just like muscles, our professional abilities also only grow when we stretch them beyond our usual limits. And so today I just want to share a little bit of what I've learned in the last two years of my TVUi journey and maybe just demonstrate why it's so important to be a continuous learner in our career.

And so just to start things off, I'll start with a little bit of what I'm going to talk about. I'll explain a little bit of how React and TVs connect to each other. I'll show a little bit of how we built a new TVUi screen. And then lastly, just give a little bit more commentary on what I mean by the importance of continuous learning.

So let's get started with React and TVs. The first thing that was very obvious as I joined on my first week of onboarding is that web and TV, even though they were both used in React, they were similar, but they were not the same. Just like an animated version of One Piece, which was awesome. It's similar, but not exactly the same as the live action, and I really enjoyed the live action personally.

So as I started my onboarding that week, I started to think about how could I break down learning a new platform so I could start giving impact into my new role as a senior dev. And so I broke it down into these four areas. Learn more about the product that I'd be supporting. Start reading through the documentation. Hopefully find a diagram of how TVUI works and the big picture. Go through the joys of setting up a new local dev environment at a new company. It's always fun, right? Find out which docs are outdated and which NPM packages don't work on your new Mac. And then lastly, what are some of the fundamentals that I could learn to kind of get 80% of the way there that if I was working on my own feature for the first time, I can at least have a good starting point.

And so when I think about the product details, a lot of... At least for me, I had not signed up on Netflix in a long time because I had an account for so long. I had to take a quick step back and just... What does the TV while signup process actually look like? So this is sped up a little bit. We start with just showing some of the videos and content of Netflix. Show some of the top reasons to have a membership. You enter a phone number. The phone number sends you a text message. That text message gives you a link to web. And then on web is where you actually set up your email, your password. You eventually select a plan, premium, standard, et cetera. And then you enter your payment details. And then TV UI is updating as you're doing that to give you some cool images in the background. And so once you finish that, you can eventually log into Netflix.

And this is someone who has already had a profile before. Select your content or your profile. Select some content. And then hit play. So you can start enjoying the wonderful content that we have. So super basic examples of a very complex system that has way more features than that. But to me, I wanted to get an idea of what I would be supporting. And I'm on the growth team. So mostly I focus on the sign up process. And so as I went from the product to start learning more about the TV UI fundamentals. And we can assume at this point my dev environment was set up. I'll talk a little bit more about the first two here on the slide. And then I'll dive deeper into the ones on the bottom.

And so one interesting similar but not the same concept was that TVs just in general, right, they don't have as much memory. And there's just a range of those devices as well. And so just like we have to pay attention to performance in web, it's even a little bit more prioritized for us on TV because you can really impact the viewing experience or the sign up process if you have some code especially in React that's not performing well. And then secondly, I'm not sure if anybody here works on a mono-repo. But as someone who had never worked on a mono-repo, I was very confused on what's going on all the time. It is a very, very, very chaotic controlled chaos process where you put a PR up, there's a bunch of other people having PRs. You wait for a build process to make sure you don't break anything. And as someone who's putting code out there for so many people to eventually use, you want to make sure every single thing is working perfect those first two times. And so for me, that was really a big fundamental and something I had to really learn and get a little bit more comfort with.

So next I'll talk a little bit about what is React given. So this is where the React part of TVI really shines. React given is kind of similar to React DOM. We write JSX on the Web. We compile that down and eventually React creates DOM elements like div, buttons, sections, articles, et cetera. And on TV, instead of having DOMs, we have what we call a given. And given is what we use to render stuff on the screen. And it's composed not of HTML elements but of widgets.

And widgets are just rectangular box with properties. And when you look at this example here on the right, this is widgets of widgets of more widgets. And each of those widgets have properties. And just to give a little bit more of a close-up view of that. Just like we can use a inspector in the DOM. You can see the widgets here on the left. Widgets of widgets of widgets. And then on the right side, the actual properties that we use to style those widgets to make sure that the screen actually gets rendered with the layout or the colors that we want it to have. So I've highlighted a few that are similar but not the same. JAW order, for example, is similar to Z index. And this is kind of RCSS approach.

Next, an important part of developing a screen for TV is most people are using, what? A remote. So they're not using their mouse to navigate and click stuff. And so even though in web it's similar that we have to make sure the accessibility side still works with tabs and you should be able to navigate without a mouse. But in TV wise, since the main amount of people are using remotes, we want to make sure that the navigation is a good user experience. And so it's really important for us to do. And then at the same time, this was, like, very new to me, but you can actually for some TVs they allow you to point and click. And I thought that was really, really interesting. So we have to make sure, when we're developing, both of those work and we make sure they test. Especially for pointers, sometimes you can overlay widgets in the wrong order just like Z index in the web. And so you can't actually point and click on it. So this is just a very, very short demo of showing how you can move with, like, a mouse or the pointer devices on TV. And then also you can use the LRUD navigation to do the same thing. Like I mentioned, fundamental.

All right. Next, I'll talk about the last fundamental, which is our TVUI Explorer app. It is very similar, but not exactly the same, to Storybook on web if you've used it. And so we have really two main reasons for using the TVUI Explorer app. The first main reason is to be able to go in and, just like Storybook on web, explore the small pieces of our design system library to learn how does it work, which properties are being used, and what do they look like. And then the second main reason is we actually can mock data and iteratively build out a new TVUI screen super fast, because you don't have to load the whole app, get into a specific state on the app, like navigate into a certain place, etc.

And instead we can just quickly reload with the mock data to build a screen. So I'll show that a little bit more in a second. But just to show you a little bit more about TVUI Explorer, this is me navigating into the button component. You can see all the different options for buttons there. This is me just checking out what it looks like when you focus on them, the different colors. And you can even see the code within TVUI Explorer. And then for me, I really actually like the docs a little bit better on the web. So they actually link to them for us from the design system team right there, so you can explore them a little bit more. So that's all the TVUI fundamentals that I was hoping for when I built out my new screen would get me into a comfortable place as I built something new.

So next I'll talk a little bit more of what that TVUI dev process looks like when we're building something new. Make sure that looks okay for you all. Yep! Okay, cool. So just like Web and other dev flows, we always start with designs from the design team. Trust me, you don't want me designing for TVUI. So we use our design system tokens when the designers are designing our screens, they connect them to use the design system tokens. And so what I usually start with is I check out the design, and as I check out the design, I can look into each one of the components to see what tokens they're using, like the type, the color, the size, et cetera. And so I kind of start with that just to get an overall picture of what the component structure will look like as I start building.

So then the next thing I do is I'll set up a component, just what I call a base component. And the reason is just to render something on the screen. And that's really important because the next step would be defining what I call stories, which like I mentioned is similar to storybook. And so the stories that we usually define when we're building a screen are the different variations of the designs that we're going to build. And so for this example, there's three main stories that I want to make sure are working.

The standard display is just like any English, left to right language with synopsis and heading data both passed. The second story is I want to make sure a right to left language is working okay. And then the last one is what happens if there's no synopsis data being passed? And what does that design look like? And so I usually define these stories out first because then like I mentioned, we can iteratively build our UI against those stories and easily say, oh, that spacing looks wrong. Oh, I need to add this button or this text. And I even sometimes just put the text in there to build out that screen. And then I start doing the integration with all the data.

And so I know this might be a little bit smaller for you all, but the point of this is to show as I'm iteratively building, eventually we get to this end state where we're matching the design pretty well. And so I just want to show from the code perspective, what does this look like when I'm actually using TVI Explorer. And so in this view, you have the three stories on the left. And the demo is going to show, you can just quickly iterate through all three of the stories. And then you'll see them in what I call preview mode, where we don't actually go full screen into them. And then the demo will go where I actually click into one of the stories, and then you can use hotkeys to navigate to each one. And so that's a way that you can check all of them are looking okay as you're building out that UI. So this is what it looks like. This is the preview mode, like I mentioned. Then I'm clicking on in there, using a hotkey to go up. And then I have a fun little animation for you that I'm very proud of. Hello. Your friend, me. Okay. Let's go to the next one.

I just wanted to give this hot tip that has been really useful for me. As we're iteratively building that UI, we use something called a design overlay. And the design overlay is just an export from Figma, and you can see how I'm just hitting the O key on the keyboard here, and it's showing the image of the Figma versus what I'm building. And so you can see from that example my spacing was a little off.

All right. And then, of course, after we do the mock UI, we want to make sure everything continues working as code changes happen on the huge Monorepo that I mentioned. And so at Netflix for TVY, we have three main layers to our pyramid that I typically build a test for. The first layer is with the mock data and the stories, you automatically get screenshot comparison testing. And that's a really cool feature because when you're using something like the design system components, you know that the design system team can go in and add new features or maybe do some code cleanup. They can put up a PR and it will make sure that my story with the specific button properties that I'm using doesn't break anything. And so I really like that piece of it. The second layer is what you are seeing on the screen is these are really common React library testing unit tests, slash integration tests, whichever one you believe they are. And then, I'll say two before I move on to the next section, the last test layer is end to end test. So we try not to write too many end to end tests because they can be a little slow in our pipeline. And also if they're using real data, they can be flaky. And so we try to really balance that as we build out the different layers.

Okay, so that's the TBY Dev process that we used to build some new screens in TBY. It's super fast, and it's a joy. And I give a lot of credit to the teams that have helped make that Dev process and the Dev experience super simple and a joy to use.

So lastly, I'll talk a little bit back to my story at the beginning around why I think continuous learning is so important in our career. So I'll just start with highlighting. When you look at my Dev career, you can clearly see there's no… Well, if you see a pattern, then you're really good. But I didn't have a pattern as I was choosing those roles. Generally speaking, I was changing roles to something I was interested in, something that was new, and something I could grow through. And so TBY kind of just fit into that spectrum.

And I think… When I think about my career and each of us reflect on where was I a year ago to now, that growth is a really, really awesome part of being a Dev, especially as the technologies we use generally shift so much. Even as React Server components have become such a hot topic for us. And I just wanted to highlight in my career, every time I have to learn something new, it's super humbling, right? You're starting from I know how this code base works at this company, I'm joining something new or a new project. I have no idea what I'm doing. Super uncomfortable going from potentially expert to novice. And then it's challenging because now you kind of have to take your ego and put it aside as you have to say, help. Help me. Help me. Please help me. I have some stories to complete on time. But at the same time, even though it's challenging and humbling, et cetera, it's also something I think is a lot of fun. We get to really grow through the experiences as a dev, and a lot of times we're getting paid for it. That's really, really special, and I personally really like that part of being in the tech industry.

Secondly, when you work with a lot of thoughtful, supportive people in a collaborative environment, to a lot of first misunderstandings, and as far as like maybe two people are trying to explain something and they're not getting on the same page to being able to get on that same page and then share that context broadly with other people as well, especially in a large code base. And then lastly, I think what's really unique and what doesn't get enough emphasis in tech is when you come in with a fresh perspective, especially when you're joining a new company, a lot of times your mindset is I want to start contributing as fast as I can. And I think when you take a step back and you're able to offer your unique perspective to the devs that have worked on something that it's been comfortable for them, it's becoming normalized, what they work on, they don't necessarily see some of the quirks that they have to do these workarounds to get a new feature out. And so when you're new, you get to point those out, and by solving them, you give an opportunity to solve them for everybody and make their job a little bit easier.

And so I'll just leave you with this quote from Charlie Munger, who is Warren Buffett's business partner. They're both super smart people as far as critical thinking goes. And he says, nothing has served me better in my long life than continuous learning. And I personally feel like nothing has served me better in my not so long dev career of only ten years, than continuous learning as well.

And so just to get a little bit of what did I say back to the hiring manager after my thoughts calmed down, was I'd love to take on a new challenge as long as you are OK with me learning as I go. And so one thing that I've really, really appreciated at Netflix is that supportive culture. And that it's OK if you fail and ask questions, I'm here to help you mentality. And because that hiring manager was able to trust me to learn something new, I've been able to grow from the last two years. And I think it's important to highlight that. To hiring managers, to take chances on people if they feel like it's something new, but they can pick it up. And too, from a dev perspective, I just want to share, it's a really cool learning experience starting from scratch over and over again and getting to use those perspectives as you on new projects.

So with that, we have made it to mission complete. And I just wanted to highlight, we do have TVUI roles available on the Jobs site. You can scan the QR code, or you can go to jobs.netflix.com, search for TVUI, and feel free to apply or ask me any questions that you have at the conference.

So with that, it's time for Q&A. Yeah. The first question we have is... For TVUIs, how do you test UI for TV during development? Do you run on emulators? Yeah, we have an emulator. There's also a lab of devices to make sure it works on different sizes, et cetera. So you have internal builds? Is it called an APK for TVs? I'm not sure how you would call it as someone who is more on the consumer side. I just know I have an emulator to test out on my side. Sounds good. The next question we have is... Given the difference between web and TV, do you get to share anything within the code UI base at all? They seem extremely different, similar to React Native. Yeah, good question. With Netflix being so large... There's different teams that are doing different parts of our dev processes. So, for me, I'm more of a consumer. I don't have too much information on how that piece works. But, yeah, I'm sorry I don't have a better answer for you. Okay. We have a person who wants to get started. You've encouraged some people. Where do we get resources to start when we are looking at TV development? Oh, good question.

Since I've only used internal TV UI, I'm not sure what resources are out there as far as just general TV UI development. So, that's a good question. There are for me what I started looking into where there's some blogs on Netflix's tech blog that explains a little bit more of what TV UI looks like there. So, if you're interested in learning more, that's a great place to start. And if you're interested to learn how Netflix does it, then you're definitely welcome to apply. And, you'll be able to dive right in once you start.

Sounds good. I gave Caeleb homework last night. I'm going to give you homework again. Okay. So, you're going to shoot out a tweet with some of the resources that people can look into. Oh, okay. I can send out the blogs. Perfect. So, whoever the question was for, just look up for a tweet from Caeleb. Thank you for being a student and allowing me to give you homework.

The next one is, how many years of experience do you think a web dev in React needs before jumping into a TV UI role? Oh, good question. I, maybe, this is, I'm a little bit more risk, or not averse, I'm more risky in my career, but I think you should jump in whenever you feel like it's something that you're interested in and you want to grow through. I don't think that you necessarily have a limit on, I need X experience before I learn something new. I think it's, whatever makes you, like Warren Buffett says, skip to work every day and have a good time. And if that's one, or five, or ten years in your career, when you're ready to learn, go for it. Love that.

Next one we have is, Do all TVs run the same UI stack? Is this based on Android or something different? Good question. Yeah, unfortunately I only mostly know more on the React side, so can't give too much information on the hardware or how it works outside of that. Sounds good. We have, For TV UIs, Oh, no. We've answered that. Let's resolve it. Do you ever need to interface with the TV hardware or API, and if so, what or how? You are asking all the platform questions, so yeah. I'm sorry, I'm not sure on that one, so yeah.

It's a great question, though. So let's find a non-platform one, let's try this one. How are TV standards different from web standards? Oh, hmm. Yeah. One thing that was super interesting, it might be a little bit debatable as well, but when I started, the design library was still kind of in full swing of getting all the components that we could reuse and rebuild with. And so what was interesting is you actually see quite a lot of our older code that aren't using some of the design libraries we have, the design library components we have, using absolute positioning. And so for me, I can like still see it in my head when I was designing my first screen and I was asking like, is this okay? This feels really weird, and they're like, no it's fine, don't worry. Yeah, we use it, we do it all the time. So I was like, oh, okay. But as the design system library has offered us a little bit more flexibility on some of the ways we do layouts, some would say maybe it's not as best of a practice anymore.

Sounds good. This one we may have talked about a little bit, but let's bring it back up. So is the TV UI Explorer a Netflix library or open source? It's Netflix library only. I mean, outside of using it for building our screens and seeing the design library components, I'm not sure what you would get from using it because it's us consuming and just being able to build stuff fast. But you wouldn't be able to ship it to a TV, I don't think, or anything like that.

And what about the process to get into Netflix? What does that look like? Oh, good question. Every team's a little different, but I can just speak a little bit for me. I had a hiring manager interview to just learn more about the role and make sure it was a good fit for me. I had a couple tech interviews just problem solving, not necessarily lead code style, but more practical and just learning more how I thought about things and how I developed solutions to them. And then, you would potentially talk to someone on the cross-functional side, like a designer or a product manager or something like that just to see how you collaborate with cross-functional partners. And then you would have, potentially, another last hiring manager interview. At least that's what my process looked like. It's always shifting and each team can do it a little differently, but generally that's how I've seen it done.