In iOS, it’s not easy for our developers to update something like the UI dynamically. We build new version and have to dive into the tedious review process of Apple app store. So there is hybrid app which leverage the web technical stack and web view component.

In tvOS, Apple introduced its own hybrid solution with client-server app. With the new TVMLKit framework, the native tvOS app will access a main Javascript file on our own server and display the pages in Television Markup Language (TVML). The architecture is shown below.

image From App Programming Guide for tvOS

Let’s get started to build a simple client-server app for Apple TV.

On the native side, create a Single View Application for tvOS.

new-project-template

Then let’s do some house cleaning. Please remove view controller header and implementation files, the main storyborad file, and the entry for ‘Main storyborad file base name’. Why? Because our UI and logic are all going to the remote Javascript and TVML pages.

It’s time to start building our native shell.

As the web content side, we need a web server to host our javascript files and pages. We use dropbox public folder to avoid setting up our own.

A simple local server in Node.js or python is also enough for this example. SimpleHTTPServer is good option which is started by command and replace port with real value you want.

python -m SimpleHTTPServer [port]

If you get error “App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure.”. The solution is to set Allow Arbitrary Loads (NSAllowsArbitraryLoads) of App Transport Security Settings (NSAppTransportSecurity) to YES in the Info.plist.

In the main Javascript file, set up a XMLHttpRequest to get TVML file and push the result to foreground after loading.

In the TVML page, we simply show an alert.

Please refer to TVJS Framework Reference and Apple TV Markup Language Reference.

Build and be patient.

Client-Server-Screenshot

The complete project is on GitHub.