RX 24 - Platform Keynote - TV Apps - Braden Cohen

Transcribed Content

Continuing on our keynote series this morning, we are going to talk about our platform keynote focusing on the TV apps. So please join me in welcoming to the stage, mister Braden Cohen. I almost fell. How's everyone doing? Packed house? Packed house? Yeah. So I'm Braden, for those who aren't familiar. I've worked with the Core and Triumph team for a little over two years now. I've kind of gotten pigeonholed to be the mobile and TV guy. So if you have mobile or TV questions, find me and I can hopefully answer. And we're really excited to announce some cool stuff for TV this year. First and foremost I want to preface by saying this is a more technical presentation. We're going to get in the weeds a little bit. We're going to dig into some documentation. So I will not be offended if I see you walk out and go to a different session. I promise. I may be on the inside but I won't express it. So let's get started and let's dive in. First and foremost, let's talk about Apple TV. As of today version two is officially released. There's not a ton of new features in there. We were kind of waiting to see if there was going to be that one big feature that could push that V2 release and I don't think we ever really got a great idea for it. So there are a few really cool things that did get added. First and foremost we added countdown. And this is essentially a way for you to display a live countdown in your application. You can kind of see that purplish banner right there. That counts down and as it goes you can super customizable. As it finishes you can instantly push them to a livestream. You can change the content and say like, hey, join us now. It's really powerful and really customizable in that sense. This is the LCBC app and they kind of pioneered that countdown control. And I think we have a couple of LCBC guys in here. And if you guys have questions about getting a TV app started and getting it polished, talk to those guys because they're so awesome and open about that type of stuff. So I wanted to give them a shout out. Do we have anyone from the well back there? And I'm sure that I haven't connected with you guys personally but I'm sure it's the same thing. Come reach out to them and I'm sure that they'll be very open with that information and try to get you started in a good way. And let's continue. And we also added the ability to pray for a request. And for us that was actually pretty simple. All we did was add a way to pray for a request. That's just a command. And LCBC took that and ran. And they created a whole prayer experience where you can pray for requests, you can scan a QR code and submit a prayer request, and it's super neat. And I would say connect with those guys if you want to find out more about that. Super awesome. We also added the ability to follow and unfollow. And for those who are unfamiliar that's kind of like favoriting in Rock because you can follow any type of entity. So you can kind of like favorite and unfavorite in that sense. So we added the capability for that too which is super cool. And then this is a little bit more complicated of a command. We added the ability to toggle an attribute. And I'm actually going to jump over to our documentation and kind of show you guys what I mean. So this is all in our Apple TV documentation. So up here we've got some CSS styles. We've got red, blue, green, yellow, small, medium, and large. Basically just example CSS styles for you. And then here we've got a fun title that says look I changed colors. And here we say our command is toggle attribute, the new one that was added. We want to change the class of that element and we want to target the fun title. So now when I click through you'll see when I click it, it'll go small red. And then you click it again, it goes medium blue, large green. And that's just an example but really it's super powerful because you can start modifying stuff on the screen without needing a full page reload. So you can dynamically kind of do stuff in that sense and change stuff around without needing to reload content. Let's jump back to the presentation. Sweet. We definitely are looking for more Apple TV ideas. We love the innovation and excitement for the countdown and toggle attribute and stuff like that. But please please brainstorm and submit your ideas to the idea board. We want to keep innovating and pioneering in that and would love to hear what you guys think. And that's it for this presentation, no I'm just kidding. There is a city. Many of you are familiar with this city. It's a dangerous place. And it's a very dangerous place. Like don't walk here at night without was going say pepper spray but I think that's an understatement. I think you need like a bazooka. Like you got like a giant robot back there, like a volcano, like I don't know what's going on. Definitely wear your hard hat. For those who aren't familiar, this is Roku City. And as announced at the keynote, we now support Roku TV applications which is super, super cool and super, super powerful but I definitely want to set some realistic expectations. For Apple TV they give you a huge handful of rich templates that you can kind of just copy and paste and they're very polished and easy to use and modify. And you can make really, really polished applications without a lot of work. Roku's not so much like that. You're going to have to get in there and show some grit and really, really push through. It's definitely a more technical language. I would say it's up here where Apple TV is down here in difficulty. So setting realistic expectations. When you get developing in Roku at first you're going to feel like her. Like you're going to want to bang your head on your desk like what the heck is going on? This makes no sense. But show grit and persevere and I promise you can achieve really, really polished and beautiful Roku TV apps just with a little bit of persistence. All this is totally possible. And since we've talked about the expectations a little bit, let's get into how do we actually start doing stuff like this. So Roku applications are built on an XML language called SceneGraph. SceneGraph is pretty cool and it's powerful. And I'm going to jump into their SceneGraph documentation and kind of poke around a little bit and show you guys what to look for. And this will all be in our documentation as well linked so you can kind of get in there. So when you first come to SceneGraph you're going to kind of be here. And they're going to talk about SceneGraph and BrightScript. Brightscript is essentially the JavaScript to HTML. It's the underlying powerhouse that powers your applications. Our goal is that you don't have to touch Brightscript. We want you to build your applications in pure XML SceneGraph because it's so powerful with Lava. And so I'm going to jump around and kind of show you, there is so much here and 95% of it you're not going to really have to touch in your application. And there are some stuff that doesn't make sense. Like I'm going show you guys, pretty funny. We have label nodes right? And we've got label base and label. Then we have renderable nodes, which has a simple label. Like is that not a label node? And if you click into it, it actually seems to just be a label. They say it is more performant, but they use the same exact screenshot. So I don't know. Little things like that that you might run into, you're like what the heck. But the really important ones to focus on I think are a layout group. This is a super useful layout element that you can kind of stack things horizontally or vertically. And I'm to show some examples of this in a little bit. And then I would say the powerhouse of your Roku application falls into these list and grid nodes. They have a handful of polished controls where they kind of handle this for you. Like this is a label list. And so kind of like a menu, You can kind of go up and down and click stuff. Like this one they scrolled down one and so drama kind of fell into underneath. Another really, really good one, my personal favorite that I think is kind of the keystone for building applications is row lists. You can start displaying rows of content and generate them all from SceneGraph that way. And then there's a couple other like they have a poster node that's basically used for images and whatnot. Lots of cool stuff in here and I would say like get in here, poke around as you need stuff. Like once you start figuring stuff out, it'll start to click together a little more. And so it'll jump back. Cool. And so kind of to rehash what we just talked about. There's some focus points here and we've got poster label, layout group and the list nodes which we kind of talked about. All of your content will be supplied through content nodes. And those are just XML elements that hold information. And all of those list elements like row list, markup list, label list, they all take content nodes and they handle them in their own way a little differently. So like for instance actually I will get into a little later. But basically the point of SceneGraph is it's an XML language and when you combine SceneGraph with Lava that's where the magic happens. And you can start really, really dynamically generating stuff and it's probably a redundant slide. But let's jump in. And so for example we have a row list, right? And that's the Roku control. It has one row. We define the size, the spacing, whether or not we want to show the labels or not. And then on line six we're using an entity command to fetch our content channel items which is a very popular pattern for structuring TV apps. And then we're going go through and we're going to generate these content nodes and we're going to set the HD poster URL, which you can find in their documentation. They're a long list of supported properties for nodes, which sets the image of that node. So you'll kind of see that row list that we saw had the images stacked horizontally. That's where that image comes from. And talking more about images. You need to kind of be wary when you specify images because Roku expects you to specify two resolutions. So you need to provide full HD and that's nineteen twenty by ten eighty and that's kind of your full high resolution image. And you also need to provide high definition. They recommend it. They don't say that you need to do that but if you don't do that your images might start getting scaled a little weird and kind of look wrong. So just kind of keep that in mind as you go through. This also applies to when you're actually designing your application. So when you're setting item widths and stuff. You want to design as if every application is full HD. And Roku under the hood will scale stuff down if a device does not support that. And so that's pretty cool that they do that. But just keep in mind you'll probably have to have two images for each content channel item in your Roku apps or however you're displaying that data. Cool. And this is let me go back. We've talked about displaying stuff. We've talked about kind of what you expect in images and getting stuff on the screen. But let's talk about like you need to interact with those objects and then play videos and do a bunch of cool stuff. And that's where commands come into play. And these are where we went under the hood and wrote in Brightscript a bunch of powerful tools for you guys to use. I'm going to jump in, I'm going kind of walk through all of the ones that we have available for you. And so first and foremost you can execute multiple commands at a time but say a media command. For instance play video, that's a very popular command. I mean it's pretty straightforward what that does and it's definitely an essential for a Roku application. You need be able to watch videos. And it takes all interactions and stuff that Apple TV does, that mobile does, that web does. So something really, really cool about Raw is I could start watching a video on my laptop, get in my car as a passenger and watch it on the way somewhere, get home, plug in my Roku TV, and finish exactly where I left off. And it tracks all of that so you can see like, oh hey, stopped here, continued here, he rewinded fifteen seconds here. It's really, really powerful and dynamic that way and you can kind of see heat maps of watch, of what's getting watched. So that's super cool. We also have the same similar concept for play audio. So you just do straight audio as opposed to videos. Let's jump into personal commands. So these are just log in and log out essentially. And before we finish we're going to get a more polished like hey here's how you build a login flow in your Roku app. But similar to Apple TV you'll pass in all these parameters and you'll go to your login page and there'll be a QR code that pops up on the screen that says like hey scan to log in. You scan that QR code, log in, enter the code that connects it to your TV. The Roku app will refresh and you're completely logged in. It's pretty cool, pretty powerful, very similar and you guys might be used to that from Apple TV. Striking the same tune. We also have log out. Sweet. And utility commands, not a ton here. We'll definitely hope to get more in the future. But for now you can just set the context of the application. And this just is for the duration of the application is awake. So I press this button and let's say I want to view from a different campus context. You can kind of access that in Lava in the future. So or not in the future, now you can. But you can set the campus context and then use that throughout your application to kind of display personalized stuff. And then the most important one is navigation commands. And this is how you take a Roku screen and I press a button and I want to go to a new page. Push page pushes a page on top of the stack. So I push a page and I press the back button I'll go back to the previous page that I was on. It's pretty cool. And you just pass in the page GUID and it kind of does the rest. It has really extensive page caching options much like the Apple TV has. I'm not going to get super in the weeds on those but very cool. And then similar but a little different is replace page. And that takes the page that you're on and it doesn't push on top of it and says it replaces it. So if there's no page behind, the back button is going take you out of the application. Or it will go to the previous page that was before. You can pop a page which is just the same as pressing the back button. It's like hey, take me to the previous page that I was on. And you can also clear the entire navigation stack which basically says hey, I want to go back to the very root page that I was on in the Roku application. So for those who are in Apple TV this is probably all very familiar to you. For those who are getting started it might seem like a bit daunting at first. But once you start playing with it and you see how easy it is, I think that it clicks very quickly. Sweet. So Roku doesn't really have any built in focus management. Apple TV, they do such a great job of understanding the remote and where you're kind of heading. And if you're unfamiliar with what focus is, that's essentially like the item that you have highlighted. Like oh I have this whatever you're highlighted on with the remote. And you can go right, left, up, down, whatever. Roku doesn't really have that built in. They have it for some stuff. Like some components like the row list that we saw, they have the left and right built in. They have the up and down built in for that component. But they don't have any type of focus management from component to component. So you can have a layout with two buttons and the first one will get highlighted and you cannot get to the second one. And so we had to innovate a little bit on that and so we added a new kind of control that you can use called focus group. I'm going jump into the docs and show you guys that. Cool. So this actually extends the layout group that I was talking about earlier. So you can display stuff horizontally or vertically. And this control is pretty simple. It's like here's a horizontal focus group with buttons. So it automatically says, hey when I press right on the Roku remote I'm going go to the next element. When I press left I'm going go back. And when I press left again I'm going to go to the furthest right element. So you can kind of go back and forth that way. Same for vertical. It's like you go up and down, left and right. And it's a pretty simple control but it definitely saved us a lot of headache with dealing with focus. Oh and another thing is you'll see this a little bit later when I get into the pages but you need to set the initial focus. It has no concept of what should be focused first. Even if it's the first, it seems so obvious like hey, it's the top left. What do you mean? If you go to a page without setting the initial focus, you won't be able to do anything. Your remote will just be frozen. You're like, oh Okay, that's great. Sweet. And let's jump into some pages. Much like the mobile one, think I'm going way too fast. Sweet. So very similar to Apple TV, you'll kind of have this UI and I'm going to jump in and kind of show you around a little bit. Here you'll be able to set some generic Roku application settings. So like API key, name, description, some interaction settings, and the login page. And when you jump into a page this is where all the magic happens. So you can see here I am setting the initial focus and this is the way to do that. And that is in our documentation as well, or it will be. And so we'll say, hey, no, I want to focus the menu first even though it's the only thing on the screen that could possibly be focused. You need to specify it. And so this is actually just straight out of this. And so this would display much like this. But this component does have built in focus. So the up and down they handle, it's their components. Cool. And let's talk about QR codes. I'm sure plenty of you are familiar but you can generate dynamic QR codes in Rock using your own Rock server. And by doing that you just take your URL and pass in get QR code, that little helper, and you can pass the data and link to whatever. We see these and are super, super useful in TV apps because there's a lot of things that aren't really practical to do from a TV application. So it makes more sense like hey scan it do this from your mobile device and then we can handle that and maybe display it in the TV app. Similar to the prayer request thing. Like, oh, scan a QR code so you can leave a prayer request but inside the TV app you can click the button that prays for prayer requests. Some tips and tricks is don't try to jump over the mountain. There's a mountain of stuff and a mountain of stuff to learn for Brightscripts in Roku and it's very complicated. Start small and like hey let's get some stuff on the screen and kind of figure out the pattern for displaying content. Draw inspiration from existing Roku apps. Try not to reinvent the wheel. They have pretty specific, a very specific feel to their applications. As you go from Roku app to Roku app they all kind of feel and look the same. There's a few exceptional ones like the Disney one. Oh my gosh that one's pretty awesome. But I would say try to draw inspiration and not try to reinvent the wheel when you're developing Roku apps. And dive into the Roku docs. As you need stuff and as you're trying to figure out stuff, that scene graph documentation, dive in and start digging around. And we have extra time I'll dig in a little bit more to that documentation and show you how I piece together, hey how do I actually use this and write this out in a way with Lava that's useful. What's next for Roku? A lot of this stuff is up to you guys. This is not necessarily set in stone. It's more based on hey if there's interest in Roku and people are building Roku apps frequently, we're going get in there and we're going start adding the same powerhouse tools that we did for Apple TV like Follow, Prayer and the Countdown, which isn't in Roku yet. This will be included. You can guarantee this and that's extended documentation. We kind of want to show you guys, hey, we want to map out how do you display data, how do you use Lava, and how do you get a login page working. And there's a lot of little things that I think are pretty difficult to get going on. So we want to help you guys. And then I want to pass some of that on to you guys if you guys start developing Roku apps is to get some recipes going. It's complicated and it's technical but if we can kind of come together as a community and start bringing some of that stuff in and posting recipes, hey I got this really polished Roku screen, here's how I did it and here's my lava for it and stuff like that. I think the more of that the better. I'm going to skip Q and A for now and I'm going to jump in and kind of show you guys. So most of the Roku documentation is BrightScript. They don't really show great examples of writing out SceneGraph. And so you kind of have to go in there and you have to get in the weeds a little bit and figure out what are they doing in Brightscript that I can now do without Brightscript. Rewrite it in SceneGraph without that framework. And so that's more just on their documentation. I think their pattern is to go Brightscript first and SceneGraph just kind of extends that. We're kind of swimming against the stream in that sense because we want everything to be SceneGraph and LOBA generated. So I'm going kind of walk through this. Here they're creating a content node which we've talked a lot about. They're setting that poster URL that we talked about on that content node. Setting the different resolutions for those posters. Setting descriptions. Some X, width height stuff. And then they're adding it to that list. And that's all they're really doing in this little Brightscripts snippet here. And you can see here they have their poster grid, which is one of their list elements. That doesn't have anything in it. Ours would look a little bit different. It'd be like poster grid content node, right? Because they created this content node in Brightscript, we're not going do that. We're to do that purely in scene graph. And you can kind of see that in my example from earlier where we were talking about this. We have kind of similar to that. Instead of writing out in Brightscript and saying hey, no create the content node with our script, we just want to write it out. We just want to be very verbose and write it out in XML. And the reason for that is as you can see that makes the lava really, really clean because you can just loop through and generate these XML nodes really, really easily and efficiently. But you do have to pay attention. I might have mentioned this already, but if you set the HD poster URL in the label list, it's not going to do anything because that list doesn't look for the HD poster URL. They all kind of handle their own way. And so definitely take some trial and error and experimentation in that sense. And geez, I have a problem with going way too fast. I'll be better next year, promise. And so I'm going open it up for questions.