Save 37% off PRO during our Black Friday Sale! »

TVML + Native = Hybrid

E2c86baa99178b8400a2ef49ef861a6c?s=47 toshi0383
December 21, 2015

TVML + Native = Hybrid

Developing tips on TVML and Native app

E2c86baa99178b8400a2ef49ef861a6c?s=128

toshi0383

December 21, 2015
Tweet

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