Develop Tabris.js Applications in the Cloud with Gitpod

Development in the cloud IDE has become increasingly popular these days. Since Tabris.js 3.3, you can develop Tabris.js applications with Gitpod, which is one of the popular online IDE’s that runs in modern browsers and can be launched from any GitHub page.

Before we talk about development in the cloud, let us take a look at how Tabris.js applications are executed during development. They are run by the Developer App that executes source code directly on a mobile device. The entire JavaScript code is loaded from the local machine or a remote location without performing a full native build. The sideloading happens with the help of Tabris CLI that serves the project files to the Developer App. With this mechanism, the app starts pretty fast, and logs are printed in the development machine.

Aside from desktop development tools, small Tabris.js applications can also be developed in the online Tabris.js Playground, where you can directly edit and run JavaScript code. It doesn’t require setting up your own development environment, but it has some limitations: single-file-apps only, no logging output, snapshots are stored only in the browser’s local storage. Tabris on Gitpod can be considered an advanced alternative to the Playground. It provides a fully working development environment, including a VS Code powered IDE and a cloud-based Linux container. The entire Tabris.js app project can be opened with a single click from the relevant GitHub repository. In addition to this, Gitpod also comes with lots of other useful features that make it much more powerful than Playground.

Running the Reddit Viewer Example from Gitpod

The Reddit Viewer Example is a TypeScript/JSX-based Tabris.js example project. The app shows Reddit posts retrieved from the Reddit API, enables them to be filtered and to switch the display layout.

The project is already configured for Gitpod and can be launched in several ways:

• Using browser extension that adds a button to the relevant GitHub pages:

• By clicking the Run in Gitpod image in the README file:

• Simply with the Gitpod prefix:
  https://gitpod.io/#https://github.com/eclipsesource/tabris-js-reddit-viewer.

Since the login is done through the GitHub OAuth, it is required to sign in to GitHub to launch the project successfully.

Opening the repository installs minimum dependencies required, the preview-browser opens with a QR code for the user to scan with the Developer App.

More Tabris.js projects that work with Gitpod can be found here.

To launch the example app, we need first to scan the QR code in the preview-browser with the Developer App:

After scanning the QR code, the app sources are downloaded from the Gitpod instance to your Developer App, where they are executed:

Modification on the source file reloads the application automatically. We will put a simple console.log call to the app.ts file to see how logging and auto-reload works:

As we change files in the project, we should save them manually (File > Save All).
I would suggest enabling the auto-save (File > Auto Save):

After the application is automatically reloaded, logs are printed in the IDE:

The logs are also printed on the Developer Console, which opens by sliding from the right edge of the screen to the left:

In our next blog post, we will show how to configure your own Tabris.js app for use in Gitpod.