Tabris.js 3.4 allows to create better mobile apps with new dev tools and debugging support

We are happy to announce the release of Tabris.js 3.4. This release focuses on a better developer experience with new developer tools, debugging support, CLI improvements and some new FileSystem APIs for good measure. Full details can be found in the GitHub Tabris.js 3.4.0 release.

New developer tools

The existing developer console has been replaced with a new development tools. The main element is a persistent toolbar akin to a browser URL bar, sitting atop the screen, and above the application UI. It provides quick access to essential development utilities. Most importantly, it informs you where the application code is loaded from, allows you to insert a different URL (also scannable via QR-code on Android), provides loading feedback, lets you reload the app and open the console logs.

As with the previous developer console, the new developer tools are only available when your app is built with the EnableDeveloperConsole flag. The developer tools can also be explicitly hidden when not required. This can be done via its developer tools menu entry or by using the new devTools service API.

New and improved debugger support on Android

Tabris.js now supports the V8 inspector protocol on the Android platform. This enables debugging Tabris.js Android applications from your favorite IDE. The integration supports step-by-step debugging with source maps when sideloading your code, variable inspection, variable editing, and console integration. To see how to integrate it into the IDE of your choice check the debugging docs.

Tabris.js Android client also allows you to refrain app execution until a debugger has connected. Due to timing issues, the debugger might not always stop on top-level sources. Use the debugger; statement to ensure the debuggers stop in top-level source code. This shortcoming will be improved in a future update.

Project templates updated

When generating a new Tabris.js project via tabris init it can now be pre-configured for debugging via Visual Studio Code. The tslint configuration has been replaced with similar eslint configurations, complete with TypeScript and JSX support. The initial setup questions have been reduced, with the option to generate Tabris.js 2.x apps no longer being available.

Tabris CLI command “serve” received new features

To improve the developer experience, the tabris serve command has received various improvements:

• The new --qrcode-renderer option allows choosing different formatting for the QR code. The default is _utf-8_, but some terminals may not display these characters as expected. In this case, setting the option to terminal will produce a larger-but-safer version of the code.
• Colors and formatting of the printed output has been tweaked for readability.
• Stability of the debug-connection (handling logging and auto-reload) has been improved significantly.
• You can now have a variety of key shortcuts available to interact with the running app, such as “CTRL+R” for reloading, “CTRL+U” for printing a UI tree and “CTRL+C” for clearing the localStorage.

Extended file system API

The FileSystem gained several new methods, mostly for handling directories:

• createDir(path) creates a new directory at the given path
• removeDir(path) removes an empty directory
• remove(path) removes any file or directory, empty or not
• isFile(path) checks if the given path points to a file
• isDir(path) checks if the given path points to a directory
• appendToFile(path, data) adds data to a new or existing file

On Android, additional paths to external storage locations are made available via externalFileDirs and externalCacheDirs properties.

Android client starts faster

It is now possible to embed a Tabris.js application into another native Android application. Please contact us if you are interested in this approach. Due to these changes, the Android client now starts up faster and is more capable to communicate with other apps on the device. It also requires minor breaking changes for plugin developers. Most importantly, the TabrisActivity has been removed and replaced with a TabrisFragment. All first-party plugins maintained by EclipseSource have been updated accordingly.

Data binding in JavaScript/JSX

The data binding capabilities of Tabris.js rely on the TypeScript compiler (tsc) to transform non-standard syntax and include type information in the compiled code. So far this meant that only .ts and .tsx files could use data binding. This has been changed so that .js and .jsx files are also supported, as long as they are still processed by tsc. Due to the missing type information, an “unsafe binding” warning will be logged in certain cases, which can be fixed by adding a TypeScript type in your code.

In future releases, it may be possible to suppress these warnings entirely, as well as to use the API entirely without the TypeScript compiler, i.e., in “vanilla” JS.

Get Started with Tabris.js 3.4

Get the app

1. Install the Tabris.js developer app on your device. Links below.
2. Try out the bundled snippets in the app, or edit and run them via Tabris.js Playground.
3. Install the 3.4 Tabris CLI on your machine: npm install -g tabris-cli@3.4.0
4. Type tabris init in an empty directory to create a simple example app.
5. Type tabris serve and load it in the developer app.
6. Check out the Tabris.js 3.4 documentation.