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

Presented at 360|iDev 2016.

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