Native Mobile Apps in JavaScript with Tabris.js

As you might know I’m a big fan of the Ionic Framework, and also of all hybrid frameworks which can help to create 2 apps out of 1 code base. Today I want to highlight the rather new and unknown JavaScript framework Tabris.js.

In contrast to many other hybrid frameworks, Tabris.js is no HTML5 + WebView framework, but still offers the possibility to use Javascript libraries, npm modules and Cordova plugins! I will show you the strengths, we will develop a simple app to get a feeling for the code structure and finally inspect the similarities and differences to other well known frameworks.

Sounds good? Let’s take a closer look!

Ever heard of TabrisJS?

Most of you(including me) might have never heard about Tabris.js before, as the release of the 1.0 version was only some weeks ago, and there was no big marketing event to reveal it. While there are many promising hybrid frameworks out there, I think that most of them have their strengths in special areas of the development lifecycle, that’s why I recommend to inspect different players in that area from time to time, to see which framework might fit your needs the best.

Tabris.js comes with 3 different plans (plus one organisation plan):

• Free: Only public Github repos
• Developer($5/mo): Public&private Github repos
• Pro($50/mo): Public&private Github repos + local builds

These aren’t really different versions of the framework, all plans deliver the same version of Tabris.js.
For the start, a free account on their page is enough to try the basic features, I will highlight the options of the different plans later on. In general, I’m no big fan of paid frameworks.
I tend to be suspicious, as there are really great free frameworks out there for free. If you are in the enterprise context you might want to rely on a more solid framework with agreed support, which a paid plan might give you.

Anyway, the free version has everything you need, there are only differences in the workflow later, but that has no effect on the coding part.

So how do we develop with Tabris.js? In general you write your code in Javascript, but Tabris.js does not use a WebView to render the UI. Instead your code will be bridged to native code, resulting in native widgets. You will not have to deal with HTML to create views, but you will create a flexible layout wich resizes itself for the given platform and size.

Promise of Tabris.js

Every framework has some promises, stating in which areas they are the best. I already mentioned the JavaScript usage and the absence of a WebView, let’s see what we can additionally expect.

Extensibility

While there is no classic WebView, you can still use npm modules, JavaScript libraries and also Cordova plugins. This allows you to apply your existing JavaScript skills and also knowledge you might have gained while developing Cordova apps. Because you don’t have a WebView, you can only use plugins/libraries which offer functions, but nothing which needs to display some kind of UI element.
The use of Cordova plugins is especially needed when you want to access any kind of device feature like the camera or accelerometer.

Feeling

The other promise which comes along with the absence of a WebView is the increased native feeling. There are many apps on the Appstore for which you can exactly say if they were made with a hybrid HTML framework. While they get better and better, there is still a tiny(sometimes quite big) gap to a true native feeling. Furthermore, frameworks which offer a more native feeling like Appcelerator tend to have some performance issues in my eyes. There is always a little tradeoff when developing hybrid apps, even in 2015.

Building

Last but not least Tabris.js offers the possibility to build your apps online. This means you don’t need a mac to develop iOS apps and you don’t have to worry about a special SDK or whatever. Just connect your profile with your Github account and you are ready to build from a repository.
While this is handy little feature for some of us, many of us already have some kind of build server or are using a cloud build service. Anyway, if this only helps some of us, it’s still a good thing. Plus developers are lazy and fast results are always great!

Finally, the best way to decide whether a framework is worth using, is to see how it performs in action. How the code feels. How the complete development process feels. Let’s jump into the code and create a simple little Tabris.js app!

Give me code – Your first app

Our first app will be just a tiny dummy app with 2 tabs and some general available features. There are many more features and options, but for now we keep things simple – if you want to implement an advanced app, feel free to share your thoughts about it below!

As we can install Tabris.js with npm, we don’t need anything more than this package.json right now:

{
  "main": "main.js",
  "dependencies": {
    "tabris": "1.0.0"
  }
}

You can also follow the getting started guide, but creating this package.json also works for us. Navigate from the command line to the folder with the just created package.js and run npm install.

First of all create these 4 files next to the package.json: main.js, tab1.js, tab2.js, details.js.

We start with the tabbed layout, so open the main.js and insert this:

