tvOSPerks and Pitfalls

Axel Roest The App Academy

do{iOS} 2015

whoami

whoami

Happy We got one of the $1 dev. kits

Happy We got one of the $1 dev. kits

Fun

images © ifixit

Dual-core 64-bit Apple A8 chip

2 GB RAM 32 or 64 GB Flash

Rumours„Oh, it’s just web apps”

2different technologies

TVML TVJS2different technologies

iOS traditional

code

TVML TVJS2different technologies

iOS traditional

code

Twofold opportunities

• iOS devs can reuse their knowledge

• web devs can reuse their js+xml knowledge

Twofold opportunities

• iOS devs can reuse their knowledge

• web devs can reuse their js+xml knowledge

Shhhh! Please don’t tell

your web friends this!

Anatomy of the Apple TV

home screen

top row

TVContentItemTopShelf

rest of apps

top row

TVContentItemTopShelf

rest of apps

top row

TVContentItemTopShelf

rest of appsin Focus

un Focus ed

un Focus ed

Anatomy of an app

Two targets:

• TVTopShelfProvider ➔ [TVContentItem]

• Your App ➔

Anatomy of an app

Two targets:

• TVTopShelfProvider ➔ [TVContentItem]

• Your App ➔

tvOS

diff iOS tvOS

• No persistent storage ➔ iCloud only

• 200 MB limit ➔ on-demand resources

• Focus Engine

• No specific iOS frameworks

diff iOS tvOS

• No persistent storage ➔ iCloud only

• 200 MB limit ➔ on-demand resources

• Focus Engine

• No specific iOS frameworks

– Contacts HealthKit

CoreMotion Accounts

diff iOS tvOS

• No persistent storage ➔ iCloud only

• 200 MB limit ➔ on-demand resources

• Focus Engine

• No specific iOS frameworks

– Contacts HealthKit

CoreMotion Accounts

+ TVServices

TVMLKit

Weirdly missing

• HomeKit

• MapKit

• ReplayKit

• VideoToolbox

Weirdly missing

• HomeKit

• MapKit

• ReplayKit

• VideoToolbox

why no Webkit?

WebKit Alternatives

• Create your own layoutengine (NetNewsWire)

• Hack it for your own personal use https://github.com/jvanakker/tvOSBrowser

code is easy

• Add a tvos target

• Add new UIViewControllers

• Run

ux redesign

• UX is a whole new ballgame

• Rethink interaction

• No touch screen: less typing

• new layered icons

ux redesign

• UX is a whole new ballgame

• Rethink interaction

• No touch screen: less typing

• new layered icons

Parallax Previewer

Parallax Previewer

• Difference LSR and LCR files

• Creating in Xcode: drag & export

• create LCR file using layerutil, which converts LSR to LCR.

• LCRs can be used within UIImageviews

• unfortunately, no reverse version of layerutil yet

Gotchas w.r.t. iconsyou need 3 icon layers!

no transparency in back layer

Gotchas w.r.t. icons

Large-AppIconScratch-.xcassets: The last image stack layer with content, "Back", must be a fully opaque bitmap. The pixel at position (602, 475) has an alpha value of 26.

Xcode compiler error:

you need 3 icon layers! no transparency in back layer

TVJS TVML

TVML app• Client-Server

• Written in ‘TVJS’, a javascript framework

• AppDelegate contains URL

• start TVApplicationController

• Use standard web techniques for deployment, analytics, A/B testing etc.

TVML

• you can now totally change an app after you went through the app approval phase.

• ideal for existing web based content

• Tons of standard TVML templates for e.g. alerts, lists, photo stacks

but wait!

You can also put TVML applications

inside UIViewControllers!

pitfalls

Remember to buy

yet another USB cable

Remote

Simulator remote works, but not really well

(But you can connect the Siri remote to the simulator!)

Really easy to test TVML app

python server

however (due to caching?): for each new js tweak you need to reload the app from Xcode. Killing it doesn’t seem to work

No local storage (!)apart from NSUserDefaults

➔ iCloud KVS (< 1MB) and CloudKit

➔ On-Demand Resources

Asset placementand ease of use

no handy keyboard

perks

perks

• iOS app ➔ tvOS

• online content ➔ TVML + TVJS

So many toys, so little time

The end

axel@theappacademy.nl • @axello