TVML Myths: or why you shouldn't write TVML off... yet

Transcript

1. TVML Myths or why you shouldn't write TVML off... yet

   Sam Davies | @iwantmyrealname | 360|iDev 2016

2. What is TVML?

3. Why is TVML so misunderstood?

4. Five Myths about TVML 1. You have to use a

   server 2. You write TVML in JavaScript strings 3. Layout includes data 4. TVML is for media playback 5. Either TVML or native

5. You have to use a server

6. demo

7. Five Myths about TVML 1. You have to use a

   server 2. You write TVML in JavaScript strings 3. Layout includes data 4. TVML is for media playback 5. Either TVML or native

8. You write TVML in JavaScript strings

9.  Sample Code App.onLaunch = function(options) { var template =

   '<document>' + '<loadingTemplate>' + '<activityIndicator>' + '<text>Hello World!</text>' + '</activityIndicator>' + '</loadingTemplate>' + '</document>'; var templateParser = new DOMParser(); var parsedTemplate = templateParser.parseFromString(template, "application/xml"); navigationDocument.pushDocument(parsedTemplate); }

10. In-bundle TVML 4 TVML engine just processes text 4 Doesn't

    care where it comes from 4 Server offers advantages, but not required

11. demo

12. Five Myths about TVML 1. You have to use a

    server 2. You write TVML in JavaScript strings 3. Layout includes data 4. TVML is for media playback 5. Either TVML or native

13. Layout includes data

14. <infoList> <info> <header> <title>Presenter</title> </header> <text>Sam Davies</text> </info> <info> <header>

    <title>Tags</title> </header> <text>Short</text> <text>Glasses</text> <text>Funny Accent</text> </info> </infoList> <stack> <title>Droning-On II: Return of the Tedium</title> </stack>

15. the entirety of JavaScript at your fingertips

16. !

17. Templating Engine

18. {{MUSTACHE}}

19. class ResourceLoaderJS { ... getDocument(name) { var docString = this.nativeResourceLoader.loadBundleResource(name);

    return this.domParser.parseFromString(docString, "application/xml"); } }

20. class ResourceLoaderJS { ... getDocument(name, data) { data = data

    || {}; var docString = this.nativeResourceLoader.loadBundleResource(name); var rendered = Mustache.render(docString, data); return this.domParser.parseFromString(rendered, "application/xml"); } }

21. class ResourceLoaderJS { ... getDocument(name, data) { data = data

    || {}; var docString = this.nativeResourceLoader.loadBundleResource(name); var rendered = Mustache.render(docString, data); return this.domParser.parseFromString(rendered, "application/xml"); } getJSON(name) { var jsonString = this.nativeResourceLoader.loadBundleResource(name); var json = JSON.parse(jsonString); return json; } }

22. <infoList> <info> <header> <title>Presenter</title> </header> <text>Sam Davies</text> </info> <info> <header>

    <title>Tags</title> </header> <text>Short</text> <text>Glasses</text> <text>Funny Accent</text> </info> </infoList> <stack> <title>Droning-On II: Return of the Tedium</title> </stack>

23. <infoList> <info> <header> <title>Presenter</title> </header> <text>{{presenter}}</text> </info> <info> <header> <title>Tags</title>

    </header> {{#tags}} <text>{{.}}</text> {{/tags}} </info> </infoList> <stack> <title>{{title}}</title> </stack>

24. { "presenter": "Sam Davies", "tags": [ "Short", "Glasses", "Funny Accent"

    ], "title": "Droning-On II: Return of the Tedium" }

25. demo

26. Five Myths about TVML 1. You have to use a

    server 2. You write TVML in JavaScript strings 3. Layout includes data 4. TVML is for media playback 5. Either TVML or native

27. TVML is for media playback

28. Not just media playback 4 ~20 different templates 4 Complex

    nested layouts 4 Great for browsing 4 Apple uses TVML a lot

29. Five Myths about TVML 1. You have to use a

    server 2. You write TVML in JavaScript strings 3. Layout includes data 4. TVML is for media playback 5. Either TVML or native

30. Either TVML or native

31. Hybrid TVML & "Native" 1. Call native functionality from TVML

    2. Integrate native views into TVML 3. Use TVML views in native apps

32. Call Native Functionality from TVML 4 Use JavaScriptCore 4 Create

    native function, vend to JS context 4 Wire it in with JS app

33. demo

34. Integrate native views into TVML app 4 Extend TVML with

    custom tags 4 Add custom style attributes to TVML 4 Use as regular TVML

35. demo

36. Five Myths about TVML 1. You have to use a

    server 2. You write TVML in JavaScript strings 3. Layout includes data 4. TVML is for media playback 5. Either TVML or native

37. TVML Limitations

38. TVML Limitations 4 Less control over appearance / layout 4

    Have to write JavaScript 4 Out of comfort zone 4 Documentation & samples {are|were} terrible

39. TVML Positives 4 Can redeploy app without app review 4

    Trivial to use a server 4 Powerful layouts, really easily 4 XML is a good language for declarative layouts

40. try it. you might like it.

41. git.io/v6MsR github.com/sammyd @iwantmyrealname raywenderlich.com