TVML in tvOS – Does it work the 'Hybrid Way'? – Ways of Developing for tvOS

View Github Repository Open presentation in a new window

zwacky

See all presentation from zwacky

TVML in tvOS – Does it work the 'Hybrid Way'? – Ways of Developing for tvOS

0 1

tvml-intro

TVML in tvOS - Does it work the 'hybrid way'?

On Github zwacky / tvml-intro

TVML in tvOS

Does it work the 'Hybrid Way'?

Simon Wicki (Twitter @zwacky)

Outline

  • Quick Intro to tvOS
  • TVML
  • Demo & Code
  • Conclusion

#ME

Front-end guy at JustWatch.com

Twitter: @zwacky

  • currently manage
    • Angular Web App
    • Ionic Hybrid App (Android, iOS)

Quick Intro to tvOS

Controls

Quick Intro to tvOS

Parallax Icons

Ways of Developing for tvOS

and how they look like

Native

Native

TVML

TVML

TVML

XML Style

<document>
   <alerttemplate>
      <title>Update Available</title>
      <description>Get the latest tvOS version</description>
      <button>
         <text>Update Now</text>
      </button>
      <button>
         <text>Cancel</text>
      </button>
   </alerttemplate>
</document>

turns into...

more complex templates are possible too...

TVML JS

  • DOMParser
  • Element
  • XMLSerializer
  • ...

TVML Styles

  • 27 documented styles
  • like font-weight, margin, max-height
  • lots of tv-* styles like tv-position, tv-rating-style

Limitations

  • NO WEBVIEW!
  • App size limit (200MB)
  • no persistent storage
    • use iCloud storage
    • anything stored locally can be purged anytime
  • Controls / Remote

(little) Demo

Architecture

Server / Client Approach

Code

vanilla API requests

function requestApi(url, method, body, cb) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'json';
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            cb(xhr.response);
        }
    };
    xhr.open(method, url);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader("Accept", 'application/json, */*');
    xhr.send(body);
}

forEaching template

<shelf>
  <sectionn>
    ${this.cache.popular.items.map(function(title) {
      return `<lockup>
        <img src="${title.full_poster}" width="308" height="462">
        <title class="showTextOnHighlight">${title.title.replace('&', 'and')}</title>
      </lockup>`;
    })}
  </sectionn>
</shelf>

Does it work the 'Hybrid Way'?

No.

TVML in tvOS Does it work the 'Hybrid Way'? Simon Wicki (Twitter @zwacky)