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

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
    axel@theappacademy.nl • @axello
    

    View Slide