Tabris.js 3.0 is now available with a focus on ease of use, new features and better tools [UPDATE]

[UPDATE] We have released Tabris.js 3.0.1 which addresses a few smaller issues found in the initial 3.0.0 release.

We are happy to announce the general availability of Tabris.js 3.0, a new major version with a focus on ease of use, new features, and better tools. The following sections highlight some of the changes which make Tabris.js 3.0 the best Tabris.js release yet!

Migrate from Tabris.js 2.x

Are you already running a Tabris.js 2.x app? If so, we have you covered! The migration guide will describe all changes relevant to a smooth update to Tabris.js 3.0.

New APIs and features

Worker

Performing long-running work on the main thread can lead to a UI stutter and unpleasant user experience. Therefore one of the most requested features is the ability to execute work in parallel to the main thread. In Tabris.js 3.0 we have added support for parallel code execution by supporting the W3C Web Worker API. You can find all details of the Tabris.js integration in the docs and a working example in the snippets collection.

const worker = new Worker('add-numbers.js');
worker.onmessage = (event) => {
  console.log(`result: ${event.data}`);
  worker.terminate();
};
worker.postMessage([number1, number2]);

const worker = new Worker('add-numbers.js');

worker.onmessage = (event) => {

console.log(`result: ${event.data}`);

worker.terminate();

};

worker.postMessage([number1, number2]);

New material design for Android

While Tabris.js is a cross-platform framework, we always took great pride in our ability to create a native ui from one code base. Your app should feel right at home on the designated mobile platform. In order to strengthen that mantra we have updated the look and feel of several of the Android widgets to follow the latest material design guidelines. Several popular widgets like Button, TextInput, Picker or TabFolder have been updated to represent the latest developments in material design.

New event API

For Tabris.js 3.0, we added several event API enhancements to the core module. The new approach does not replace the old API but offers a more convenient, higher level interface especially useful for TypeScript projects and asynchronous programming via async/await.

// handle text changes in a callback
textView.onTextChanged(handleTextChanged);   
// or await a text change
await textView.onTextChanged.resolve();
console.log(textView.text);

// handle text changes in a callback

textView.onTextChanged(handleTextChanged);

// or await a text change

await textView.onTextChanged.resolve();

console.log(textView.text);

New ways to create layouts

Creating a UI layout in Tabris.js 2.x revolved around the default layout offered by the Composite widget. To make it simpler to create common layout patterns, we have extended the available layouts with a new layout concept. The layout is implemented by the ConstraintLayout (used by the Composite) and a new StackLayout. The StackLayout positions its children vertically from top to bottom, allowing to control alignment, spacing, and other layout details. The new StackLayout is used by default by the new Stack widget and is especially handy when combining it with JSX.

// using a Stack widget
contentView.append(
  <Stack stretch spacing={24} >
    <TextView background='red'>Red</TextView>
    <TextView background='green'>Green</TextView>
    <TextView background='blue'>Blue</TextView>
  </Stack>
);

// assigning a layout to an existing Composite based widget
contentView.append(
  <ScrollView stretch layout={new StackLayout({alignment: 'stretchX'})} >
    <TextView background='red'>Red</TextView>
    <TextView background='green'>Green</TextView>
    <TextView background='blue'>Blue</TextView>
  </ScrollView>
);

// using a Stack widget

contentView.append(

<TextView background='green'>Green</TextView>

</Stack>

);

// assigning a layout to an existing Composite based widget

contentView.append(

<TextView background='green'>Green</TextView>

</ScrollView>

);

Ease of use

TypeScript-friendly data types

Various properties in Tabris.js 2.x used to accept only CSS-like strings, which are short but error-prone. Since the IDE and TypeScript compiler cannot know what format a string is supposed to have, no auto-completion could be provided. As a result, typos would not become obvious until the code was executed. The new object literals for font, color, and gradient types have full auto-completion and TypeScript support while staying 100% compatible with the old string formats.

Each type also has a matching JavaScript class that is used as the default format by the framework. For example:

widget.background = {red: 255, green: 0, blue: 0};
// or
widget.background = '#ff0000';
// are normalized to a `Color` instance, i.e.
console.log(widget.background instance Color); // true
console.log(widget.background.toString());  // #ff0000
console.log(widget.background.red);  //255

widget.background = {red: 255, green: 0, blue: 0};

// or

widget.background = '#ff0000';

// are normalized to a `Color` instance, i.e.

console.log(widget.background instance Color); // true

console.log(widget.background.toString()); // #ff0000

