TVML Yeoman Template

The template provides a basic TVML sceleton for tvOS which uses WebPack and LiveReloading to build apps for the AppleTV platform

Feel free to donate

Or donate Bitcoins:

Also via greenaddress

Usage

(sudo) npm install -g yo generator-tvml
yo tvml

Or the develop build, which maybe not be stable

(sudo) npm install -g yo generator-tvml@next
yo tvml

About

This is a basic template which uses atvjs framework for blazing fast Apple TV application development using pure JavaScript. It relies on the tvOS provided TVML and TVJS for Apple TV development. However this framework does most of the heavy lifting for you and lets you concentrate on your application logic without worrying about the hassles of complicated architecture for Apple TV development. Build your Apple TV application the same way how you are used to building your SPA applications in JavaScript and let the framework handle the rest for you.

This template also includes livereloading and modules with WebPack and ES2015.

Feel free to donate

Creating Pages

Create pages in your application using the page factory. You will then be able to navigate to these pages using the name of the page.

ATV.Page.create({
    name: 'home',
    // use a template function from your favourite templating engine
    // or pass a raw template function
    template(data) {
        return `<document>
                    <alertTemplate>
                        <title>${data.title}</title>
                        <description>${data.description}</description>
                    </alertTemplate>
                </document>`;
    },
    // pass some raw data to be applied
    // or a data function that returns the data
    data: {
        title: 'Homepage',
        description: 'This is my super awesome homepage created using atvjs.'
    }
});

// later in your application you can do something like below to navigate to the page
ATV.Navigation.navigate('home');

Or you can use the jade loader:

import alertTemplate from './templates/alert.jade';

ATV.Page.create({
    name: 'home',
    // use a template function from your favourite templating engine
    // or pass a raw template function
    template: alertTemplate,
    // pass some raw data to be applied
    // or a data function that returns the data
    data: {
        title: 'Homepage',
        description: 'This is my super awesome homepage created using atvjs.'
    }
});

// later in your application you can do something like below to navigate to the page
ATV.Navigation.navigate('home');