The Definitive Guide to Developing Portable Tizen Apps

Abstract

This article complements the online lecture series delivered at the annual Tizen Developer Conference and elsewhere. Titled “JavaScripting Tizen Web Apps” and “Tizen Application Portability,” these lectures serve to guide developers interested in Tizen and the benefits of portable development strategies. 

An analysis of the available Tizen API begins with the consideration of standards and portable web technologies. The Tizen architecture is reviewed, and contrasting its web and native frameworks, leads to an inspection of Tizen’s deployment approach and how it affects web logic and content of both server-based and locally installed apps. 

While evaluating strategies to leverage JavaScript libraries, a number of popular candidates are presented. Attention is given to the web framework embedded version of jQuery Mobile as well as third-party alternatives like Sencha Touch, Dojo Mobile, and Enyo JS. Along with a short explanation of native-to-JavaScript bridges and their potential in portably employing the Tizen Device API, code samples illustrate the utility of popular JavaScript libraries. 

Introducing Tizen

As far as mobile-optimized operating systems are concerned, Tizen is certainly a new player. This unique platform arises from a partnership between Samsung, Intel, and the Linux Foundation and intends to soon power a wealth of devices. According to Samsung, “We plan to release new, competitive Tizen devices within this year and will keep expanding the lineup depending on market conditions.” As the Tizen OS and APIs mature, one thing is clear: Tizen architects are putting the concept of portable applications built on standard technologies first and foremost.

In this article, we’ll cover the basics of how Tizen APIs support the development of portable apps. Regardless of whether the developer uses the official Tizen software development kit (SDK) or other development tools, apps written for Tizen’s web framework can be ported to other platforms leveraging web standards relatively easily. Being an emerging technology, Tizen stands to benefit even more from the porting of pre-existing web apps. 

Table of Contents

• Source Code Listings

• Motivation Behind Portable Development

• The Worldwide Soup

• Tizen Architecture

  • Vendors and Device Segments

  • Web Runtime and Web Framework

  • WebKit Adoption

  • GNU/Linux and Sources

• JavaScript Libraries

  • JQuery Mobile

  • Sencha Touch

  • Dojo Mobile

  • Enyo JS

  • HTML5 Boilerplate

  • Native-to-JavaScript Bridges

  • Package Standard

  • Store Deployment

• Tizen Development Tools

  • Tizen Integrated Development Environment

  • Tizen Emulator

  • Tizen simulator

• Summary

  • Benefits of Portability

• Works Cited

  • List of Figures

Source Code Listings

1. Declarative programming with jQuery Mobile and multi-page encapsulation

2. A complete Sencha Touch index.html, suitable even for large projects

3. Implementation of the entry point to a Sencha Touch app

4. A small Dojo Mobile app implemented completely in index.html

5. A small Enyo JS app implemented completely in index.html

Motivation Behind Portable Development

While developers and users alike profit from apps that work on a variety of operating systems, it’s interesting that those most influencing Tizen’s architecture value its portable nature with respect to the diverging user experiences coming in future Tizen devices. Sunil Saxena states, “The emphasis for Tizen architecture is WebAPI to ensure applications work across different architectures and different profiles,” meaning that a low-power navigation computer will execute and display a geographical app just as well as a higher-power notebook or tablet computer would. Portable APIs empower software reuse as well, which can drive down expensive engineering costs considerably. 

While considering the wealth of Tizen platform support for portable development, it’s important to remember that Tizen provides non-standard yet valuable infrastructure. Goodies lie between the sandwich of POSIX-friendly GNU/Linux kernel and Tizen frameworks. Namely, rather than Qt or Gtk, the Enlightenment Foundation Libraries (EFL) provides Tizen with widgets and supporting graphical building blocks. Although EFL-linked apps build on Unix-like kernels using portable and standard ISO C, it’s not reasonable to expect them to work on Windows Phone, iOS, or the Qnx-based Blackberry 10, to name a few. In this article, we narrow the definition of portable application development to focus our attention on web technologies like JavaScript, CSS, and HTML. 

The Worldwide Soup

Hyper buzzwords aside, most developers of modern web apps appreciate the rich feature set provided by the recent advancements in HTML5, CSS3, JavaScript, and related web technologies like XMLHttpRequest (XHR) or the variety of JavaScript libraries. In fact, web interfaces are so often mixed that many refer to this new web soup as simply being composed of HTML5 — not to mention that HTML5 is an emerging standard in itself.

