Native Apps with Tabris.js

Tim Bond

Madison PHP Conference - November 2, 2018

Truly Native

Web Views

100%

JS ➡️ Bridge ➡️ Native Code

J2V8

JavaScriptCore

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';
});

Build it your way

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

A Word on ES6

Android: Based on V8
- Notable exception: async/await
iOS: Most features work except on iOS <= 9
See docs for full list
Best choice: TypeScript, Babel or your other favorite transpiler

W3C APIs

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

And More, Not W3 Based

fs (filesystem)
InactivityTimer
printer

Node packages

800,000 packages

Plugin ecosystem

React Native: 600+ plugins
NativeScript: 928 plugins
Xamarin: <100 plugins
Cordova: 4,102 plugins

In its current issue 11/2018, the German CHIP computer magazine tested several online banking apps in the context of the article “Our money in safe hands”. Our 1822direkt Banking App developed with the Tabris framework came out best. We are very proud of this great result, which we reached in close co-operation with 1822direkt!

Build your app when:

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

Updating JavaScript? Just hit Reload

Two Ways To Build

Free online build service
Local build
- Must install platform SDKs and Cordova
  - Android: Linux, Windows, OSX
  - iOS: OSX

Deploy Built App

Android
- ```
adb install
```
- Sideload by opening APK
iOS
- Sideload through Xcode
- OTA distribution (HTML + XML)
- Test Flight et al.

JavaScript Debugging

Android
- Eclipse
- Chrome Dev Tools
iOS
- Safari
- Xcode

Tabris.js 2

Let's Get Started

Install Prerequisites

NPM
That's it!

No SDKs, no special editors

TypeScript in 5 Bullets

Layer on top of JavaScript
Never actually executed, but "compiled" to JavaScript
- It's actually transpilation
Type safe--declare your types
Types enforced at compile time, not runtime
Types are declared after the variable name whereas PHP declares them before the variable name 😞

npm install -g tabris-cli typescript

tabris init

tabris serve

Type the URL in the developer app

Public WiFi? Might need a tunnel

ngrok http 8080

NavigationView, Page

}

NavigationView

Drawer/back button

{

Page

tabris.ui.contentView

Actions

Page Title

Getting JSON with fetch

fetch('http://www.example.com/data.json')
	.then((response) => {
		return response.json();
	})
	.then((json) => {
		console.log(json.someValue);
	})
	.catch((error) => {
		console.warn(error);
	});

Where to Get Help

Join the tabrisjs Slack channel
Open an issue on GitHub