Native Apps with Tabris.js

Tim Bond

SeattleJS - May 11, 2017

Truly Native

Web Views

100%

JS ➡️ Bridge ➡️ Native Code

Chakra

J2V8

JavaScriptCore

Plugin ecosystem

• React Native: 580 plugins
• NativeScript: 421 plugins
• Xamarin: 46 plugins
• Cordova: 2,138 plugins

let button = new tabris.Button({
    top: 16, centerX: 0,
    text: 'Show message'
}).appendTo(tabris.ui.contentView);

let textView = new tabris.TextView({
    top: [button, 16], centerX: 0
}).appendTo(tabris.ui.contentView);

button.on('select', () => {
    textView.text = 'Powered by Tabris.js';
});

Install Prerequisites

1. NPM
2. That's it!

npm install -g tabris-cli

Build it your way

• ES5 or ES6
• TypeScript
• Any directory structure you like
• Use Node modules

A Word on ES6

• Android: Based on V8  5.4
• iOS: Most features work except on iOS <= 9
• "Can I Use" Tabris.js app
• Babel or your other favorite transpiler

W3C APIs

• window
• console
• Timer
• XMLHttpRequest
• Fetch
• WebSockets
• Persistent Storage (localStorage)
• Canvas
• Random Source (Crypto)

Build your app when:

• Add a Cordova plugin
• Update a Cordova plugin
• Release to app stores

Two Ways To Build

• Free online build service
• Local build
  • Requires Cordova and platform SDKs
    • Android: Linux, Windows, OSX
    • iOS: OSX
    • Windows: Windows

Deploy Built App

• Android

  • adb install

  • Sideload by opening APK
• iOS
  • Test Flight
  • Sideload through Xcode

JavaScript Debugging

• Android
  • Eclipse
  • Chrome Dev Tools
• iOS
  • Safari
  • Xcode
• Windows
  • Visual Studio (not VS Code)

Patching your app

tabris.app.installPatch(patchZipUrl, (error, patch) => {
    if (error) {
        // TODO: show error dialog
    } else {
        // TODO: show confirmation dialog
        tabris.app.reload();
    }
});

A Word From Apple's Legal Team:

Patching is allowed for "scripts and code downloaded and run by Apple’s built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose"

Need Help?

• Open an issue on GitHub
• Join the tabrisjs Slack channel

Questions