Standardized interfaces and implementations like HTML have accelerated the adoption of web technologies, which has, in turn, strengthened the very standards (W3C, ECMA, IETC, ISO) that foster portability. Meanwhile, development communities have overtaken the pace of standards production, which has given rise to a number of databases and utilities useful for evaluating standards compliance, API adoption, and general compatibility of web technologies. Some examples include:

• HTML5TEST

• HTML5 PLEASE

• Modernizr

• Can I use _____ ? 

• What is My IP?

• Mobile Frameworks Comparison Chart

Tizen Architecture

The Tizen work group’s stated objective in designing the kernel, core, framework, and application layers involves leveraging HTML5’s robust capabilities and cross-platform flexibility to empower developers of portable applications. “The Tizen SDK and API allows developers to use HTML5 and related web technologies to write applications that run across multiple device segments, including smartphone, tablet, smart TV, in-vehicle infotainment, and netbook,” (excerpt from "Tizen Conference Announced").

Vendors And Device Segments

The construction of Tizen differs from one device segment to the next. Vendors can take advantage of the open nature of Tizen’s development cycle to modify the OS to suit their needs, and several key system components deviate to demonstrate this. For example, Tizen’s official IVI image profile distributes the Qt library alongside EFL. Each finished Tizen image aggregates software packaged in the RPM format corresponding to a specific architecture (like IA32 or ARMv71) and device segment. 

What unifies these Tizen variants is the fact that their component diagrams are arranged like a sandwich, with applications resting on the framework layer, which in turn lies on the core. Each layer is a collection of components in itself, and even the core consists of the Linux kernel, device drivers, and a variety of low-level APIs and subsystems. 

Web Runtime and Web Framework 

One of the most important components is the Tizen Web Runtime, the component that allows web apps to run outside the browser. Tizen users can install and use web apps as if they were standalone applications, and the Web Runtime manages the life cycle, system calls, execution, resources, platform integration, and access control of the web app. 

Similarly named, the Web Framework aggregates the Web Runtime along with the W3C API, Device API, and a UI framework containing widgets derived from jQuery Mobile. 

By exposing the standard W3C and unique Device APIs, Tizen offers added value to web apps that could otherwise only render HTML and carry out generic JavaScript. The Tizen W3C API implements web standards relating to DOM, styles, device, graphics, media, communication, storage, security, UI, performance, location, and widget. The Device API provides advanced logic employing sensors, file I/O, capturing, telephony, FM radio, speech recognition, and HDMI output.

WebKit Adoption

To render web content, the Tizen Web Runtime employs the WebKit layout engine similarly to Android, Chrome, Safari, MeeGo, Qt, and a number of other WebKit-dependent projects. A consideration when choosing a JavaScript library is the indication of WebKit support as well as support for whichever engine the developed software should be portable on. 

GNU/Linux and Sources

Rather than blurring the lines of free license by releasing binary blobs of kernel and libc while publishing only sanitizing header files, Tizen’s GNU/Linux kernel and other sources are complete, online, and publicly accessible. Any developer can pull a copy of these sources and build their own Tizen image ready for installation to hardware. After installation, Tizen is bootstrapped by the U-Boot boot loader as with many low-power or embedded systems. 

JavaScript Libraries

To maximize portability, we focus on the model of Tizen development dependent on a web framework. It’s this model that minimizes system dependencies and empowers the development of the far reach in apps. 

Although the Tizen Web Framework incorporates a custom-themed JQuery Mobile installation, the competing web frameworks aren’t only useful for porting existing applications. Rather, they’re perfect for original Tizen development as well when leveraging the skill set of a developer already familiar with Dojo, requiring the complex fine-tuned JavaScript manipulation for which Sencha Touch is known, or just reusing code written in a pre-dating JavaScript library like Enyo JS. 

JQuery Mobile