var page = tabris.create('Page', {
  title: 'My App',
  topLevel: true
});

var tabFolder = tabris.create('TabFolder', {
  layoutData: {left: 0, top: 0, right: 0, bottom: 0},
  paging: true
}).appendTo(page);

// 2 options to include our tabs
var tab1 = require('./tab1')();
tab1.appendTo(tabFolder);
// The short form
require('./tab2')().appendTo(tabFolder);

// Set the initial title
page.set('title', tab1.get('title'));

// Open the created page
page.open();

// Update the title on tab change
tabFolder.on('change:selection', function(widget, tab) {
  page.set('title', tab.get('title'));
});

First of all we have to create a page object, which will be opened in the end. After creating this object, we can append all other visual components. In our case create a new TabFolder widget, which covers the complete screen and set paging to true, which allows to swipe through the tabs like seen in many Android apps.

To create the tabs, we append to other files. This can be achieved by using the require() statement. I like this way, as it allows us to split our app/views into smaller parts, making the complete structure more easy to understand.
Finally, we listen to the change:selection event on which we update our current page title based on the tab where we are. Very straight forward so far!

Next we implement our first tab, so open the tab1.js and add this:

module.exports = function() {
  var tab = tabris.create('Tab', {
    title: 'My First Tab',
    image: {src: 'https://raw.githubusercontent.com/eclipsesource/tabris-js/master/snippets/tabfolder/images/cart.png', scale: 2}
  })

  var bacon = ['Bacon', 'ipsum', 'dolor', 'amet', 'drumstick', 'brisket', 'meatloaf', 'pork'];

  var collectionView = tabris.create('CollectionView', {
    layoutData: {left: 0, top: 0, right: 0, bottom: 0},
    items: bacon,
    itemHeight: 44,
    refreshEnabled: true,
    initializeCell: function(cell) {
      var nameTextView = tabris.create('TextView', {
        layoutData: {left: 30, top: 16, right: 30},
        alignment: 'center'
      }).appendTo(cell);

      var composite1 = tabris.create('Composite', {
        layoutData: {left: 0, bottom: 0, right: 0, height: 1},
        background: '#cfcfcf'
      }).appendTo(cell);

      cell.on('change:item', function(widget, item) {
        nameTextView.set('text', item);
      });
    }
  }).on('select', function(target, value) {
    // Push the next view onto our stack
    require('./details')(value).open();
  }).on('refresh', function() {
    // Load new data
    loadNewData();
  }).appendTo(tab);

  function loadNewData() {
    // Do your requests/loading...
    collectionView.set('refreshIndicator', false);
  }

  return tab;
};

Our complete tab is wrapped as a function. This allows us to call require(), and we receive an object of this tab. Now we create a tab instead of a page, and append all components to this tab until we finally return the tab.

The tab we create has a collectionView (also known as tableview), with some rows we take from a dummy array. The initializeCell function takes care of the setup for one cell. We add a simple textview to each cell, and also a composite which is something like a view inside our layout. In our case this view will be the bottom line of each cell.

Our collectionView can also receive 2 events. The first is the select, which is the standard tap. In that case we want to open another view, stacked like inside a navigation controller with a back button. This can be done simply by calling open() on another page object.

Additionally we allow the pull to refresh, which calls the function loadNewData. At this point you could make a request or whatever you like to update your rows, and afterwards set the refreshIndicator back to false to go back to the normal state. No messy objects or anything more to do to have a simple pull to refresh!

Now open the details.js and add this code for the detail view of a row:

module.exports = function(info) {
  var page = tabris.create('Page', {
    title: info,
    topLevel: false
  });

  var webview = tabris.create('WebView', {
    layoutData: {left: 0, top: 0, right: 0, bottom: 0},
    url: 'http://www.devdactic.com'
  }).appendTo(page);

  return page;
};

As this page should be stacked to the previous, we set the topLevel attribute to false. Also we take the info for the title from the function which creates this specific page, and add a simple webview below. It just works.

The last thing we need is the second tab. This tab shows how you can organise your view, in this case we use relative sizes with the composite we already used in our collectionView. Additional we use some other components like a textview which can also display markup style, a simple button which triggers an event for a progress view bar. So open your tab2.js and insert:

module.exports = function() {
  var tab = tabris.create('Tab', {
    title: 'My Second Tab',
    image: {src: 'https://raw.githubusercontent.com/eclipsesource/tabris-js/master/snippets/tabfolder/images/card.png', scale: 2}
  })

  tabris.create('Composite', {
    layoutData: {left: 10, top: 10, right: 10, bottom: '70%'},
    background: '#95edbe'
  }).appendTo(tab);

  tabris.create('Composite', {
    layoutData: {left: 10, top: ['30%', 10], right: 10, bottom: 10},
    background: '#94ceeb'
  }).appendTo(tab);

  var markup = '<b>Hello my Friends</b>, <i>You</i> <small>can</small><del>\'t</del> <big>do many things!</big>';

  tabris.create('TextView', {
    layoutData: {left: 20, top: 20, right: 20},
    text: markup,
    markupEnabled: true
  }).appendTo(tab);

  var progressBar = tabris.create('ProgressBar', {
    layoutData: {left: 20, right: 20, centerY: 50},
    maximum: 100,
    selection: 0
  }).appendTo(tab);

  tabris.create('Button', {
    layoutData: {left: 50, right: 50, centerY: 0},
    text: 'Add'
  }).on('select', function() {
    var selection = progressBar.get('selection') + 10;
    progressBar.set('selection', selection > 100 ? 0 : selection);
  }).appendTo(tab);

  return tab;
};

One thing you might already have seen is how elements are created: We can specify all kind of attributes, including the layout. There are some ways to organise your layout, here we used a relative layout which allows us to target all kinds of display dimensions. This is especially important when you plan to deliver your app on Android, and also the change from portrait to landscape works great this way.

On the way to this tutorial I had some problems finding a good documentation for all of the components, widgets and attributes. If you are used to big and detailed documentation, you will miss some points as there are only some examples with the final code, but no real explanation. This is a point where the team could put more work in.

So, do you want to get your app up running on your device now? Read on!

More for your pleasure

I already mentioned that the free plan includes building only from public Github repositories. As most of you will evaluate a framework based on the free version, you might think: How to deploy anything on my device without building it local? That’s where one of the strengths of this framework comes in.

Building

By signing up on their page and connecting the account to your Github account, you can create Apps completely online. This allows you to create *.ipa or *.apk files without owning a build server or even without a mac!

Still you might wonder on how to debug without having to commit&push each time. Here is another cool feature: The Tabris.js mobile app for iOS (Android: Tabris.js App).

This app is the connection between you, your Tabris.js account and your apps. If you have created an app, you can link them inside your profile and select the project from the app. The app will start and allow you to pull in a debug view. Quite nice, right?

Workflow

All of this is very handy, but for development we need a fast connection between our code and the app on the device.
The offered solution is to run a local server, which serves all of our apps files. You can do so by running these commands from your project directory:

npm install http-server -g
npm install
http-server

Now your server should be up, and all you need to do is to look inside your network preferences, find your local ip and open the tabris app on your device. Go to the URL section, and insert your URL in the format http://yourip:8080/.

Push connect and voila, there is your just created app!

This app offers a lot of options besides running apps from an URL or anything connected to your Github account. If you pull from the right (or from bottom right inside our paging enabled tabbar) you will see a complete development console. This is also the point to refresh your app. So from now, you can code, save and press refresh inside the app and your new app is on the device. This works really fast.

Tabris.js compared to…

There are many, many, many frameworks for hybrid development out there. Only a few reach a solid level like Ionic, so let’s compare Tabris.js to a framework like Ionic, and additional to the quite new React Native from Facebook. Although the last is not final yet, there is a lot of rumour around it and it’s obvious that it will get a huge fan base once it’s finally released.

Ionic Framework

Ionic is a very shiny framework, which allows you fast results which look amazing. Tabris.js does not come with all those extensions and services you get with Ionic, so you have to take care of all the styling yourself. If you plan have fancy looking app very fast, you might be better of with Ionic. Still, you can achieve the same look with a bit more work and styling with Tabris.js.

