TVML + Native = Hybrid

Transcript

1. TVML + NATIVE = HYBRID 2015/12/21 @REALM MEETUP

2. PROFILE ▸ Toshihiro Suzuki ▸ @toshi0383 (Twitter/GitHub/Qiita/Hatena/Facebook/…) ▸ iOS/tvOS/Mac Developer

   ▸ iOS dev on NEXTSCAPE

3. PROFILE INDIVIDUAL DEVELOPMENT ▸ tagpicker for Qiita (iPad only) ▸

   JamNavi ▸ LGTM (for Mac)

4. PROFILE TOPICS ▸ ܧଓతϨʔγϯά׆ಈ ࣍ճ͸1/23@൧ೳ Ұॹʹߦ͖·͠ΐ ͏ http://continuous-racing.connpass.com/event/24200/ ▸ try!

   Swift ߦ͖·͢ ੠͔͚͍ͯͩ͘͞

5. TEXT ࠓ೔ͷൃදͷཁ໿

6. TEXT TVMLͱ͸ʁ ▸ ※౰೔આ໌ෆ଍Ͱ͢Έ·ͤΜɻͪ͜ΒࢀߟࢿྉͰ͢ɻ ▸ https://developer.apple.com/library/tvos/documentation/ LanguagesUtilities/Conceptual/ATV_Template_Guide/

7. BASIC TVML APP ARCHITECTURE YOUR APP(JS) CLIENT- SERVER 1. Give

   me the tvml ! 2. Here is your tvml ! www.your-server.com INDEX.XML.JS TVMLKIT 3. parse the xml and show UI !

8. YOU CAN CREATE BASIC UI BY TVML EXCEPT FOR …

   ▸ UIPageViewController ▸ complex UI How to combine those ?

9. AGENDA ▸ TVML + Native = Hybrid ▸ TVML without

   web-server ▸ Best Way to dynamically generate UI using TVML

10. TVML + NATIVE = HYBRID

11. HOW YOU DO THIS ? TVML NATIVE 1. NSLog(“hello”)

12. LAUNCHING NATIVE FROM TVML CONTEXT ▸ Inject objc block to

    the JavaScript Context (in appController(appController:evaluateAppJavaScriptInContext:) ▸ Call directly from JavaScript context (global scope)

13. HOW YOU DO THIS ? TVML NATIVE 1. callAPI(completion) 2.

    completion(data)

14. USE JSVALUE’S `CALLWITHARGUMENTS`

15. HOW TO LAUNCH NATIVE VIEWS FROM TVML ? TVML NATIVE

    TVML TVML TVML NATIVE

16. HOW TO LAUNCH NATIVE VIEWS FROM TVML ? ▸ Just

    inject a function like this. This is easy.

17. HOW TO LAUNCH TVML FROM NATIVE ? (LITTLE BIT DIFFICULT)

    TVML TVML NATIVE TVML NATIVE TVML

18. GETTING STARTED WITH TVML ▸ add TVApplicationControllerDelegate conformance to AppDelegate

    ▸ TVML app is launched automatically.

19. GETTING STARTED WITH TVML HYBRID ▸ add TVApplicationControllerDelegate conformance to

    AppDelegate ▸ TVML app is launched automatically. ▸ Note: This is your last chance to launch TVML context. ▸ which means, you cannot launch any other different TVML contexts . ▸ How can I present another TVML view from native context ?

20. TEXT HOW TO LAUNCH TVML FROM NATIVE ? ▸ implement

    a function like `openTemplate` ▸ call the function by `JSContext#evaluateScript:` ▸ make sure you launch TVML context at app launch

21. IMPLEMENT A FUNCTION `OPENTEMPLATE` PROGRAMATICALLY LOAD TVML VIEW

22. CALLING `OPENTEMPLATE` FUNCTION FROM NATIVE HOW TO LAUNCH TVML FROM

    NATIVE ?

23. HOW TO LAUNCH TVML FROM NATIVE ? ▸ e.g. Open

    TVML views from native menus

24. TIP: NAVIGATION STACK AFTER THE TRANSITION LIKE THIS TVML NATIVE

    NATIVE navigationController is shared TVML

25. TIP: RESETTING NAVIGATION STACK TVML NATIVE NATIVE navigationController.setViewControllers

26. AGENDA ▸ TVML + Native = Hybrid ▸ TVML without

    web-server ▸ Best Way to dynamically generate UI using TVML

27. BASIC TVML APP ARCHITECTURE YOUR APP(JS) CLIENT- SERVER 1. Give

    me the tvml ! 2. Here is your tvml ! www.your-server.com INDEX.XML.JS TVMLKIT 3. parse the xml and show UI !

28. BASIC TVML APP ARCHITECTURE YOUR APP(JS) CLIENT- SERVER 1. Give

    me the tvml ! 2. Here is your tvml ! www.your-server.com INDEX.XML.JS TVMLKIT 3. parse the xml and show UI ! CAN I EMBED INSIDE THE APP … ?

29. YES YOU CAN ! YOUR APP(JS) MAIN BUNDLE 1. Give

    me the tvml ! 2. Here is your tvml ! Refer by file:// protocol

30. AGENDA ▸ TVML + Native = Hybrid ▸ TVML without

    web-server ▸ Best Way to dynamically generate UI using TVML

31. BEST WAY TO DYNAMICALLY LAYOUT USING TVML ▸ Implement custom

    template language TVML … ? ▸ template language in Swift https://github.com/kylef/ Stencil ▸ Save xml to the file system and load it from js ? (error handling is gonna kill you)

32. BEST WAY TO DYNAMICALLY LAYOUT USING TVML ▸ Implement custom

    template language TVML … ? ▸ template language in Swift https://github.com/kylef/ Stencil ▸ Save xml to the file system and load it from js ? (error handling is gonna kill you) ▸ Just use NATIVE sdk, shall we ?

33. TEXT CONCLUSION ▸ You can bridge between TVML and Native

    app seamlessly (thanks for JavaScriptCore) ▸ use TVML for static UI ▸ e.g. Loading, Alert, License, Seasonal Recommend … ▸ Theoretically, you can replace templates whenever you want (if you serve from your server) ▸ avoid TVML for dynamic UI

34. LOOKING FOR A SWIFTY JOB ? JOIN OUR TVOS APP

    TEAM !!! Please talk to me for details or Twitter: @toshi0383 WE ARE HIRING

35. THANKS

36. QUESTIONS ?

37. TEXT UPDATE (2016/02/17) ▸ I published a OSS library called

    TVMLKitchen which ▸ demonstrates this slide’s contents. ▸ provides easy way to deal with your TVML.
 
 https://github.com/toshi0383/TVMLKitchen