This is one of a few libraries that support more than WebKit rendering. In fact, jQuery Mobile supports the WebKit, Gecko (Mozilla), Presto (Opera), and Trident (Microsoft) engines as well. With such attention to compatibility, it’s no surprise that Tizen already enjoys A-grade support, with a fully enhanced experience and Asynchronous JavaScript and XML (AJAX) based animated page transitions. This compatibility factor is an advantage when developing Tizen web apps to be portable with Mozilla’s Firefox OS or Microsoft’s Windows Phone.

   <head>
     <link rel="stylesheet" href="//code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" />
     <script src="//code.jquery.com/jquery-1.8.2.js"></script>
     <script src="//code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.js"></script>
   <body>
  <div data-role="page" id="firstpage">
    <div data-role="header">
      <h1>Nice header</h1>
    </div>
    <div data-role="content">
      <p>I'm the first page. Click for <a href="#secondpage">Second page</a></p>
    </div>
  </div>
  <div data-role="page" id="secondpage">
    <div data-role="content">
      <p>I'm the second page. Click for <a href="#firstpage">First page</a></p>
    </div>
  </div>
  </body>

Listing 1: Declarative programming with jQuery Mobile and multi-page encapsulation 

jQuery Mobile’s most unique feature is its accommodation of the declarative programming paradigm to best suit those familiar with static web pages. It ingeniously rearranges the DOM when parsing static HTML and avoids page HTTP round trips and page refreshes without developer intervention. 

Sencha Touch

This popular JavaScript library differs from declarative alternatives in that its structural nature works almost exclusively with JavaScript. Typical with Sencha Touch apps, the directory index (index.html) looks empty and really just serves as a boot loader to the JavaScript logic that in turn builds the document object model (DOM) dynamically. 

The user’s browser window layout is constructed by supplying the Sencha Touch library with JavaScript code and JSON data that the library uses in deciding how to construct the view. This elegant approach has its advantages but involves a steeper learning curve than jQuery Mobile.

  <!DOCTYPE html>
  <html>
  <head>
    <title>Simple Sencha</title>
    <link rel="stylesheet" href="//cdn.sencha.com/touch/sencha-touch-2.1.1/resources/css/sencha-touch.css" />
    <script src="//cdn.sencha.com/touch/sencha-touch-2.1.1/sencha-touch.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <!-- Nothing here! -->
  </body>
  </html>

Listing 2: A complete Sencha Touch index.html, suitable even for large projects 

The entry point of web apps built with Sencha is a handler for the launch event fired by Sencha logic when the library is loaded. A lot of Ext keywords in this and other code reveal that this architecture evolved from the historically significant Sencha ExtJS library.

  Ext.application({
    launch: function() {
      alert('App launched!');
    }
  });

Listing 3: Implementation of the entry point to a Sencha Touch app 

Recent developments in Sencha Touch have led to an important release commonly referred to by its main version 2 [Sencha01]. A number of additions were made, including some native-to-JavaScript bridging on iOS and Android as well as a build infrastructure to produce the corresponding native packages. This is all quite useless to Tizen, unfortunately, unless Sencha moves beyond an Android/iOS-centric support model. 

Dojo Mobile

The Dojo Mobile library is similar to jQuery Mobile in that its cutting-edge mobile and touch-specific logic extends the mature core of the JavaScript Dojo Toolkit library. It allows the developer to program the DOM declaratively by parsing simple HTML and automatically marshals page data over XHR similar to jQuery Mobile to perform smooth page transitions and effects. But Dojo Mobile is unique for providing a modular loading mechanism and distributing its JavaScript library bundled in modules, which implement Dojo APIs responsible for data abstraction and DOM manipulation. It incorporates internationalization (i18n) components by design and offers a lot in terms of abstraction of data from control flow. Dojo Mobile best suits iOS, Android, and Blackberry for their look and feel, but its widget theme adaptation is flexible enough to put Dojo Mobile on par with the other competing portable JavaScript libraries for Tizen web app development as well.

  <!DOCTYPE html>
  <html>
  <head>
    <title>Our Dojo Test</title>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>
    <script>
      require([
      "dojox/mobile/parser",
      "dojox/mobile",
      "dojox/mobile/deviceTheme"],
      function(parser) {
        parser.parse();
      });
    </script>
  </head>
  <body>
    <div id="settings" data-dojo-type="dojox.mobile.View">
      <h1 data-dojo-type="dojox.mobile.Heading">Tizen App with Dojo Mobile</h1>
    </div>
  </body>
  </html>

Listing 4: A small Dojo Mobile app implemented completely in index.html 

Enyo JS

