Lviv MD Day 2015 Олексій Озун "Introduction to the new Apple TV and TVos"

1. Introduction to the
new Apple TV and tvOS
Skype : alex.ozun
e-mail: alex.ozun@gmail.com
Oleksii Ozun
iOS Developer

2. • Platform overview
• Client-Server vs Traditional Apps
• Parallax effect
• Platform limitations
• Demo
tv Agenda

3. tv
Platform overview

4. • 64-bit dual-core A8 chip
• 2GB RAM
• 32GB or 64GB of storage
• 1080p resolution
• HDMI 1.42
• USB-C
149$
32GB
199$
64GB
tv Specs

5. Touch surface Accelerometer
Gyroscope
Menu Home
Siri
Play/Pause
Volume
tv Siri remote

6. tv 3rd party remotes
Babushka remotesSteelSeries Nimbus

7. tv
Client-Server vs Traditional
apps

8. Accelerate
AudioToolbox
AudioUnit
AVFoundation
AVKit
CFNetwork
CloudKit
CoreBluetooth
CoreData
CoreFoundation
CoreGraphics
CoreImage
CoreLocation
CoreMedia
ModelIO
OpenGLES
SceneKit
Security
simd
SpriteKit
StoreKit
Swift Standard Library
SystemConfiguration
UIKit
CoreSpotlight
CoreText
CoreVideo
Darwin
GameKit
GameplayKit
GLKit
ImageIO
MachO
MediaAccessibility
MediaPlayer
MediaToolbox
Metal
MetalKit
MetalPerformanceShader
MobileCoreServices
Foundation
GameController
tv Traditional apps
Good Old iOS Frameworks

9. tv
I know how to program Apple TV!
Traditional apps

10. tv Client-Server apps
Your App’s business logic,
layouts and data live on a
remote server

11. tv Client-Server apps
Your App’s business logic,
layouts and data live on a
remote server
While Xcode project’s
binary is just an entry
point

12. tv Client-Server apps
TVML - Apple’s Television Markup Language. Provides a set of
pre-designed templates for creating layouts for pages.
TVJS - JavaScript framework. Provides a set of APIs for creating
client-server app.
TVMLKit - Obj-C/Swift framework. Glues TVML and TVJS files to
your Xcode project’s binary.
TV Services - Obj-C/Swift framework. Used to provide a tvOS
with content of your app in a way that tvOS could display it to
user.

13. tv Client-Server apps
TVML - Apple’s Television Markup Language. Provides a set of
pre-designed templates for creating layouts for pages.
TVJS - JavaScript framework. Provides a set of APIs for creating
client-server app.
TVMLKit - Obj-C/Swift framework. Glues TVML and TVJS files to
your Xcode project’s binary.
TV Services - Obj-C/Swift framework. Used to provide a tvOS
with content of your app in a way that tvOS could display it to
user.

14. tv Client-Server apps
TVML - Apple’s Television Markup Language. Provides a set of
pre-designed templates for creating layouts for pages.
TVJS - JavaScript framework. Provides a set of APIs for creating
client-server app.
TVMLKit - Obj-C/Swift framework. Glues TVML and TVJS files to
your Xcode project’s binary.
TV Services - Obj-C/Swift framework. Used to provide a tvOS
with content of your app in a way that tvOS could display it to
user.

15. tv Client-Server apps
TVML - Apple’s Television Markup Language. Provides a set of
pre-designed templates for creating layouts for pages.
TVJS - JavaScript framework. Provides a set of APIs for creating
client-server app.
TVMLKit - Obj-C/Swift framework. Glues TVML and TVJS files to
your Xcode project’s binary.
TV Services - Obj-C/Swift framework. Used to provide a tvOS
with content of your app in a way that tvOS could display it to
user.

16. tv Client-Server apps
After your app has been launched by TVMLKit, it is
javascript that drives pages flow

17. tv Client side
TVApplicationControllerContext - provides launch
information to the TV application controller
TVApplicationController - establishes the JavaScript
environment and provides a centralized point of control
and coordination between the JavaScript environment
and tvOS

18. tv Client side
TVApplicationControllerContext
TVApplicationControllerContext *appControllerContext =
[TVApplicationControllerContext new];
appControllerContext.javaScriptApplicationURL =
[[NSURL alloc] initWithString:@«http://localhost:9001/app.js"];
appControllerContext.launchOptions = @{@"BASEURL": @"http://localhost:
9001/"};

19. tv Client side
TVApplicationController
TVApplicationController *appController =
[[TVApplicationController alloc] initWithContext:appControllerContext
window:self.window
delegate:self];
@property (nonatomic, readonly) UINavigationController
*navigationController;

20. tv Server side
App.onLaunch = function (options) {
var resourceLoader = new ResourceLoader();
resourceLoader.loadResource(`Index.xml.js`, function(resource) {
var doc = Presenter.makeDocument(resource);
navigationDocument.pushDocument(doc);
});
App class - provides access to and a means to respond to
app life cycle events
main.js
App.onError
App.onExit
}

21. tv Server side
NavigationDocument class - provides functions that you use
to control the document stack that holds the individual TVML
documents for a client-server app
main.js
navigationDocument.pushDocument(document)
navigationDocument.popDocument(document)
navigationDocument.replaceDocument(document)
navigationDocument.presentModal(document)

22. tv TVML template example
<alertTemplate>
<title>Title</title>
<description>Description</description>
<button>
<text>Button</text>
</button>
</alertTemplate>
Alert view template

23. tv TVML template example
Catalog page template
<catalogTemplate>
<banner>
<title>Title</title>
</banner>
<list>
<section>
<listItemLockup>
…
</listItemLockup>
<listItemLockup>
…
</listItemLockup>
</section>
</list>
</catalogTemplate>

24. tv Parallax images

25. tv Parallax images
Parallax effect is a key design element in tvOS

26. tv Parallax images
How to create one
• Install Parallax Exporter plug-in for Photoshop
• Download Apple-provided template
• Create layered image and export it as .lsr
• Drag it to Xcode image assets
OR
• Drag few .png to Xcode to serve as image layers

27. tv Parallax images
How to create one at runtime
If your app retrieves layered images from a content server at
runtime, you must provide those images in runtime layered
image .lcr format. You don’t create runtime layered images
directly; you generate them from .lsr or Photoshop files
using the layerutool command-line tool that’s
installed with Xcode

28. tv Platform limitations
• No persistent local storage for your apps
• App size limit is 200 MB
• No 4K

29. Lets get to the Demo!

30. Links
https://developer.apple.com/library/prerelease/tvos/documentation/TVServices/
Reference/TVServices_Ref/index.html
https://developer.apple.com/library/prerelease/tvos/documentation/TVMLKit/
Reference/TVMLKit_Collection/index.html
https://developer.apple.com/library/prerelease/tvos/documentation/
LanguagesUtilities/Conceptual/ATV_Template_Guide/index.html
https://developer.apple.com/library/prerelease/tvos/documentation/TVMLJS/
Reference/TVJSFrameworkReference/index.html