Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

PROFILE ▸ Toshihiro Suzuki ▸ @toshi0383 (Twitter/GitHub/Qiita/Hatena/Facebook/…) ▸ iOS/tvOS/Mac Developer ▸ iOS dev on NEXTSCAPE

Slide 3

Slide 3 text

PROFILE INDIVIDUAL DEVELOPMENT ▸ tagpicker for Qiita (iPad only) ▸ JamNavi ▸ LGTM (for Mac)

Slide 4

Slide 4 text

PROFILE TOPICS ▸ ܧଓతϨʔγϯά׆ಈ ࣍ճ͸1/23@൧ೳ Ұॹʹߦ͖·͠ΐ ͏ http://continuous-racing.connpass.com/event/24200/ ▸ try! Swift ߦ͖·͢ ੠͔͚͍ͯͩ͘͞

Slide 5

Slide 5 text

TEXT ࠓ೔ͷൃදͷཁ໿

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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 !

Slide 8

Slide 8 text

YOU CAN CREATE BASIC UI BY TVML EXCEPT FOR … ▸ UIPageViewController ▸ complex UI How to combine those ?

Slide 9

Slide 9 text

AGENDA ▸ TVML + Native = Hybrid ▸ TVML without web-server ▸ Best Way to dynamically generate UI using TVML

Slide 10

Slide 10 text

TVML + NATIVE = HYBRID

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

LAUNCHING NATIVE FROM TVML CONTEXT ▸ Inject objc block to the JavaScript Context (in appController(appController:evaluateAppJavaScriptInContext:) ▸ Call directly from JavaScript context (global scope)

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

USE JSVALUE’S `CALLWITHARGUMENTS`

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

HOW TO LAUNCH NATIVE VIEWS FROM TVML ? ▸ Just inject a function like this. This is easy.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

GETTING STARTED WITH TVML ▸ add TVApplicationControllerDelegate conformance to AppDelegate ▸ TVML app is launched automatically.

Slide 19

Slide 19 text

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 ?

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

IMPLEMENT A FUNCTION `OPENTEMPLATE` PROGRAMATICALLY LOAD TVML VIEW

Slide 22

Slide 22 text

CALLING `OPENTEMPLATE` FUNCTION FROM NATIVE HOW TO LAUNCH TVML FROM NATIVE ?

Slide 23

Slide 23 text

HOW TO LAUNCH TVML FROM NATIVE ? ▸ e.g. Open TVML views from native menus

Slide 24

Slide 24 text

TIP: NAVIGATION STACK AFTER THE TRANSITION LIKE THIS TVML NATIVE NATIVE navigationController is shared TVML

Slide 25

Slide 25 text

TIP: RESETTING NAVIGATION STACK TVML NATIVE NATIVE navigationController.setViewControllers

Slide 26

Slide 26 text

AGENDA ▸ TVML + Native = Hybrid ▸ TVML without web-server ▸ Best Way to dynamically generate UI using TVML

Slide 27

Slide 27 text

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 !

Slide 28

Slide 28 text

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 … ?

Slide 29

Slide 29 text

YES YOU CAN ! YOUR APP(JS) MAIN BUNDLE 1. Give me the tvml ! 2. Here is your tvml ! Refer by file:// protocol

Slide 30

Slide 30 text

AGENDA ▸ TVML + Native = Hybrid ▸ TVML without web-server ▸ Best Way to dynamically generate UI using TVML

Slide 31

Slide 31 text

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)

Slide 32

Slide 32 text

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 ?

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

LOOKING FOR A SWIFTY JOB ? JOIN OUR TVOS APP TEAM !!! Please talk to me for details or Twitter: @toshi0383 WE ARE HIRING

Slide 35

Slide 35 text

THANKS

Slide 36

Slide 36 text

QUESTIONS ?

Slide 37

Slide 37 text

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