$30 off During Our Annual Pro Sale. View Details »

tvOS Perks and Pitfalls

tvOS Perks and Pitfalls

In this talk Axel will discuss the first steps in the new tvOS environment. Sometimes it feels like a warm iOS blanket, othertimes you get these weird error messages and of course you have to deal with the necessary UX changes.

By Axel Roest. Original slides: http://www.slideshare.net/axelroest/tvos-perks-and-pitfalls

Powered by http://xebia.com

do{iOS} conference

November 09, 2015
Tweet

More Decks by do{iOS} conference

Other Decks in Programming

Transcript

  1. tvOS
    Perks and Pitfalls
    Axel Roest
    The App Academy
    do{iOS} 2015

    View Slide

  2. whoami

    View Slide

  3. whoami

    View Slide

  4. Happy
    We got one of the $1 dev. kits

    View Slide

  5. Happy
    We got one of the $1 dev. kits

    View Slide

  6. Fun

    View Slide

  7. images © ifixit
    Dual-core
    64-bit Apple A8 chip
    2 GB RAM
    32 or 64 GB Flash

    View Slide

  8. Rumours
    „Oh, it’s just web apps”

    View Slide

  9. 2
    different technologies

    View Slide

  10. TVML
    TVJS
    2
    different technologies
    iOS
    traditional
    code

    View Slide

  11. TVML
    TVJS
    2
    different technologies
    iOS
    traditional
    code

    View Slide

  12. Twofold opportunities
    • iOS devs can reuse their knowledge
    • web devs can reuse their js+xml knowledge

    View Slide

  13. 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!

    View Slide

  14. Anatomy of the
    Apple TV
    home screen

    View Slide

  15. top row
    TVContentItem
    TopShelf
    rest of apps

    View Slide

  16. top row
    TVContentItem
    TopShelf
    rest of apps

    View Slide

  17. top row
    TVContentItem
    TopShelf
    rest of apps
    in Focus

    View Slide

  18. View Slide

  19. View Slide

  20. un Focus ed

    View Slide

  21. un Focus ed

    View Slide

  22. Anatomy of an app
    Two targets:
    • TVTopShelfProvider ➔
    [TVContentItem]
    • Your App ➔

    View Slide

  23. Anatomy of an app
    Two targets:
    • TVTopShelfProvider ➔
    [TVContentItem]
    • Your App ➔

    View Slide

  24. tvOS

    View Slide

  25. diff iOS tvOS
    • No persistent storage ➔ iCloud only
    • 200 MB limit ➔ on-demand resources
    • Focus Engine
    • No specific iOS frameworks

    View Slide

  26. diff iOS tvOS
    • No persistent storage ➔ iCloud only
    • 200 MB limit ➔ on-demand resources
    • Focus Engine
    • No specific iOS frameworks

    Contacts
    HealthKit
    CoreMotion
    Accounts

    View Slide

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

    View Slide

  28. Weirdly missing
    • HomeKit
    • MapKit
    • ReplayKit
    • VideoToolbox

    View Slide

  29. Weirdly missing
    • HomeKit
    • MapKit
    • ReplayKit
    • VideoToolbox

    View Slide

  30. why no Webkit?

    View Slide

  31. WebKit Alternatives
    • Create your own layoutengine (NetNewsWire)
    • Hack it for your own personal use

    https://github.com/jvanakker/tvOSBrowser

    View Slide

  32. code is easy
    • Add a tvos target
    • Add new UIViewControllers
    • Run

    View Slide

  33. ux redesign
    • UX is a whole new ballgame
    • Rethink interaction
    • No touch screen: less typing
    • new layered icons

    View Slide

  34. ux redesign
    • UX is a whole new ballgame
    • Rethink interaction
    • No touch screen: less typing
    • new layered icons

    View Slide

  35. Parallax Previewer

    View Slide

  36. Parallax Previewer

    View Slide

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

    View Slide

  38. Gotchas w.r.t. icons
    you need 3 icon layers!
    no transparency in back layer

    View Slide

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

    View Slide

  40. TVJS
    TVML

    View Slide

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

    View Slide

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

    View Slide

  43. View Slide

  44. but wait!
    You can also put TVML applications
    inside UIViewControllers!

    View Slide

  45. pitfalls

    View Slide

  46. Remember to buy
    yet another USB cable

    View Slide

  47. Remote
    Simulator remote works,
    but not really well
    (But you can connect the Siri remote to the simulator!)

    View Slide

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

    View Slide

  49. No local storage (!)
    apart from NSUserDefaults
    ➔ iCloud KVS (< 1MB) and CloudKit
    ➔ On-Demand Resources

    View Slide

  50. Asset placement
    and ease of use
    no handy keyboard

    View Slide

  51. View Slide

  52. perks

    View Slide

  53. perks
    • iOS app ➔ tvOS
    • online content ➔ TVML + TVJS

    View Slide

  54. So many toys, so little time

    View Slide

  55. The end
    [email protected] • @axello

    View Slide