tvml apps on the apple tv

TVML apps on the !

Hi, I’m Matt. I mostly build things on the web, but also for iOS and now tvOS. I work at Kisko Labs.

(and maybe for OS X in the near future)→ matiaskorhonen.fi

→ Twitter: @matiaskorhonen→ Blog: randomerrata.com

Kisko TV

Coming soon…

Hobby projects

Beer StylesThe 2015 and 2008 beer, cider, and mead style

guidelines from the Beer Judge Certification Program.The style guidelines describe what each style of

beer, cider, and mead should taste, look, and smell like.

beerstyles.co

Piranhas (for iOS)Save money by comparing book prices between

Amazon stores, the Book Depository, and Wordery. Available on iOS and the web.

piranhas.co

There’s a new Apple TV

You may have heard of it…

Developer KitsYou may have received an Apple

TV developer kit…

“Prior to Apple’s commercial release of Apple TV, you agree not to publicly write about, review, or

display the Apple TV Developer Kit.”— Apple TV dev kit NDA

WhoopsApple Bans iFixit Developer Account and Removes

App After Apple TV Teardown— MacRumors / iFixit blog1

1 macrumors.com/2015/09/30/apple-bans-ifixit-developer-account-apple-tv

Shipping now(ish)

Web stuff on the Apple TV

You may have heard that there’s no UIWebView or WKWebView on the

Apple TV.There isn’t.2

2 developer.apple.com/library/prerelease/tvos/releasenotes/General/tvOS90APIDiffs/

Regardless of this, there is an Apple sanctioned way to create apps using web tech

Not all kinds of apps, but apps nonetheless…

TVMLKit

https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/YourFirstAppleTVApp.html

TVMLKit

https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/YourFirstAppleTVApp.html

Looks pretty familiar…

You’ll need some native code//// AppDelegate.swift//

import UIKitimport TVMLKit

@UIApplicationMainclass AppDelegate: UIResponder, UIApplicationDelegate, TVApplicationControllerDelegate {

var window: UIWindow? var appController: TVApplicationController? let baseURL = "http://localhost:8000"

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { window = UIWindow(frame: UIScreen.mainScreen().bounds)

let context = TVApplicationControllerContext() let javaScriptURL = NSURL(string: "\(baseURL)/javascripts/application.js")!

context.javaScriptApplicationURL = javaScriptURL context.launchOptions["BASEURL"] = baseURL

appController = TVApplicationController(context: context, window: window, delegate: self) return true }

}

Yeah, that’s it.Everything else is served from your server as XML

(TVML) or JavaScript (TVJS)

Could you put everything in the app bundle? Maybe.

TVML3

It’s XML<?xml version="1.0" encoding="UTF-8" ?><document> <alertTemplate> <title>Hello World!</title> <description>Or “hello HelsinkiOS” or whatever.</description> </alertTemplate></document>

3 https://developer.apple.com/library/prerelease/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/index.html#//apple_ref/doc/uid/

TP40015064

TVJS4

It’s JavaScriptApp.onLaunch = function(options) { var alertDoc, alertString, parser; alertString = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n" + "<document>\n<alertTemplate>\n" + "<title>" + title + "</title>\n" + "<description>" + description + "</description>\n" + "</alertTemplate>\n</document>"; parser = new DOMParser; alertDoc = parser.parseFromString(alertString, "application/xml"); return navigationDocument.presentModal(alertDoc);};

4 https://developer.apple.com/library/prerelease/tvos/documentation/TVMLJS/Reference/TVJSFrameworkReference/index.html

CoffeeScriptBut at least nothing stops you from using

CoffeeScript if it makes you happier… It makes me happier.

App.onLaunch = (options) -> alertString = """<?xml version="1.0" encoding="UTF-8" ?> <document> <alertTemplate> <title>#{title}</title> <description>#{description}</description> </alertTemplate> </document> """ parser = new DOMParser alertDoc = parser.parseFromString(alertString, "application/xml") navigationDocument.presentModal(alertDoc)

There’s a DOM and XMLHttpRequestIt should feel pretty familiar to any web developer.

→ There is a document object→ There isn’t a window object

Can I use JS libraries?Yes. As long as they work with the subset of the

DOM/JavaScript APIs that tvOS implements.

Can I use jQuery?No, at least not out of the box.

For one thing it tries to call document.createElement, which doesn’t exist on tvOS.

InspectorYou can use the Safari developer

tools for debugging

It’s pretty limitedIf you’re not building an app that’s primarily a media

consumption app, it’s probably the wrong choice.

“Built-in” templates

There are a number of ready templates you can use5

5 https://developer.apple.com/library/prerelease/tvos/documentation/LanguagesUtilities/Conceptual/

ATV_Template_Guide/TextboxTemplate.html

alertTemplate

alertTemplate<alertTemplate> <title>…</title> <description>…</description> <button> <text>…</text> </button> <text>…</text></alertTemplate>

catalogTemplate

catalogTemplate<catalogTemplate> <banner> <title>…</title> </banner> <list> <section> <listItemLockup> … </listItemLockup> </section> <section> <header> … </header> <listItemLockup> … </listItemLockup> </section> </list></catalogTemplate>

And a bunch of others

Media centricAll the templates are very much geared towards

media consumption…

!

Aside: divTemplateThere is a divTemplate

Aside: divTemplateIf you are crazy, I’m think you could try to build a

sort of terrible canvas with JavaScript and 2,073,600 (=1920×1080) divTemplate tags.

If you do this let me know how the Apple TV likes having ~2 million elements on screen!

StylesAnd there are limited options for styling the

templates

It its very essence, TVMLKit let you build limited Single Page Apps for tvOS. If you want to get a bunch of videos or images onto the Apple TV, this is a great,

low effort way to get that done.

Why is TVMLKit on the Apple TV but actual web views aren’t?

My pet theory→ To prevent terrible web player wrappers

→ An easy path onto tvOS→ It was already there

The really important news!

!"#$ ⬅ New emoji in iOS 9.1!

Questions?

Footnotes→ TVML tutorial: tinyurl.com/TVMLtutorial→ This presentation: tinyurl.com/TVMLapps

Further footnotes→ Beer Styles: free in the App Store

→ Piranhas: free in the App Store or the web→ Kisko TV: in the App Store soon

Links to all the things: matiaskorhonen.fi