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

Ddd6d3bac7772fa67fc5e312a18bdaec?s=47 sammyd
August 23, 2016

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

Presented at 360|iDev 2016.

Ddd6d3bac7772fa67fc5e312a18bdaec?s=128

sammyd

August 23, 2016
Tweet

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