Runtime

Tabris.js apps are executed in a JavaScript engine hosted by a native iOS or Android App. The code may be packaged with the app (using the Tabris build service or CLI), or side-loaded via HTTP and Tabris CLI. Side loading is usually only done with debug builds or the Tabris Developer App.

The JavaScript Engine

The different platforms use different JavaScript engines.

Android uses V8 (via J2V8), which is bundled with the native part of the app. As a result the version of the JavaScript engine that an Tabris app runs in is bound to the Tabris.js version the app is built on.

On iOS the JavaScriptCore engine is used, which is part of the operating system. Therefore the version of iOS that a Tabris app is installed on determines which version of the JavaScript engine it runs on.

Application Programming Language

Tabris.js apps can be developed in JavaScript or TypeScript. In both cases you also have the option to embed JSX (an HTML-like language extension) in your JavaScript/TypeScript code.

Which language features are available to you depends on the exact JavaScript engine the code runs in (as explained above), and which compiler - if any - is used to pre-process your code.

Vanilla JavaScript Projects

:warning: Some examples in the official Tabris.js documentation make use of modern features that do not work with Vanilla JavaScript Projects. We recommend using a setup with a compiler as explained in the next section.

You get this kind of project setup if you choose “Vanilla JavaScript” running the tabris init command, or by just typing npm init && npm i tabris in an empty directory.

For these kind of projects your code will be executed exactly as written, and which language features are available depends entirely on the JavaScript engine. In general both engines support most of the ECMAScript 2017 standard, but not the ES6 Module syntax.

Notable supported features:

Feature Example
Arrow functions (a, b) => a + b
Classes class { … }
const const a = 1;
Default parameters function(a = 1) { … }
Destructuring assignment [a, b] = [1, 2]
Exponentiation operator a ** b
for…of for (let a of b) { … }
Generators function*() { … }
let let a = 1;
Map new Map(iterable)
Methods { a() { … } }
Object property shorthands {a, b}
Promise new Promise(cb)
Reflect Reflect.setPrototypeOf(a, proto)
Rest parameters function(...args) { … }
Proxy new Proxy(a, handler)
set { set a(value) { … } }
get { get a() { … } }
Set new Set(iterable)
Spread operator foo(...arr)
Symbol Symbol(str)
Template literals \`foo ${value} bar\`
Typed Arrays and ArrayBuffer new Uint8Array(buffer)
WeakMap new WeakMap(iterable)
WeakSet new WeakSet(iterable)

Notable feature NOT supported:

Feature Example Alternative
import/export import * as foo from 'foo'; const foo = require('foo');
async/await await fn(); fn().then(cb);
JSX <TextView /> new TextView()
Types/Interfaces const foo: string; const foo;

Compiled JavaScript Projects

There are various tools that provide some kind of JavaScript pre-processing to allow the use of constructs (and sometimes APIs) that would otherwise not be supported at runtime, or to optimize the code in some way. Particularly popular in this category is Babel, which works fine with Tabris.js. However, using the tabris init command and choosing the “Compiled” option will create a project using the TypeScript compiler tsc, which we recommend even for JavaScript projects. Not only is this a less complex setup than a comparable Babel configuration, it can also provide better auto completion support and eases migration to TypeScript should this be desired later on.

With this kind of setup .js files now can use the ES6 module syntax (import/export) and async functions (async/await). It also supports JSX syntax in .jsx files.

TypeScript Projects

TypeScript is recommended over JavaScript for all serious software development efforts. Since tabris init creates a JavaScript/TypeScript hybrid project, everything from the previous section still applies here. You simply create .ts and .tsx files instead of .js and .jsx files. Further notes on TypeScript support can be found here.