 about myself. My name is Tan. I am currently an iOS developer at BeppuTan BT. So to find more information about me, you can visit my LinkedIn homepage. And if you have any questions, please don't hesitate to send a message to my Gmail. So for us here, we are engineering and our mission is to bring the best experience to customers. But because the resource we have is limited, hence whenever we want to implement anything, we always need to consider between the cost and the profit it can bring to us. So today in my presentation, I would like to share with you one solution which doesn't cost you too much, but can help your service reach out to a lot of more users. And you know, the more users, the more profitable. And the topic I want to bring to you today is about developing for Apple TV. For the agenda, I want to break my talk into three separate sections. First is about Apple TV and TVOS, and then we will give you some fundamental things when we work with Apple TV. And finally, I will show you how things work in reality with a real demo. So okay, let's restart with Apple TV and TVOS overview. Apple TV is a digital media player device. It can collect data from internet. Introduce it for viewing. You have to connect it with TV via HDMI cable. So on the screen I have the latest Apple TV, the Apple TV 4K. And then next to it is a Siri remote, which you need to use to control the Apple TV. Furthermore, you also can use your iPhone to communicate with Apple TV. I think it's something very awesome for Apple. Everything can be compatible together perfectly. So I have a little fun fact about Apple TV. You know, even though Apple TV only have five models, but it's actually older than the iPhone. The first Apple TV was launched in 2006 and interestingly at this time is still run on Mac OS. Until 2010, Apple redesigned the Apple TV and make the second generation run on TVOS 9, which they set up 95% based on iOS 9. You know, originally I thought that Apple TV is only applicable for video or gaming app. But in fact, there are many more kinds of apps on Apple TV further than that. For example, do you think that you can book a hotel for the TV? Yes, yes, because Airbnb gives you that option. So actually I think for me some situation Apple TV would be a better solution than the iPhone. Because for example, imagine that we are planning for a vacation with our family. It's better we can sit down and book the hotel together, right? In this case, Apple TV would be a better solution for the discussion because everyone can see the hotel picture on the shared TV and with the big picture, it also looks more attractive and make you more desire to book the hotel. So compared with their rival, it doesn't have an Apple TV app. They are losing this huge number of users. And this idea be a lot of other services also support for Apple TV. First of all, on the screen I have Amazon and e-commerce service. They also allow you shopping online through Apple TV. Or Tinder or social network application is another example. Such as Apple TV apps are very diverse, not only for video or gaming. Therefore, I think you can also find ways to implement your own one. In my perspective, I think creativity has no limit. As long as you intend to have one, you could find a way to do it. And here I have a charge for Apple TV turnover from 2012 to 2017. Apparently Apple TV is growing up very fast. Like in 2012, there are 4.2 million devices has been sold. And that number has increased by 6 times to 25 million after 3 years. And in 2017, it reached 75 million, which is 3 times better than in 2015. So actually, I can say that 75 million is a very huge number because Apple TV is not an individual device. Usually we only have one per family. And you know, right after 75 million, Apple TV is a second large tip of off-thrive in the world. This is very impressive, right? And you can keep in mind that people who willingly spend money to buy Apple TV for entertainment, they are very potential to buy for your service as well. So I think if you want to expand the market, it's obviously a good solution for you. Okay, we'll continue with some fundamental things when working with Apple TV. So Apple provides to you two types of Apple TV app, and in general, we will make them in different ways. So the first is a custom app, which you develop similarly when you do on iOS. It is in the same framework and the same concept. You may already know about UIT, AutoLayout, or Storyboard. And the second one is Glide and Server app, which you need to use, TVML, TVGS, and TVMLT to make it. So okay, we'll explain for you these three abbreviations. TVML stands for Television Markup Language. This is a kind of XML and the kind of Markup Language. In the first slide, I will show you some examples about TVML. TVGS stands for Television JavaScript. This is a set of JavaScripts API which provides to you the means to display any app created by TVML. And TVML is a framework which helps you be able to communicate between TVOS native code and TVML JavaScript code. So how does a TVML Kit app work? So different with the custom app, the TVML Kit app is based on client-server architecture. So here the client will be the UIT-based app that runs on the TVOS device. And the server will host JavaScript files and media contents. So when the app loads, it will download JavaScript files, also set up JavaScript environment, and hand over the control to JavaScript. So once the control is handed over, JavaScript will be responsible to download any additional content that it needs to present with users. So to make it easier to make a TVML app, Apple provides dozens of TVML premade templates which you can choose to display information in a specific way. So I will give you some examples and I will start with a simple one first. So here on the screen, I have an image of the other view on Apple TV and next to it is a premade template diorama. I think it's not too hard for you to map between each element from the diorama to the one on the view. And here is how the TVML code looks like. I think if you have used any markup language before, such as XML or HTML, you could be very familiar with this format. And each view on this template code it just mapping one on one to an element from the diorama. And finally, after you've filled in with the data, you will have the view as expectation. And let me assure you that this is not a web browser. It's completely native. And we just done with the very simple one of TVML example. Here I have another one for a more complex layout. You can see it's the very long page and the layout is also very complicated. But Apple also give you a template for this. And here is how the template looks like. Again, it's very clear and easy to translate between each item from the diorama to the one on the view. And after all, I have a template code. So again, just based on this template code to key in any data you want to display and TVML kit will take care of the rest for you. You don't need to worry about the layout anymore. But TVML will do it for you. So I make a simple comparison between working with the custom map versus with TVML app. So for custom map, it will develop similarly what we do on iOS and using Swift or HTC. Whereas for TVML app, you need to use TVML, TV3S, and TVML kit with JavaScript. So the custom map will take you more effort for creating, but it is scalable in long term. And this is very suitable if your app has customizing design. On the other hand, TVML app will take you less effort at the beginning, but it's not so scalable in long term. And it's also appropriate if your app has a similar design with Apple template layout. So depending on your purpose, I think you will find the most suitable way to implement your Apple TV app. But for us, we have implemented our Apple TV app in both ways. And with our experience, I would recommend you to use the custom map instead. Because first, we already have an iOS project which has a lot of similar features that we may have on Apple TV. And by using custom map, you can reuse a lot of code that make us can maintain and scale both apps together. And secondly, if you choose TVML app, it will take you more time to grab up with TVML because this is a new concept. And for those who hasn't worked with JavaScript before, I think it will be also more time consuming to get used to it. And in my opinion, honestly, I'm much more comfortable to work on Swift more than on JavaScript. Because I got used to Swift or Authenticity when I worked with iOS. And also for Swift and Authenticity, I can easily use the breakpoint in Xcode. It's very useful when I want to debug. But on JavaScript, you don't have it. If you want to use breakpoint, it would be very hard to set it up. And also, one line on JavaScript is very long and very hard for us to observe the breakpoint. So therefore, I will continue with developing the custom Apple TV app on an existing iOS project. So our object is to build an Apple TV app with the least costs and assuming that we already have an iOS native project. Let's see what we can take advantage for TVOS. So basically for any iOS project, we can split it into four different layers. At the bottom, I have core framework and third-party libraries, which we use as an ingredient to make our own app. And then I have the next layer for our business logic. Generally, this layer is for the UI code. And in this layer, it will offer you some services we will use in apps like API service, payment service, deep-link handler, etc. And the top layer is a UI layer, it's particularly for UI code. So let's see with this structure what we can reuse for TVOS. So as I said before, because TVOS is very close to iOS, that's why most of the core framework and third-party libraries on iOS, they are also available on TVOS. For instance, I have IX with React Native, Alamo Fires with Glitches on, and many other awesome libraries that we are using every day on iOS, they all support for TVOS. So for the next layer, business logic layer, ideally, under the logic for both platforms, I think we should share together, because these makers can maintain and scale the business. We don't need to fix or change anything two times if this is the same. And for the top layer, the UI layer, actually we will not reuse much code in this layer, because iOS devices are very different to Apple TV devices. So the layout on iOS is also very different to TVOS. Hence we only need to reuse some of the base glass extension for example, if you have UI label extension or UI button extension, it's really the choice to share on the UI layer. So I really encourage you to isolate the business logic and the UI layer, because it will make our project become more structured, more organized, and more testable. So I have talked about the theory too much. I think now it's a help for me to show you a demo to see how it works in reality. So here I have prepared an iOS project. Let me quickly run it first to show the demo on iOS device. Okay, here I have a simple sample on iOS. One thing you see on the screen? Okay, thanks. So on the screen I have an iOS simulator and it has a very simple app. It just has 10 WWDC videos and when I click on any of them, it will just open the video player page. It has a scroll bar or you also can change the subtitle. Okay, this is a very simple one on iOS app. Let's quickly look at the project side to get the structure of the app. So here I have a folder which includes all of the resources I will use in app. Inside I already roofed all of the business logic classes in this folder. It's basically some model declaration or API or view model or data source. And the rest is just for app delegate to controller, collection view self, some storyboards. I also have another folder for a few unit tests that I have written. So my target right now is to build an Apple TV app on top of this project. To do that first I need to add the new target. So I just need to click on this plus button here and I select TVOS and then select single view app. So red next. So I will name it wwwc underscore TVOS to distinguish with the iOS one. So after I click on the finished button Xcode will automatically generate for me two new target here and two new folder here specifically for Apple TV. And if I click on the screen here there's also another alternative for me to select. So now I will try to run on Apple TV 4K simulator. I think for some of you guys here maybe the first time you see Apple TV simulator, right? And... Yeah, makes sense, right? And here is how it looks like. This is the Apple TV simulator. It's running on TVOS 12. So it is still empty because I didn't add anything into the Apple TV target. So let's try to add some injuries. As I said before, these need logic layer, this layer we should share between iOS and TVOS. That's why we move them out of the supporter and put in the same directory with iOS and TVOS. So now I will try to add them to Apple TV target by select on the term. So you open the sidebar here to add it, you just need to check on this top box. If you add to www.dc.score.tvos.get Now we will try to recompile again. Okay, it showed me an error, no search module, two details on. Which means that first the file was added into Apple TV target successfully. But it won't compile because I didn't add the dependency to TVOS. So now to add it, I just need to change a little bit here. Like, basically I just copy and paste this and change this to TVOS. This one also need to change to TVOS. And don't forget to change the test folder of the test target, sorry. But actually I'm not a fan of riveting a code like that. It makes us hard to maintain in the future. So instead I write a function for the share port. And instead of listing onto the library like this I can just use this. So imagine that in the future we have 10 or 20 libraries. You don't need to update the version one on one featuring each framework. So now we try to run port install. So after it runs successfully I will try to recompile the project again. Now it still throw me an error but this is a different one already. So which means the dependency we just recently added is successful. So the new error is because I don't have this video collection view self on Apple TV. So let me open the iOS one for you again. So here I have a class for video collection view self. But as I said, we will not share the UI on iOS and TVOS. That's why I will create another one for this. So I will add a new file. I just reduce the same name with this. Yeah, remember we only need to select one target here. So instead I have to prepare the code for this already. So basically it just has some UI elements and it have layout constants and also it will update the information when we have the view model. And I also need to update view controller as well to make it have something to work at the beginning. So as we quick show to you is just have data source declaration and collection view. And in viewDidLoad I will add the collection view into the view here. Also we will try to fetch some data at the beginning. So now we try to run again. So right now it not only can compile but it show the data for you already. It's quite simple, right? I didn't do much thing. I only need to declare some code for the UI just for the connection view and for the view controller. And now I already have the similar F which I already have on iOS. So it also has 10 video here and when I click on any of them it will bring the video player page for me. So in this page you also can like test the scope for yourself or if you want to change the subtitle it's also support for you. So very easy. So I just recently introduced you how easy it is to have an Apple TV app if you can have an iOS project with a very organized structure. But the current app only has 10 video. I actually prepare more data than that. The current app only fetch the first page of the JSON I prepared here. So now I will implement another new feature for evaluation. So to do that I just simply add the field line put in the data source. So my idea is very simple. When the connection view displays the cell which near the end I will try to fetch more data as long as we still have data to load. So now I will try to recompile again on Apple TV. Okay, now I will try to scrolling more on the right and you see it's not only show 10 for me anymore but is that a lot more. Until it cannot load more data it will keep loading and showing to you on the screen. So as I said before this class is a shared class featuring iOS and TVOS and I recently updated for TVOS which means it will have that new feature on iOS as well. So to demonstrate for you I will try to run it again on the iOS. Okay, now I will try to scrolling more down. Yeah, it show me more than 10 videos which means the code we recently add just only in one place but it affect in both place which mean in the future if you want to implement any feature you can just want to do it once so the logic code will be shared and you don't need to reimplement this on TVOS. For example we recently have the new feature like 3D VR that you need to update for all of the products, right? So to do it on the same way like that you don't need to re-combine you don't need to reimplement this in spectacular platform. So the last thing I want to share with you is about CSD actually it's very important because we are doing both platform in a single project we need to make sure that all of the change we made for a single project it won't break anything on the other platform. So here I have prepared a simple fast forward which inside I have a simple LAN test which we just run on the unit test that I have written. So to set it up for TVOS I can again just simply copy and paste from iOS I need to change it here and also here but again, repeating the code will make us not easy to maintain in the future so instead of listing the test LAN brighter then I will make you another option to do. So my idea is very simple so instead of you listing this particular platform for iOS and TVOS I just make them as the variable and I will take it from the array here because I already support for two platform run now, iOS and TVOS so for you if you want to support more platform for example watch OS or Mac OS or even Android you can just use this same format that it will automatically generate the LAN for you. So finally how to fire a LAN on TVOS basically when you want to run the LAN test here on iOS you can just run fast LAN sorry test right but actually this is the abbreviation because a fully one will be fast LAN iOS test but we declare the default platform as iOS that's why if we don't give the context for fast LAN it will pick the default one here to run the test so you can use this command to run on TVOS by run fast LAN TVOS test and if you implement the CI and you want to run both LAN in just single command I have another option here I create the global LAN here which the idea is also very simple it should pick each platform I put here and we will ask fast LAN to fire the LAN which the name will be similar with the one I put here then fast LAN will understand and will fire you put here for each platform so the last thing is that if you check the readme.md this file is automatically generated by fast LAN whenever you run any LAN it show me that under the available action I already have first is the test on which will run the test on both platform here and to fire this just run fast LAN test I also have a particular LAN for iOS and TVOS and to fire you can just run fast LAN IOS test or fast LAN TVOS test this is everything I want to show you in my demo so let's go back to the slide so to summarize to you I have three points what to highlight first Apple TV is a very potential market it keeps increasing 100% or 150% year after year and secondly Apple TV is adaptable which any kind of business not only for video or gaming and finally building and maintaining Apple TV app doesn't cost you too much especially if you already have an iOS project in fact making the custom Apple TV app will have you a chance to clean up the iOS project make it more organized, more structured and more testable so that's all I want to share with you today I think it's now time for anyone want to ask a question come on what is the most challenging thing that you have to do when you build a TVOS app actually because I built the TVOS app on top of the iOS one so we want to reuse a lot of code we want to reuse as much as possible because its makers can scale and maintain right so actually the current the own iOS one we are missing this string UI and logic code and it's not easy for us to split them out and make them reuse the logic code only I think this is the most challenging one when I face with when I work with Apple TV but on the other hand is give us make the project more organized and after that I also be able to write a lot of unit tests for the app so it's make it more reliable is the answer okay for you great great Eric, what do you have sorry, some of the he told us that the UI code is not usable entirely different but if you think that some of it could be you could use protocols or something like that just to you know use the same kind of thing so that it's more usable and yeah it's kind of be coupled that way that makes sense or is that practically not variable yeah actually I think yeah actually I think it makes sense so we also have kind of the protocol but it's basically for the action already for like the UI itself like just write a lot of protocol to set the size of the label on the size of the image on the color as well but you can have a protocol like when you type on this button right you can have the protocol to both of them go to the same logical so it will be a part of logical it will not be on the UI anymore so the layout will be very plain very simple just declare the view inside and how to interact with the user and that's all any video? okay I haven't tried snapkit but they said that React Native is available on tvOS but snapkit I haven't tried so yeah I think I will try and then maybe reply to you later alright very nice very nice presentation thank you