i “portizapps” — 2013/4/28 — 0:48 — page i — #1 i i i Developing Portable Tizen Apps Companion to Tizen Application Portability and JavaScripting Tizen Web Apps Michael Schloh von Bennewitz 28. April 2013, Version 0.93 i i i i i “portizapps” — 2013/4/28 — 0:48 — page ii — #2 i i i This text originates from Tizen research undertaken by the author and associates. It attempts to explain emerging technology in a changing state. If updates of the information in this article become necessary, they will be posted on the web sites: http://mobile.dzone.com/articles/devportizapps/ http://css.dzone.com/articles/devportizapps/ Copyright c 2013 Michael Schloh von Bennewitz All rights reserved Published by DZone, Incorporated 150 Preston Executive, Suite 201 Cary, North Carolina 27513 United States of America i i i i i “portizapps” — 2013/4/28 — 0:48 — page iii — #3 i i i Contents 1 Introducing Tizen 1 1.1 Motivation behind portable development .................... 1 1.2 The world wide soup ............................... 2 2 Tizen Architecture 3 2.1 Vendors and device segments ........................... 3 2.2 Web Runtime and Web Framework ....................... 4 2.3 WebKit adoption ................................. 4 2.4 GNU/Linux and sources ............................. 5 3 JavaScript Libraries 6 3.1 JQuery Mobile .................................. 6 3.2 Sencha Touch ................................... 7 3.3 Dojo Mobile .................................... 8 3.4 Enyo JS ...................................... 9 3.5 HTML5 Boilerplate ................................ 9 3.6 Native-to-JavaScript bridges ........................... 9 3.7 Package standard ................................. 10 3.8 Store deployment ................................. 11 4 Tizen Development Tools 12 4.1 Tizen integrated development environment ................... 12 4.2 Tizen emulator .................................. 13 4.3 Tizen simulator .................................. 13 5 Summary 15 5.1 Benefits of portability ............................... 15 iii i i i i i “portizapps” — 2013/4/28 — 0:48 — page iv — #4 i i i List of Figures 1 W3C and other standards ............................ 2 2 Tizen layered architecture ............................ 3 3 Browser and Web Runtime ............................ 4 4 JavaScript library screen shots .......................... 6 5 Divergence of rich and reach ........................... 9 6 Web app installation structure .......................... 10 7 Web app file system layout ............................ 10 8 Tizen SDK icons ................................. 12 9 Eclipse-based IDE ................................. 12 10 Ripple-based WRT simulator .......................... 13 11 Dynamic performance analyser ......................... 14 12 Samsung produced Tizen device ......................... 15 iv i i i i i “portizapps” — 2013/4/28 — 0:48 — page v — #5 i i i Source Code Listings 1 Declarative programming with jQuery Mobile and multi page encapsulation . 6 2 A complete Sencha Touch index.html, suitable even for large projects .... 7 3 Implementation of the entry point to a Sencha Touch app ........... 8 4 A small Dojo Mobile app implemented completely in index.html ....... 8 5 A small Enyo JS app implemented completely in index.html ......... 9 v i i i i i “portizapps” — 2013/4/28 — 0:48 — page vi — #6 i i i Abstract This article complements the online lecture series delivered at the annual Tizen Developer Confer- ence 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 availabile Tizen APIs begins with consideration of standards and portable web technologies. The Tizen architecture is reviewed, and contrasting its Web and Native Frameworks leads to a 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. vi i i i i i “portizapps” — 2013/4/28 — 0:48 — page 1 — #7 i i i 1 Introducing Tizen As far as mobile-optimized operating systems are concerned, Tizen [Tiz13c] is certainly a new player. This unique platform enjoying a part- nership between Samsung, Intel, and the Linux Foundation 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 ex- panding the lineup depending on market conditions.” [Lee13] As the Ti- zen 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 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 [Sax12a][Tiz13a] 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 [WH13]. 1.1 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 in 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,” [Sax12b] 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 devel- opment it’s important to remember that Tizen provides non standard yet- infrastructure as well. 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. 1 i i i i i “portizapps” — 2013/4/28 — 0:48 — page 2 — #8 i i i 1.2 The world wide soup Hyper buzzwords aside, most developers of modern web apps appreciate the rich feature set provided by the recent advancements in HTML5, CSS3, JavaScript, as well as related web technologies like XMLHttpRequest (XHR) or the variety of JavaScript libraries [SvB12]. 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 a emerging standard in itself. Standardized interfaces and implementations like HTML have accel- erated the adoption of web technologies which has in turn strength- ened 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 compli- ance, API adoption, and general compatibility of web technologies. Figure 1: Regards to Some examples include: standards, W3C TSL http://www.html5test.com/ http://www.html5please.com/ http://www.modernizr.com/ http://www.caniuse.com/ http://www.fmbip.com/litmus/ http://www.markus-falk.com /mobile-frameworks-comparison-chart/ 2 i i i i i “portizapps” — 2013/4/28 — 0:48 — page 3 — #9 i i i 2 Tizen Architecture The Tizen work group’s stated objective in designing the kernel, core, framework, and appli- cation 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 multi- ple device segments, including smartphone, tablet, smart TV, in-vehicle infotainment, and netbook.” [Wor12] Figure 2: Architecture of the Tizen SDK 2.0, CC Attribution 3.0 Unported 2.1 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 [Cla12]. 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. 3 i i i i i “portizapps” — 2013/4/28 — 0:48 — page 4 — #10 i i i What unifies these Tizen variants is the fact