Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TVML + Native = Hybrid

toshi0383
December 21, 2015

TVML + Native = Hybrid

Developing tips on TVML and Native app

toshi0383

December 21, 2015
Tweet

More Decks by toshi0383

Other Decks in Programming

Transcript

  1. 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 !
  2. YOU CAN CREATE BASIC UI BY TVML EXCEPT FOR …

    ▸ UIPageViewController ▸ complex UI How to combine those ?
  3. AGENDA ▸ TVML + Native = Hybrid ▸ TVML without

    web-server ▸ Best Way to dynamically generate UI using TVML
  4. LAUNCHING NATIVE FROM TVML CONTEXT ▸ Inject objc block to

    the JavaScript Context (in appController(appController:evaluateAppJavaScriptInContext:) ▸ Call directly from JavaScript context (global scope)
  5. HOW TO LAUNCH NATIVE VIEWS FROM TVML ? ▸ Just

    inject a function like this. This is easy.
  6. 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 ?
  7. 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
  8. HOW TO LAUNCH TVML FROM NATIVE ? ▸ e.g. Open

    TVML views from native menus
  9. TIP: NAVIGATION STACK AFTER THE TRANSITION LIKE THIS TVML NATIVE

    NATIVE navigationController is shared TVML
  10. AGENDA ▸ TVML + Native = Hybrid ▸ TVML without

    web-server ▸ Best Way to dynamically generate UI using TVML
  11. 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 !
  12. 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 … ?
  13. YES YOU CAN ! YOUR APP(JS) MAIN BUNDLE 1. Give

    me the tvml ! 2. Here is your tvml ! Refer by file:// protocol
  14. AGENDA ▸ TVML + Native = Hybrid ▸ TVML without

    web-server ▸ Best Way to dynamically generate UI using TVML
  15. 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)
  16. 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 ?
  17. 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
  18. LOOKING FOR A SWIFTY JOB ? JOIN OUR TVOS APP

    TEAM !!! Please talk to me for details or Twitter: @toshi0383 WE ARE HIRING
  19. 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