tvml apps on the apple tv
TRANSCRIPT
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