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
- Must install platform SDKs and Cordova
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
Let's Get Started
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 typescripttabris inittabris serveType the URL in the developer app
Public WiFi? Might need a tunnel
ngrok http 8080NavigationView, 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
Native Mobile Apps with Tabris.js
By Tim Bond
Native Mobile Apps with Tabris.js
Madison PHP Conference - November 2nd, 2018
