Native JavaScript mit TVML auf dem AppleTV

Mit dem neuen Apple TV ermöglicht Apple es Entwicklern erstmals, Apps zu schreiben. Dabei ist vor allem interessant, dass man tvOS-Apps mit TVML umsetzen kann. Ja, genau: Apple nutzt dabei ein ähnliches Konstrukt wie React Native. Die Anwendungslogik kann komplett in JavaScript geschrieben werden; die Oberfläche wird in TVML beschrieben. Eine App für tvOS besteht dabei aus folgenden Elementen:

• TVML – eine einfache, XML-basierte Template-Sprache (Television Markup Language)
• TVJS – eine JavaScript-API, die es ermöglicht, Apps zu entwickeln und die auch Bridging zu Swift bietet
• TVMLKit – der native Part, der die App später auf dem AppleTV ausführt

Doch warum nicht einfach HTML für die Darstellung nutzen? Die Interaktion mit eurer App soll so intuitiv wie möglich vonstatten gehen. Der größte Unterschied zu iOS: Eure Nutzer sitzen einige Meter vom Bildschirm entfernt. Die Benutzererfahrung ist ein gewichtiger Grund: Eine gigantische 1080p-Leinwand (verglichen mit einem Tablet oder Smartphone-Bildschirm) funktioniert einfach nicht gut mit Webinhalten. So nutzt Mobile Safari eine große Anzahl von Gesten, die einfach nicht auf dem Fernseher funktionieren. Außerdem verwendet Apple intern schon seit einigen Versionen TVML für die Apps, wie ein Blick auf den QuellCode verrät.

Natürlich schmerzt es viele Entwickler, dass sie nicht einfach Webinhalte darstellen können, aber generell versucht Apple, hier einen interessanten Zwischenweg zu ermöglichen. Gerade Frameworks wie AngularJS haben gezeigt, dass man durchaus eine große Anwendung in JavaScript umsetzen kann. Dabei läuft die App lokal und holt sich die Daten über Webdienste. Genauso stellt es sich Apple bei tvOS vor:

Client-Server-App mit TVMLKit (Quelle: Apple)

Vom Standpunkt der Sicherheit aus erscheint es auch sinnvoll, WebViews zu meiden. Zumal Apple mit TVML  vorgefertigte Templates anbietet, die für eine Vielzahl von Szenarien einsetzbar sind. Diese Template-Strings basieren auf ES2015 und lassen sich über JavaScript mit Daten versorgen:

// Erzeuge TVML document im aktuellen Kontext
App.onLaunch = function(options) {
     var alert = createAlert("Update Available", "Get the latest tvOS version", "Update now", "Cancel");
     navigationDocument.presentModal(alert);
 }

// Parse alert Template-String und erzeuge Objekt mit ersetzten Platzhaltern
  var alertString = `
	 	 	 	 
		
 		${description}
 		${okBtnLabel}
 		${cancelBtnLabel}
 		 	 
  `;
     var parser = new DOMParser();
     var alertDoc = parser.parseFromString(alertString, "application/xml");
     return alertDoc
 }

Damit lassen sich schnell und effizient Oberflächen erstellen:

Ein besonderes Gimmick ist auch die Möglichkeit, Swift-Klassen aus JavaScript heraus aufzurufen und so Funktionen von bestimmten Bibliotheken zu nutzen, für die Apple keine API bietet. Eine einfache Demo-Anwendung stellt Apple auch zur Verfügung.

Auf jeden Fall ist es Apple mit dem TVML-Kit gelungen, einen einfachen Einstieg in die App-Entwicklung zu bieten – gerade für Content-Anbieter. In einem weiteren Blog-Artikel wird eine Beispiel-App vorgestellt.