Tabris.js is an open source mobile framework aimed to build native iOS and Android apps entirely in JavaScript. Among the main benefits of Tabris.js are performance, a fast development cycle, and support for thrid-party plugins including Cordova’s, according to EclipseSource.
Tabris.js takes away with the need for using web views to render an app’s UI thanks to native widgets, such as ProgressBar, CheckBox, Canvas, etc., which are rendered by a JavaScript to native bridge. Tabris.js can also leverage existing JavaScript libraries, node modules, and Cordova plugins.
InfoQ has spoken to Tabris Project Lead Holger Staudacher.
The number of tools enabling native cross-platform mobile development has been growing fast in the last few years (Appcelerator, Xamarin, Tabris, Tabris.js, NativeScript, etc.). What are the main differentiators for Tabris.js?
Nearly 5 years ago we entered the mobile market with Tabris, a cross-platform framework to build apps with Java. In those 5 years we’ve gained a lot of experience about what users want and what they don’t want. From talking to the users we have learned that most of them are not satisfied with the solutions currently on the market. They are unhappy with the complexity of some frameworks. Other solutions do only perform well with small apps and do not scale. And worst of all the user experience sucks with most cross-platform frameworks. That’s what we want to change with Tabris.js.
From the first day Tabris.js aimed to provide an easy to understand, high performance framework that delivers native user experience. The architecture of the framework is the key to achieve those goals. We don’t cross-compile and we don’t use web-views! The main differentiators to other frameworks are:
- Fast Development Lifecycle.
The architecture of Tabris.js allows us to package JavaScript code within the app and also to load code dynamically at runtime. We use this feature to deliver the "Tabris.js Developer App”. This app enables you to develop your own application without compiling native artifacts a single time. You can simply start an http server on your development machine and start coding. Just enter the URL of your computer within the developer app and you can load your code over and over again without the need to restart or re-compile the app. This speeds up development significantly. The only time you need to compile the native code is when you want to release your app in the app stores or you want to add a custom set of Cordova/Phonegap plugins.
- Cordova/Phonegap Plugins.
Tabris.js is a standalone framework. You can use it without any 3rd party library. But we have the opinion that integration is better than re-invention. Why introducing your own plugin system and developing hundreds of plugins on your own? Why not simply reuse what’s already available? We made this our mantra and added Apache Cordova support to Tabris.js. This support includes plugins as well as building apps with the Cordova CLI. You can reuse any Cordova plugin that makes no use of the Cordova web-view (because we build native apps, no HTML5 apps) and build your app with the Cordova CLI. To understand this integration you can also see Tabris.js as native UI for Cordova if you want to.
- Web APIs
Before we entered the mobile markets we have done cross-platform solutions for the web for many years. One thing that makes web apps so powerful is the amount of existing libraries. It’s so easy to find and use JavaScript libraries for web-apps. We wished this would be the same for mobile apps. With Tabris.js we have realized it! The framework provides JavaScript Browser APIs like the window, XMLHttpRequest or the HTML5 canvas. You can use them directly or use libraries that make use of them. One good example is Chart.js, a very good library to draw charts in the browser. You can use Chart.js also with Tabris.js. Instead of drawing in the browser it will draw on native widgets. The ability to reuse existing libraries is very important to us. This is also why we make use of the CommonJS module system. The Tabris.js JavaScript API is available as module and published in the npm registry. You can structure your app as modules and reuse existing npm modules as you like.
Could you explain a few bits about the JavaScript to Native bridge and the way widgets work?
The Tabris.js architecture is pretty easy. Tabris.js consists of two parts: The JavaScript side and the native side. The user’s app is written with JavaScript and the code produces JSON messages under the hood when it gets executed. The native parts interpret those JSON messages and create the UI out of it. Afterwards the user interacts with the UI which leads also to code execution (event handling). This code produces JSON messages again and the roundtrip starts over. >So, basically you can say native widgets are “remote controlled" by JavaScript code. Remember, no cross-compiling and no web-views! The JSON abstraction in the middle allows us to serve multiple platforms, currently iOS and Android. There is no technical hurdle serving more platforms like BlackBerry or Windows Phone. In fact support for those platforms will follow in the future.
Could you share any details about the performance that apps using Tabris.js do provide when it comes to UI responsiveness or processing speed?
Performance was one of our key goals because we know from our users that they are not satisfied with the performance other cross-platfrom frameworks provide. To be precise we wanted to achieve that the user can’t tell if he is using a native app or an Tabris.js app. One good example to feel the performance is parallax scrolling. I think if you can develop an example of parallax scrolling with a framework and it performs well you will have a good feeling about how the framework performs overall. I can just say download the free Tabris.js app in the app store of your choice, click on examples -> Parallax scrolling and feel the performance yourself. If it comes to scrolling, page transitions and animations the goal is always 60fps. With Tabris.js this is not a problem at all.
Finally, why using JavaScript when Swift is available?
The decision to use JavaScript was pretty clear for us. JavaScript is well known in the browser and gets more and more prominent on other systems with node.js. If you take a look e.g. at the language stats on github you will see that JavaScript is the clear winner. Also one important fact is that it’s platform independent. You don’t need a Mac to develop JS code! We also made this fact more prominent. You don’t need a desktop computer to develop Tabris.js apps at all, a simple tablet is enough. This is possible because we provide a platform besides the actual framework on tabrisjs.com. It has an online editor you can use with every browser. It’s also possible to connect your Tabris.js developer app with this platform and execute the code you have typed in the browser directly in the app. The platform also allows you to build the native apps. The platform independence of JavaScript also makes it a good choice as a language for a cross-platform framework. >Another major argument for JavaScript is the huge community and existing codebase. As I mentioned before you can reuse your JavaScript libraries with Tabris.js. This gives you a huge productivity boost because you don’t need to develop every tool or util on your own.
Tabris.js provides apps for iOS and Android that allow to quickly try a few examples that EclipseSource makes available on their GitHub repository or any Tabris.js app that is published on GitHub.