Use external javascript libraries for TVML based Apple TV apps?

Question

Is it possible to load and use external javascript libraries for use on TVML Apple TV apps?

For example, can I load the Firebase js library and use it to fetch data? Or load lodash to use it's functions?

Conchoid

I am successfully using require by using browserfy. Go promises! – Intractable

@Intractable could you possibly provide an example please? – Conchoid

Sure. I set up a repo which demos my architecture. But the list of it is I use npm to install any decencies and just require them and my view-controllers. browserify just bundles my files. – Intractable

@Intractable wow that's great! Thank you! – Conchoid

Sure, the architecture isn't great by any means but it should get you started – Intractable

Answer 1

You can load external JavaScript libraries using the evaluateScript function.

evaluateScripts([“ARRAY OF JS URLS”], function(success) {

// do work here once the JavaScript files have been evaluated

})

Trainee

Answer 2

I've had luck using webpack to package all of my dependencies into a single minified application.js file. Webpack will handle bundling required commonjs modules and third-party libraries and you can use babel-loader to add missing es6 support (import/export, const/let, arrow functions, etc).

Here's my application.js:

require('babel-polyfill');
import Presenter from './presenter';
import ResourceLoader from './resourceLoader';

App.onLaunch = function(options) {
  let resourceLoader = new ResourceLoader(options.BASEURL);

  Presenter.resourceLoader = resourceLoader;

  let index = resourceLoader.loadResource(`${options.BASEURL}templates/Index.xml.js`, (resource) => {
    let doc = Presenter.makeDocument(resource);
    doc.addEventListener('select', Presenter.load.bind(Presenter));
    navigationDocument.pushDocument(doc);
  });
}

and my webpack.config.js:

var webpack = require('webpack');

module.exports = {
  entry: "./src/js/application.js",
  output: {
      path: __dirname + "/public/js",
      filename: "application.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          cacheDirectory: true,
          presets: ['es2015']
        }
      }
    ]
  }
};

Stokehold

And how do you use safari web inspector to debug with webpack output js? – Dunlop

This should be the accepted answer, using evaluateScripts is very limiting. However, I do have the same question as @zfu: how do you debug a webpack output? – Harrietharriett

@Harrietharriett I'm able to debug web web inspector, just enable options devtool: "inline-source-map" in webpack's configuration. – Dunlop

Hey Cezary, How do you evaluate scripts in this case? What does your Resource Loader and Presenter do? Thanks – Jolson

@cezary-wojtkowski Thank you for your post. I'm having an issue with Webpack that my App is exposed as a module instead of code that is executed. How did you workaround this? – Fob

Answer 3

https://github.com/emadalam/tvml-catalog-using-atvjs

Refer to this port of the original sample code re-written using atvjs framework that is using external libraries like Handlebars, lodash, atvjs etc.

February