At the heart of Enyo JS is a simple but powerful encapsulation model, which helps to factor application functionality into self-contained building blocks that are easy to reuse and maintain. One of the appealing factors of this library is its widespread use in plentiful web apps both new and old. Enyo certainly profited from a wide distribution of the Linux-based WebOS with the historical Palm and HP devices, in which Enyo was used as the primary web framework. 

  <!DOCTYPE html>
  <html>
  <head>
    <title>Our Enyo Test</title>
    <link rel="stylesheet" href="//enyojs.com/enyo-2.2.0/enyo.css" />
    <script src="//enyojs.com/enyo-2.2.0/enyo.js"></script>
  </head>
  <body>
    <script>
      new enyo.Control({content: "Hello From Enyo"}).renderInto(document.body);
    </script>
  </body>
  </html>

Listing 5: A small Enyo JS app implemented completely in index.html 

HTML5 Boilerplate

Although the Tizen IDE template for HTML5 Boilerplate projects was removed in the SDK 2.0 release, HTML5 Boilerplate still deserves attention for the utility it provides and broad following among developers. The HTML5 Boilerplate deliverables can be easily merged with any of the web app project templates in the Tizen IDE, and when used wisely, it accelerates the development of logic common to the early stages of most web apps. Of particular interest in HTML5 Boilerplate is the provision of Modernizr browser detection and Normalize CSS consistency logic. Other boilerplate files relate to Apache, custom 404 pages, cross-domain, robot indicators, and icons. 

Native-to-JavaScript Bridges

Certain Tizen APIs (even in the Web Framework) feature entry points to unportable constructs responsible for components such as time, settings, connection, contacts, device, file, media, notification, storage, events, camera, and capture. Employing any of these APIs reduces the portability of the application in question. To regain lost cross-platform portability, it’s good to know about projects implementing native-to-JavaScript bridge technology for hybrid apps. 

This portability framework exposes a set of JavaScript APIs that allow a developer to access native device functions like camera manipulation or accelerometer inspection. Combined with a UI framework such as jQuery Mobile, Dojo Mobile, or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript. 

There are not many other competing hybrid JavaScript frameworks, but the Titanium branded tools by Appcelerator are being ported to support Tizen APIs. 

Package Standard

Tizen web apps are packaged according to the W3C widget packaging specification, just as the Wholesale Applications Community (WAC) mandated. 

Store deployment

Nevertheless, packages are only part of the deployment strategy. After much speculation, the official Tizen Store was mentioned during the Mobile World Congress 2013 but without details of infrastructure or APIs. Since there’s been no official release of this technology, for the time being, packages must be consumed either in the traditional way or by leveraging any of a number of competing yet compatible third-party web app servers providing a store-like experience: 

• 5Apps

• AppUp

• AppsFuel

Tizen Development Tools

The Tizen SDK is a comprehensive set of tools for developing Web applications, native applications, and the platform components for Tizen. It contains an install manager, IDE, tools, documents, samples, and a platform image. Once installed, its logical file hierarchy includes ide, install-manager, library, platforms, and tools. 

Tizen Integrated Development Environment

The Tizen integrated development environment (IDE) is an Eclipse-derived program, so it requires a Java runtime to work. Because the Eclipse core provides so much customization and leverages Java APIs to do this, there are special requirements involved. Contrary to the theoretically portable nature of Java, problems arise when using OpenJDK and other alternative Java environments. Particularly, Oracle’s Java v6 JDK (not JRE) or later is required. 

Figure 9: The Tizen SDK 2.0 Eclipse-based IDE, GNU Free Documentation License 1.3

Regardless of the installation requirements, developers of the Tizen SDK have chosen wisely in deriving from the Eclipse IDE. It provides plugin infrastructure to support a comfortable method of generating certificates, event injection, validating code, packaging applications, and other activities. 

Other important Tizen SDK deliverables include the Tizen emulator and simulator. While these tools differ internally, they perform similar duties in imitating the run time behavior of the operating system. 

Tizen Emulator

The Tizen emulator uses the QEMU machine emulator and virtualizer to provide the developer with a full hardware- and GPU (GLES)-accelerated environment when the host system (with KVM or HAX) and hardware supports it. A number of convenient options appear once the emulator runs to enable screen rotation and scaling, screenshot manipulation, host keyboard input capturing, ram dump diagnosis, and shell access. The emulator can additionally field system events (battery, ear jack, USB, received signal strength indication, SD card, geolocation, NFC, accelerometer, voice and text telephony, light, motion, and proximity sensors) injected by the Tizen IDE or SDB (described below) for a high degree of extensive testing. 

