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-rendereroption 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
terminalwill 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
Extended file system API
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
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.
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
.tsx files could use data binding. This has been changed so that
.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 email@example.com
tabris initin an empty directory to create a simple example app.
tabris serveand 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!