Single Sourcing, Top Tabris.js Feature #3

May 23, 2015 | 2 min Read

For the past two weeks I’ve been celebrating the release of Tabris.js 1.0 by counting down the Top 10 Tabris.js features that I’m most excited about; and I’ve finally made it to the Top 3. Tabris.js is a mobile app development framework that enables you to develop cross-platform mobile apps in JavaScript, from a single codebase.

Number 3 on my list is Single Sourcing.

Building high quality, beautiful, mobile applications takes substantial engineering talent. Android and iOS are two different beasts, and building an application for both platforms requires two teams, in constant communication. Changes to the app require a coordinated efforts across the different platforms. While web-based applications are an option, they often lack the native look and feel that users have come to expect.

With Tabris.js, you can now build apps for both Android and iOS from a single JavaScript codebase.

https://eclipsesource.comimages/big-bang-theory-1024x903.jpg does not exist

By using Tabris.js, your developers can focus more on the app development and less on platform idiosyncrasies. Tabris.js handles the platform differences for you by bridging JavaScript and the native widgets. For example, the collection view lets you render tabular data in an infinitely scrolling list. Tabris.js handles the recycling of widgets, dynamic loading of content, scrolling, animation and even pull to refresh; all from a simple JavaScript API. The animations and gestures are native while programming model is consistent across platforms. Furthermore, by using JavaScript, you can reuse hundreds of existing node modules in your mobile app.

tabris.create("CollectionView", {
  layoutData: {left: 0, top: 0, right: 0, bottom: 0},
  items: people,
  itemHeight: 256,
  initializeCell: function(cell) {
    var imageView = tabris.create("ImageView", {
      layoutData: {top: 16, centerX: 0, width: 200, height: 200}
    }).appendTo(cell);
    var nameTextView = tabris.create("TextView", {
      layoutData: {left: 30, top: [imageView, 16], right: 30},
      alignment: "center"
    }).appendTo(cell);
    cell.on("change:item", function(widget, person) {
      imageView.set("image", {src: person.image});
      nameTextView.set("text", person.firstName);
    });
  }
}).appendTo(page);

Framework development is something we’ve been doing for a long time at EclipseSource. We started with Eclipse RAP, a framework that brought the Eclipse platform to the web. We continued with Tabris Remote, an extension of RAP for mobile devices. With Tabris.js we’ve now embraced JavaScript as a language for app development.

To get started with Tabris.js sign up at https://tabrisjs.com. Using our free on-line scratchpad, you can experiment with the JavaScript API and deploy your apps directly to your Android or iOS devices. For more information on Tabris.js and for the Top 2 Features, follow us on Twitter.

Ian Bull

Ian Bull

Ian is an Eclipse committer and EclipseSource Distinguished Engineer with a passion for developer productivity.

He leads the J2V8 project and has served on several …