TVML + Native = Hybrid

Developing tips on TVML and Native app

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