Fast Development Roundtrip: Mobile Apps with Tabris.js

Johannes Eickhold
January 15, 2015 | 3 min Read

Developing mobile apps, especially when targeting multiple platforms, can be cumbersome and time-consuming. The time to compile and deploy an app to a mobile device really adds up. In this post we introduce you to a much faster development cycle using Tabris.js to write mobile apps. The experience is comparable to web development except there is no HTML involved.

Tabris.js apps consist of JavaScript files that contain your app’s code bundled together with an execution environment.

However, during development time, the Tabris.js Developer App can fetch the JavaScript files of your app directly from anywhere in the network. You just have to serve your project’s files via HTTP. The Tabris.js Developer App is then able to fetch all your project files, and executes them right away. After making changes to the served files it is only a matter of a reload to get the updates and execute them. This lets you easily and quickly examine the changes you made, regardless of your mobile device using iOS or Android.

Tweet this link

Follow @tabrisjs

Quick online exploration

tabrisjs.com provides you with an online scratchpad to experiment with Tabris.js code (requires a Github account and an invitation for Tabris.js). The only other thing you need is a mobile device with the free Tabris Developer App installed:

Any code edited in the tabrisjs.com scratchpad can be directly executed on your device. Switch to the “My Scripts” tab and select the My Scratchpad entry. The entry is only visible when logged in: your scratchpad is personal and only yours. Just type and use the reload function in the Tabris Developer App to see your code in action.

Local development

For developing Tabris.js projects on your development machine you need a way to serve a directory over HTTP (e.g. the command line http-server of Node.js) - and a Text editor (or JavaScript IDE). When you have those in place, getting your first app running is just a matter of following these steps:

  1. Clone the Tabris.js Getting Started Project that contains a simple HelloWorld.

    git clone https://github.com/eclipsesource/tabris-js-getting-started.git

  2. Make sure the directory containing the HelloWorld is served over HTTP

  3. Connect to the server from the URL tab in your Tabris.js Developer App. If you can’t see the URL tab please login on the “My Scripts” tab first.

For a more detailed description, visit the “Create Your First App” guide.

Iterating the Development Cycle

Now you can start making changes to the code of the example and exploring the features of Tabris.js. After some changes, you want to try how things feel on an actual device. With Tabris.js this is simple and only a matter of seconds.

  1. Edit your code.
  2. Save your work.
  3. Click “reload” in the Tabris.js Developer App on your mobile device.

What’s next?

Lately we have been busy to provide a CommonJS compatible Module System and an HTML5 compliant API like XMLHttpRequest. In our next blog post we will show you the power of integrating existing JS Frameworks with Tabris.js.

If you have any ideas or suggestions for further Tabris.js specific tooling, we would love to get your message below. Feel free to share about your own workflow and development experience with Tabris.js. We are eager to get your feedback!

Johannes Eickhold