tvml apps on the apple tv

Download TVML apps on the Apple TV

Post on 12-Jan-2017




0 download

Embed Size (px)


  • TVML apps on the !

  • Hi, Im 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)

    Twitter: @matiaskorhonen Blog:


  • 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.

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

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

  • Theres a new Apple TV

    You may have heard of it

  • Developer KitsYou may have received an Apple

    TV developer kit

  • Prior to Apples 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


  • Shipping now(ish)

  • Web stuff on the Apple TV

    You may have heard that theres no UIWebView or WKWebView on the

    Apple TV.There isnt.2


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

  • Not all kinds of apps, but apps nonetheless

  • TVMLKit

  • TVMLKit

  • Looks pretty familiar

  • Youll 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, thats it.Everything else is served from your server as XML

    (TVML) or JavaScript (TVJS)

    Could you put everything in the app bundle? Maybe.

  • TVML3

    Its XML

    Hello World! Or hello HelsinkiOS or whatever.



  • TVJS4

    Its JavaScriptApp.onLaunch = function(options) { var alertDoc, alertString, parser; alertString = "\n" + "\n\n" + "" + title + "\n" + "" + description + "\n" + "\n"; parser = new DOMParser; alertDoc = parser.parseFromString(alertString, "application/xml"); return navigationDocument.presentModal(alertDoc);};


  • CoffeeScriptBut at least nothing stops you from using

    CoffeeScript if it makes you happier It makes me happier.

    App.onLaunch = (options) -> alertString = """ #{title} #{description} """ parser = new DOMParser alertDoc = parser.parseFromString(alertString, "application/xml") navigationDocument.presentModal(alertDoc)

  • Theres a DOM and XMLHttpRequestIt should feel pretty familiar to any web developer.

    There is a document object There isnt 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 doesnt exist on tvOS.

  • InspectorYou can use the Safari developer

    tools for debugging

  • Its pretty limitedIf youre not building an app thats primarily a media

    consumption app, its probably the wrong choice.

  • Built-in templates

    There are a number of ready templates you can use5



  • alertTemplate

  • alertTemplate

  • catalogTemplate

  • 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, Im think you could try to build a

    sort of terrible canvas with JavaScript and 2,073,600 (=19201080) 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


  • 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 arent?

  • 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: This presentation:

  • 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: