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
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.
