Apple TV, Drupal 8, and You

Deliver media content with ease

By: Rafael Silva

Online media content has become, more than ever, a big deal. Instead of just having a TV set that only gets content from a few channels, or having to pay for a cable company to have more options, consumers now have smart TVs and smart devices for their living rooms — like Roku, Google’s Chromecast and Apple TV. These devices stream content directly from the Web. Online content creators are, more and more, getting the space that once belonged only to TV channels. For these content creators it’s crucial that the distribution outlet reach the audience, no matter what device they are using.

The web has become ubiquitous, and today almost all content creators are able to deliver content digitally, through their websites. But what about these new connected devices that don’t have browsers? How are content creators delivering their content to these devices?

Even though almost everybody has a smartphone or tablet, many people prefer to watch videos on big screens and set-top-boxes like Apple TV are the preferred way to do so.

In working with our partner Acquia, we’re constantly experimenting with new and exciting technologies; and as experts with Drupal, we are always looking for new opportunities to add value to products we have created for our clients. Recently we created an Apple TV app that uses an existing Drupal 8 site to deliver content through Apple TV.

About The Project

A few months ago we developed a brand new Drupal 8 website for one of our media clients, to provide a better experience for managing and delivering digital media online. To broaden content distribution, we proposed an Apple TV app that would syndicate the content directly from Drupal. This would reach a larger audience, and would deliver a better experience to users, allowing them to consume the content right in their own living room. Leveraging Drupal for the content of the app would also improve the experience for content creators and digital marketers, as they would be able to manage both the site, and the app, in one easy to use system.

The App

Anybody that has developed an app before knows that the best place to start is a development kit (SDK). SDKs offer a few options for development, depending on the platform. For the Apple TV there are 2 options for creating an App:

  1. UIKit and the Swift programming language (the traditional iOS way). This implies that you know (or will have to learn) the Swift language and will have to deal with things like Autolayout. It also means you have total control over the way the app looks and behaves.
  2. Apple’s TVMLKit, a set of JavaScript and XML files, that have some previously programmed templates and components you can use to build your app. This means you have some control over the appearance, though not total, but it also means you don’t need to learn Swift or deal with Autolayout.

TVMLKit was our preferred option for developing the App. Some of the advantages of this option for us were:

  • We didn’t need to train developers on new technologies (like Swift), since most of the code is just JavaScript and XML (though depending on what is expected from the app, some Swift coding may be required).
  • Apple provides a wide variety of templates. By using these, we could conform to the Apple Human Interface Guidelines, but we could also add some customizations to make it work for our customer’s needs.
  • Most of the app code can be stored on the server, which means we could update the content and the look of the app without having to submit a new version to the Apple Store

On a traditional native iOS/Android app, you usually have the app on your device, and that consumes data from a web server through JSON or some variation of it. The layout is pre-programmed and will only place the content in its pre-set place. If you have to change something on the interface of your app, you have to send a new version of it to the store so the customer can update it. And if you are dealing with the Apple App Store, you need to be prepared to wait for at least a few days to have your app approved.

With the TVMLKit, on the other hand, Apple encourages the developer to host the templates and content on the server, sending it on demand. With that, most of the app can be changed on the server and instantaneously delivered to the customer, without having to wait for the store to approve and without having to warn the user to update the app.

With this architecture, the app installed on the device is only a shell or loader, which gets the content and its layout from the server. Once the content arrives at the app it’s then converted to native UIkit, which has excellent performance. In other words, the TVMLkit binds the client and the server, creating a “native” app on demand.

The Backend

The App’s backend consists of a JavaScript file that is loaded by the app. This file is in charge of getting the layout pages, as well as extending functionality and navigation. The app layout uses one of the predefined Apple templates.

One of the best parts of using a predefined template is that you don’t have to overthink the app layout, but if you wish to add more sauce to it, you can use the styles (kind of a CSS subset) to customize even more of the app. If that’s not enough, you can also extend the templates (though here, I will issue a warning: it’s not easy and will require you to know a good amount of Swift and UIKit to do so).

To develop the backend we could have used any technology at hand, but since our expertise is in Drupal, and our client already has a Drupal 8 site, the choice was obvious for us.

Instead of reinventing the wheel, we created a Drupal module with the JavaScript file the app expects. This JavaScript contains all the logic the app needs (what to do when the user selects a video, tab navigation, video playback, etc.). The module also generates the XML files with the template and content.

To get the content, we had many options with Drupal. We could use the Views module, write our own custom queries, use the database abstraction layer Drupal provides, or any of a number of alternative approaches. For us, the simplest way was to create a View, call it from inside our module, and format the template to output TVML. The JavaScript file is then able to retrieve the TVML content and render it within the app.

Some of the other user interactions have to be customized. Even though some elements behave as expected, many interactions will require you to explicitly say what to do. So, for instance, when you want to play a video, you have to implement something on your backend (again, using JavaScript) to get the video URL and then send it to the player object (a JavaScript class that Apple provides). Only then will it play.

This goes for other interactive behaviours , and we had to implement it for elements like the “play from beginning or start over” decision element. One might think it’s a lot of things to do, but if you have to compare it with the traditional UIKit development, it’s actually much less complex and well worth the effort.

Conclusion

As important as having a website is, it’s becoming more and more important for media companies to have their content distributed on apps. Apple TV is one of the biggest players in this market, and joining the power of Drupal with the ability for Apple TV to deliver content easily can provide a real advantage to media providers using Drupal.

TVMLkit’s use of the JavaScript language in association with the Drupal service and template systems makes the development of Apple TV apps very easy — even for a non-expert iOS/UIkit developer. And besides that, the ability to deploy to the server without having to deploy a new app on the App store cuts out most of the time, effort, and stress of awaiting Apple’s approval to deploy a new version of your app. Putting it all together, it makes the partnership of Drupal and the Apple TV a huge success when it comes to media content delivery.

In partnership with Acquia, we’re always pushing the boundaries of what Drupal can do. Interested in joining us? Apply to be an integral part of our Drupal solutions team here.

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.