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 toterminal
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 pathremoveDir(path)
removes an empty directoryremove(path)
removes any file or directory, empty or notisFile(path)
checks if the given path points to a fileisDir(path)
checks if the given path points to a directoryappendToFile(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
- Install the Tabris.js developer app on your device. Links below.
- Try out the bundled snippets in the app, or edit and run them via Tabris.js Playground.
- Install the 3.4 Tabris CLI on your machine:
npm install -g tabris-cli@3.4.0
- Type
tabris init
in an empty directory to create a simple example app. - Type
tabris serve
and load it in the developer app. - Check out the Tabris.js 3.4 documentation.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!