TVML apps on the Apple TV allow developers to build limited single page apps using templates and JavaScript. TVML apps are served from a developer's server as XML (TVML) or JavaScript (TVJS) and include a subset of DOM and JavaScript APIs supported by tvOS. While options are limited compared to full web views, TVMLKit provides an easy way to get media and content onto the Apple TV.

1. TVML apps on
the !

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

4. Kisko TV
Coming soon…

5. Hobby
projects

6. Beer Styles
The 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

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

10. There’s a new
Apple TV
You may have heard of it…

11. Developer Kits
You may have received an Apple
TV developer kit…

12. “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

13. Whoops
Apple 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

14. Shipping now(ish)

15. 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/

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

17. Not all kinds of apps, but apps nonetheless…

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

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

20. Looks pretty familiar…

21. You’ll need some native code
//
// AppDelegate.swift
//
import UIKit
import TVMLKit
@UIApplicationMain
class 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
}
}

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

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

24. TVJS4
It’s JavaScript
App.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

25. CoffeeScript
But 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)

26. There’s a DOM and XMLHttpRequest
It should feel pretty familiar to any web developer.
→ There is a document object
→ There isn’t a window object

27. Can I use JS libraries?
Yes. As long as they work with the subset of the
DOM/JavaScript APIs that tvOS implements.

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

29. Inspector
You can use the Safari developer
tools for debugging

30. It’s pretty limited
If you’re not building an app that’s primarily a media
consumption app, it’s probably the wrong choice.

31. “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

32. alertTemplate

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

35. catalogTemplate

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

38. And a bunch
of others

41. Media centric
All the templates are very much geared towards
media consumption…

51. !

52. Aside: divTemplate
There is a divTemplate

53. Aside: divTemplate
If 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!

54. Styles
And there are limited options for styling the
templates

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

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

57. My pet theory
→ To prevent terrible web player wrappers
→ An easy path onto tvOS
→ It was already there

58. The really important news!

59. !"#$ New emoji in iOS 9.1!

60. Questions?

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

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

63. Links to all the things: matiaskorhonen.fi