Tizen Simulator

Figure 10: The Tizen SDK 2.0 WRT Simulator, GNU Free Documentation License 1.3

Tizen SDK developers have released a special web-based test facility called the Tizen simulator. The simulator is not an independent piece of software, however, but is rather an interesting blend of the Apache Ripple web runtime simulator already in use by groups like Cordova, WAC, and WebWorks. Ripple isn’t a binary, either. Instead, it is a web app in itself that bootstraps by starting a web browser and loading standard web logic. In order to mitigate problems with XHR cross and null origin access, the Tizen simulator makes assumptions about the installed host web browser, requiring either Google Chromium or Chrome by hard-coding start-up arguments like “allow-file-access-from-files” and “disable-web-security.” 

Concerning the Tizen emulator and simulator, release engineers have correctly named these tools in describing their emulating and simulating natures. It follows that the Tizen simulator includes no kernel of its own, exposes no APIs at all, and is useless for testing drivers, security, primitive graphics, and native development of any kind. But before throwing away the piece, it’s important to know one thing: The Tizen simulator is priceless when testing web applications that benefit from a quick edit and test interpretation cycle. 

Figure 11: Performance bottlenecks diagnosed using the ‘Dynamic Analyser,’ GFDL 1.3 

Packed into the Tizen SDK are a few convenience tools as well as performance-boosting diagnosis tools. Of particular interest to software designers and graphical tool enthusiasts are the UI Builder, UI Effect Builder, and Dynamic Analyser. 

Summary

While mobile strategy comparisons of web and native app development assume mutually exclusive APIs, Tizen provides a unique Web Framework serving elements of both worlds. Web apps can leverage this to benefit from feature-complete and portable standards-based development. Learning the ropes of web app development for Tizen and other mobile platforms makes sense for these reasons. 

Figure 12: A Samsung-made Tizen device presented at Mobile World Congress 2013

Benefits of Portability

Devices on which Tizen runs have potential regardless of mobile strategy and it’s likely that many will embrace Tizen’s ability to support native development for good reasons. Nevertheless, advancing both Tizen and developers’ interests in a market of emerging technology by employing standard APIs as provided by Tizen’s Web Framework can be favorable. If the Tizen app landscape is best served by both quality and variety, then developers should turn their attention to the portable development of both original and existing (ported from other platforms) web apps. Tizen’s architects have gone to lengths to allow low-level APIs to be leveraged from web apps. Developing portable Tizen apps using web technologies is both practical and effective. 

Works Cited

• About Enyo, Core Concepts, 2012, Web Applications Working Group
• Packaged Web Apps (Widgets), November 2013, Ming Jin 
• Tizen Web Runtime, In Tizen Developer Conference, San Francisco, California, May 2012
• Mobile Graded Browser Support, 2013, Jungah Lee 
• Samsung to Sell Tizen-Based Handsets After Motorola Deal, Businessweek, January 2013, Ingo Muschenetz 
• Titanium Mobile Tizen Preview Now Available, Appcelerator Developer Blog, February 2013, Mirko Müller
• Tizen‘s App-Store Erstmals Gezeigt, Tizen Blog, March 2013, René Pourtier and Luc Yriarte 
• Enabling Cordova on Tizen, In Tizen Developer Conference, San Francisco, California, May 2012, Sunil Saxena
• Tizen Architecture, In Tizen Developer Conference, San Francisco, California, May 2012, Sunil Saxena
• Tizen Architecture Overview, In Linux Foundation Collaboration Summit, San Francisco, California, April 2012, Michael Schloh von Bennewitz
• Tizen Application Portability, In Tizen Developer Conference, San Francisco, California, May 2012. 
• About Apache Cordova, 2012
• Tizen, March 2013
• Tizen 2.0 Release Notes, February 2013, Kevin Wang and Darren Hjung
• Porting Guide, February 2013, Tizen Workgroup
• Tizen Conference Announced, 2012
• Samsung RD-PQ Handset Photo, March 2013

List of Figures

1. W3C and other standards

2. Tizen layered architecture

3. Browser and Web Runtime

4. JavaScript library screenshots

5. Divergence of rich and reach

6. Web app installation structure

7. Web app file system layout

8. Tizen SDK icons

9. Eclipse-based IDE

10. Ripple-based WRT simulator

11. Dynamic performance analyser

12. Samsung made the Tizen device