console.log(widget.background.red); //255

Expanded JSX support

The JSX support for existing APIs has been improved by allowing to create any type of Popup (like AlertDialog or ActionSheet) using JSX.

Some JSX attributes now allow you to omit the attribute value which assigns a default value (usually "true" or 0). This allows to condense a JSX declaration to eg: . To shorten this declaration even further, we introduce layout shorthands for common layoutData configurations. The previous snippet used the left and right attributes to attach to the parent sides. This can be shortened to stretchX which has the same meaning. We also offer stretchY, stretch (all sides) and center (short for centerX and centerY).

A new shorthand for the element in the form of <$> has been added. <$> can also be used to create block text.

const str =
  <$>
    This is <b>some text</b>
    with multiple lines
  </$>
);

const str =

<$>

This is <b>some text</b>

with multiple lines

</$>

);

Improved Selector API

Tabris.js 3.0 introduces the global function $() as an alias for tabris.contentView.find(). This makes small snippets more readable and dealing with top-level UI elements easier.

On WidgetCollection the new only() method works like first(), but throws an Error if there is more than one match. It’s therefore more secure than first() when selecting a single widget. The parent() method now also takes a selector, returning the nearest parent that matches.

JSX Stateless Functional Components (i.e., factories) can now be used as selectors, just like widget constructors can.

Better Error handling

To help you find errors in your code, we improved stack traces in a number of ways:

Clean platform-independent format
Framework internals are filtered out
Source map support, i.e. corrent line numbers when using TypeScript/JSX.
cross timer/promise traces – works great in combination with async/ await

The improved stack traces are also printed when calling console.trace() or error.toString().

Revised documentation

We improved the project documentation to provide more information on individual components, concepts and infrastructure. From details about Layouts, through Types, to theming Android apps, the documentation has been improved across the board.

We also focused on making the existing API docs more accessible with a more intuitive design, descriptive screenshots, and details. Additionally a new widget gallery has been created to provide a quick glance on all available widgets.

New console features

The console.dirxml() is a convenient way to print the application’s widget tree (or parts of it). It displays the widget type, id, and essential information like widget bounds, selection status, text value, etc..

It can also be called with localStorage to inspect its content.

Better Tools

New Tabris.js developer app

The new Tabris.js developer app has been redesigned from the ground up. It now shows a list of all available widgets and lets you run widget specific snippets directly from inside the app. As before it can be used to connect to remotely hosted apps by entering a URL or scanning a barcode.

You can get the new app from the Google Play Store or the Apple App Store.

Improved tabris CLI

The Tabris.js CLI has been updated in regards to its code sideloading feature. In you Tabris.js 3.x project directory type:

tabris serve -w -a -i

1	tabris serve -w -a -i

This will print a QR code that you can scan with Tabris.js Developer App. The QR-code points to your JavaScript or TypeScript code and allows to download (significantly faster than before) and execute it.

The -w switch makes watches for code changes and runs the compiler in the background, which already worked in 2.x.

New in 3.0 is the -a switch which auto-reloads the app whenever a source file change is detected.

In addition, all logging by the app (e.g. console.log() calls) is now printed via the CLI.

By adding the -i switch you get a prompt where you can enter JavaScript code to execute in the running app. This can be very useful to inspect the current state of the application. You can access everything that is in global scope (e.g. the tabris and console objects) or userequire() to access specific modules or $() to get any widget instance by id or cid.

Testing support with ClientMock

The Tabris module now includes a sub-module ClientMock that can be used to initialize the Tabris module outside of a native Tabris environment, e.g., in the Node.js. When generating a new (compiled) Tabris 3.x project via the Tabris CLI (or the Yeoman generator), the option to generate such a test setup based on Mocha.js is given.

Wrap Up

Tabris.js 3.0 is huge step forward for the Tabris.js project and its ecosystem. On top of the highlights listed above we’ve added numerous new APIs and changes in the multiple iterations to the 3.0 release. But the work does not stop here. Please try out the 3.0 release and give us your feedback as we are already working on the next release.

Get Started with Tabris.js 3.0

Install the Tabris.js developer app on your device. Links below!
Try out the snippets bundled in the app
Install the 3.0 Tabris CLI on your machine: npm install -g tabris-cli@3.0.0
Type tabris init in an empty directory – this will create a simple example app
Type tabris serve and load it in the developer app
Check out the 3.0 documentation

Feedback is welcome!

Want to join the discussion?
Feel free to contribute!

SLACK

GITHUB