As Ionic uses HTML5 + Javascript, you have to dig into AngularJS and CSS styling of elements. This might not be the first choice for anyone, so if you rather like to not rely on AngularJS, you should take a look at Tabris.js. Here we have simple, straight forward Javascript which can be spiced up with node modules. This, again, is a very personal choice as some people love AngularJS while others will try to avoid it at every price.

The fact that Ionic runs in a webview might at some point lead to performance issues. While I haven’t built a giant Tarbis.js app yet, the native components and the promise should allow a better performance for your app. This might especially be of interest if you are working in an organisational context and need to handle something like big data.

Finally, the two have one thing in common: You can use Cordova plugins. But while Ionic is completely connected with Cordova, it feels a bit more natural to use it over there. As I added some Cordova plugins to Tabris.js I was not sure on how to connect the new added plugins with the Tabris app, so I ran into some problems. In general I used the local server and the Tabris app, but as a cordova project has a different folder structure, this was no easy going. At this point I encountered another small problem: The community.

As Tabris.js is a very new framework, the community is by now not as big as the Ionic is. This is also related to the fact that Ionic strongly relies on AngularJS which obviously has a very large fan base. Also the documentation is a bit poor in some points, so if you need specific information you might have to look twice and search the examples to find an answer. I hope that this point might get better over time with more people using Tabris.js!

Furthermore, Ionic comes with a lot of additional features like the online creator, the push notification wrapper, icons and some more. The team is working on a lot of features to make life easier for us developer. Tabris.js also offers an app and online building service, which can be nice at some point, but for the current state they are lacking some of the tools Ionic offers.

React Native

As React Native is very new and still not released completely (Android not at all), there are just some current points we can compare and expectations.

The styling and layouting with React Native is achieved by using the Flexbox layout and a rather poor copy of the web CSS styling ported to Javascript. You will for sure miss some elements here, while Tabris.js offers a general baseline to styling. There is not much said about styling for Tabris.js, so a few examples on how to get a fancy look might be appropriate. In general you make all the styling inside your Javascript, so you don’t have to learn CSS, or a CSS copy!

React Native is from the code very near to Tabris.js, as they don’t use AngularJS but React. You don’t need all the ng- special logic, and you also don’t have a webview but a virtual DOM. Still, you have to learn some ReactJS for React Native, which might also stop some people from using it. All those hybrid frameworks which need another Javascript framework might scare off some people, as you will always have to learn a new framework and keep up with the changes related to it!

Speaking of performance, React Native and Tabris.js will have a similar result. They are both not running on a webview wrapper but using native widgets. If anyone of you has some more experience on this point, I would be happy if you leave a comment, whether it’s about Tabris.js or React Native! Especially the usage in very big apps would be interesting.

React Native does not use Cordova plugins, but you can find some wrappers for those functions or easily write your own (which you can also with Cordova). If you like to work with Cordova plugins, you can stick to Tabris.js, as there is literally a plugin for everything. Allowing Cordova plugins with Tabris.js was a pretty good solution to attract more people to use it!

In point of documentation, they are quite the same, but React Native is at a very early stage, so there might be upcoming parts and examples. Also, the ReactJS community might be a bit bigger than the Tabris.js community, but for the second you can use all general Javascript tips and tricks you can find online.

Conclusion

You have seen code, the workflow system and a comparison to 2 of the currently most talked about hybrid frameworks. What’s the result? Tabris.js does perform good compared to other big players in the game! The framework is rather underrated as it’s not making that much marketing like others.

Tabris.js does not come with all the fancy stuff you might like when exploring a new framework, but it offers a solid baseline for a hybrid app. The widgets allow a very native look of your app, the performance is good and the building/workflow is quite nice for a hybrid framework (do you know AngularJS error logs? Bah.).

In the end, choosing a framework for your next app is a very personal decision. There is not one killer framework, each one has its own strengths. For Tabris.js this might by a solid architecture, the connection to Cordova and the use of pure Javascript without HTML or CSS.

If you are looking for a very straight forward framework, give Tabris.js a go!

If this tutorial was helpful, follow me on twitter @schlimmson and leave a comment/ tweet it!
Make sure to subscribe to my mailing list to receive new posts and updates by mail!

So long,
Simon

The post Native Mobile Apps in JavaScript with Tabris.js appeared first on DevDactic.