Multiplatform web application frameworks for 1 tablet devices - Part 2
Next Media - MuMuMeSe Multiplatform web application frameworks for tablet devices - Part 2
v1.0
Next Media - MuMuMeSe Version:
Revision History Date Version Description Author <03/09/11> <0.1> Creating the document Mika R <05/01/12> <1.0> Release of the document Arto H, Jouni S, Mika R
List of authors Dr. Mika Rautiainen M.Sc. (Eng.) Arto Heikkinen M.Sc. (Eng.) Jouni Sarvanko
Next Media University of Oulu, 2011 Page 2
Next Media - MuMuMeSe Version:
Table of Contents
1. INTRODUCTION ...... 4
1.1. PROJECT OVERVIEW ...... 4 1.2. MOTIVATION ...... 4
2. SCALABLE MEDIA SERVICE SCENARIO CHARACTERISTICS AND EXAMPLE ...... 5
2.1. SCALABLE MEDIA SERVICE CHARACTERISTICS ...... 5 2.2. SAMPLE WEB APPLICATION SCENARIO FOR SCALABLE MEDIA SERVICES (SANOMA ENTERTAINMENT) ...... 5
3. INSPECTION OF SELECTED WEB APPLICATION FRAMEWORKS ...... 6
3.1. JAVASCRIPTMVC (A) ...... 6 3.1.1. Support for relevant client tablet platforms ...... 6 3.1.2. Support for relevant user interface idioms...... 6 3.1.3. Support for required application features ...... 6 3.1.4. Support for preferred application features ...... 7 3.1.5. References...... 7 3.2. BACKBONE.JS (A) ...... 7 3.2.1. Support for relevant client tablet platforms ...... 7 3.2.2. Support for relevant user interface idioms...... 8 3.2.3. Support for required application features ...... 8 3.2.4. Support for preferred application features ...... 8 3.2.5. References...... 8 3.3. JQUERY MOBILE (A) ...... 9 3.3.1. Support for relevant client tablet platforms ...... 9 3.3.2. Support for relevant user interface idioms...... 9 3.3.3. Support for required application features ...... 9 3.3.4. Support for preferred application features ...... 10 3.3.5. References...... 10 3.4. SENCHA TOUCH (M) ...... 10 3.4.1. Support for relevant client tablet platforms ...... 10 3.4.2. Support for relevant user interface idioms...... 10 3.4.3. Support for required application features ...... 11 3.4.4. Support for preferred application features ...... 11 3.4.5. References...... 11 3.5. SPINE (J) ...... 12 3.5.1. Support for relevant client tablet platforms ...... 12 3.5.2. Support for relevant user interface idioms...... 12 3.5.3. Support for required application features ...... 12 3.5.4. Support for preferred application features ...... 12 3.5.5. References...... 13 3.6. DOJO (J) ...... 13 3.6.1. Support for relevant client tablet platforms ...... 13 3.6.2. Support for relevant user interface idioms...... 13 3.6.3. Support for required application features ...... 13 3.6.4. Support for preferred application features ...... 14 3.6.5. References...... 14 3.7. PHONEGAP WRAPPER (J) ...... 15 3.7.1. Support for relevant client tablet platforms ...... 15 3.7.2. Support for relevant user interface idioms...... 15 3.7.3. Support for required application features ...... 15 3.7.4. Support for preferred application features ...... 16 3.7.5. References...... 16
4. SUMMARY OF THE FRAMEWORKS...... 17
4.1. DISCUSSION AND CONCLUSIONS ...... 19
Next Media University of Oulu, 2011 Page 3
Next Media - MuMuMeSe Version:
Multiplatform web application frameworks for tablet devices - Part 2
1. Introduction
1.1. Project Overview
MuMuMeSe stands for Multichannel Multimarket Media Services. The objective of the project is to develop a concept for internationalization of online media services. More specific, the concept aims to
Find solutions how to integrate, localize, and scale multichannel learning and entertainment services in learning business. Create multimarket extension opportunities for online games Identifies new media service ecosystems in learning business and proposes new business concepts for the industry. Advance learning content creation and distribution processes in media companies Develop media companies’ capabilities to become more agile and flexible in dealing with the challenges of future ways of learning and new emerging technologies.
The research domains for MuMuMeSe are: dynamic media business models, value chains and ecosystems; multimarket and multichannel online learning services; internalization of learning and entertainment services and scalable multimarket entertainment services; and international product process development. This report is part of the international product process development research domain.
1.2. Motivation
In the scope of the project, key technical challenge for scalable product development is to manage the fast progress of web technologies and rapid distribution of service logic to maintain scalability of the service offering. A key challenge for media services is scalable media asset management and utilization according to new and rapidly developing business scenarios that utilize the strengths and opportunities of the Internet. The challenge is twofold: be agile in the development of new features, concepts, products and services but maintain consistency and interoperability over existing products and services. One trend in web service technologies is multiplatform software development using web application frameworks. These technologies utilize web as a platform to deliver content and application logic to variety of different terminals, mobile or desktop using web browser engines. In a nutshell, web application framework offers software framework for developing user specific applications on top of resources that leverage implementation of specific functionalities in the web domain. This report evaluates web application frameworks with respect to MuMuMeSe case goals for scalable multiplatform media service development. The scope of this report is tablet devices; therefore the selection of technologies emphasizes the utility in currently available tablet platforms that have relevant market share.
This is Part 2 of the two part report series. This document evaluates the frameworks’ central features and architectural support for interactive service development. The specifications for the interactive service were made by Sanoma Entertainment.
Next Media University of Oulu, 2011 Page 4
Next Media - MuMuMeSe Version:
2. Scalable media service scenario characteristics and example
2.1. Scalable media service characteristics
In the context of Next Media MuMuMeSe project this study focuses on interactive entertainment services having following characteristics:
Server-side provisioning of statistics game assets Local processing via structured client application utilizing HTML/CSS/JavaScript and data caching Bidirectional communication between client and backend service using REST and JSON technologies
In the development of interactive entertainment services it is important to identify the common practices and state-of-the-art tools that alleviate rapid, scalable cross-platform development on top of modern web technologies.
2.2. Sample web application scenario for scalable media services (Sanoma Entertainment)
Following is a more detailed overview of the preferred web application characteristics provided by Sanoma Entertainment.
Relevant Client Tablet Platforms Required: iOS Required: Android Optional: Qt Optional: Windows 8 (tablet)
User Interface Idioms Swipe navigation (hold finger down to move page left/right/up/down) - GPU accelerated Appearing/disappearing UI elements (e.g. click screen border to bring up/hide a navigation box) - GPU accelerated Tab navigation (alternative parallel views) Drill-down navigation (push down to hierarchy new views, pop back up) - GPU accelerated animations
Required Application Features Distributable through an app store (iTunes Store, Android Market, etc) Installable as an application (appears in the main menu with other apps) Access to In App Purchase / In App Billing to sell products/features inside application User Interface implemented mainly with HTML/CSS/JavaScript Backend independent (HTTP backend server can be implemented with any technology)
Preferred Application Features Persistent caching of static resources (CSS, UI images, JavaScript files, etc) Persistent caching of dynamic data (Ajax responses, JSON, loaded images, etc) Storage of preferences and username/password etc. Application implementable as a single HTML document, with all navigation done through Ajax and transitions
Next Media University of Oulu, 2011 Page 5
Next Media - MuMuMeSe Version:
3. Inspection of selected web application frameworks Some of the web application frameworks were selected by Sanoma Entertainment for further inspection. This section inspects the selected frameworks and their principal characteristics with regard to scalable interactive entertainment service development.
3.1. JavaScriptMVC (A)
JavaScriptMVC is “a collection of the best practices and tools for building JavaScript applications”. It is built on top of jQuery and it consists of the following standalone components: StealJS - Dependency management and a stupidly easy build tool. FuncUnit - There's no better functional testing solution available. Write tests in jQuery syntax, run them via command line or browser. jQueryMX - These plugins are the building blocks of large jQuery applications: model, view, controller, class, fixtures, and more. DocumentJS - A JSDoc compliant tool that turns comments into a searchable documentation app. [1] 3.1.1. Support for relevant client tablet platforms
JavaScriptMVC is compatible with the same set of browsers as jQuery. jQuery does not advertise itself as a mobile framework and the list of supported browsers contains only the most popular desktop browsers. [2] 3.1.2. Support for relevant user interface idioms
3.1.2.1. Swipe navigation Support for swipe navigation is not explicitly declared, but it should work as with any regular web page. JavaScriptMVC has also support for swipe events, i.e. swiping on top of a certain UI element can be detected. [3] 3.1.2.2. Appearing/disappearing UI elements UI elements can be hidden and shown. jQuery also supports fade effects for showing/hiding elements. [4] 3.1.2.3. Tab navigation JavaScriptMVC supports tab navigation. It has a component called ‘Tabs engine’ that provides basic tab functionality. [5] 3.1.2.4. Drill-down navigation There seems to be no direct support for drill-down style hierarchical menus in JavaScriptMVC. 3.1.3. Support for required application features
3.1.3.1. Distributable through an app store JavaScriptMVC does not provide support for distributing applications through an app store. 3.1.3.2. Installable as an application JavaScriptMVC does not provide support for installing the web applications developed with it as local applications. 3.1.3.3. Access to In App Purchase / In App Billing There is no support for in-app purchase in JavaScriptMVC. 3.1.3.4. User Interface implemented mainly with HTML/CSS/JavaScript JavaScriptMVC uses only HTML, CSS and JavaScript for implementing the application.
Next Media University of Oulu, 2011 Page 6
Next Media - MuMuMeSe Version:
3.1.3.5. Backend independent (HTTP backend server can be implemented with any technology) JavaScriptMVC supports accessing backend services RESTfully using HTTP. It supports both JSON and XML as the message format. [6] 3.1.4. Support for preferred application features
3.1.4.1. Persistent caching of static resources JavaScriptMVC itself does not provide any functionality for storing static resources, but this type of caching is implemented in most modern browsers. 3.1.4.2. Persistent caching of dynamic data JavaScriptMVC has very limited documentation (also) on this subject. It does seem to provide a way to store the data models locally using either cookies [7] or a local store [8]. Unfortunately, the documentation does not provide technical insights on how these methods actually work. 3.1.4.3. Storage of preferences and username/password etc. There is no specific support for this feature in JavaScriptMVC. Cookies can be used for storing preferences and most modern browsers have support for storing username and password for different sites. This information could also be stored into a persistent model either locally or remotely using JavaScriptMVC’s APIs. 3.1.4.4. Application implementable as a single HTML document, with all navigation done through Ajax and transitions An application can be implemented in this fashion using JavaScriptMVC, which has quite extensive Ajax functionality. 3.1.5. References
[1] http://javascriptmvc.com [2] Browser Compatibility - jQuery JavaScript Library, http://docs.jquery.com/Browser_Compatibility [3] jQuery swipe event, http://javascriptmvc.com/docs.html#!jQuery.event.swipe [4] jQuery basic effects, http://api.jquery.com/category/effects/basics/ [5] JavaScriptMVC – Tabs engine, http://wiki.javascriptmvc.com/wiki/index.php?title=Tabs_engine [6] JavaScriptMVC – Model overview, http://wiki.javascriptmvc.com/wiki/index.php?title=Model_Overview [7] jQuery cookie storage, http://javascriptmvc.com/docs.html#!jQuery.Model.List.Cookie [8] jQuery local storage, http://javascriptmvc.com/docs.html#!jQuery.Model.List.Local
3.2. Backbone.js (A)
Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a "change" event; all the Views that display the model's data are notified of the event, causing them to re-render. You don't have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves. [1] 3.2.1. Support for relevant client tablet platforms
There is no native support for any platforms with Backbone.js. However, it utilizes only standard web technologies, so it should be compatible with any modern browser with JavaScript support.
Next Media University of Oulu, 2011 Page 7
Next Media - MuMuMeSe Version:
3.2.2. Support for relevant user interface idioms
Backbone.js does not contain any user interface components. Some other framework can be used together with Backbone.js for implementing the UI, for example jQuery. 3.2.3. Support for required application features
3.2.3.1. Distributable through an app store Backbone.js does not provide support for distributing applications through an app store. 3.2.3.2. Installable as an application Backbone.js does not provide support for installing the web applications developed with it as local applications. 3.2.3.3. Access to In App Purchase / In App Billing There is no support for in-app purchase in Backbone.js.. 3.2.3.4. User Interface implemented mainly with HTML/CSS/JavaScript Backbone.js uses only HTML, CSS and JavaScript for implementing the application. 3.2.3.5. Backend independent (HTTP backend server can be implemented with any technology) Backbone.js supports accessing backend services RESTfully using HTTP. By default, it uses (jQuery/Zepto).ajax to make a RESTful JSON request. It can be overridden in order to use a different persistence strategy, such as WebSockets, XML transport, or Local Storage. [2] 3.2.4. Support for preferred application features
3.2.4.1. Persistent caching of static resources Backbone.js itself does not provide any functionality for storing static resources, but this type of caching is implemented in most modern browsers. 3.2.4.2. Persistent caching of dynamic data Backbone.js supports persistent storage of model data (JSON) locally using the localStorage adapter. [3] 3.2.4.3. Storage of preferences and username/password etc. There is no direct support for this feature in Backbone.js. Cookies can be used for storing preferences and most modern browsers have support for storing username and password for different sites. This information could also be stored into a persistent model either locally or remotely using Backbone.js APIs. 3.2.4.4. Application implementable as a single HTML document, with all navigation done through Ajax and transitions Backbone supports Ajax for storing/retrieving data from a server. However, there are no user interface widgets or component included in Backbone.js, so this type of functionality would have to be implemented by the app developer. Also, some JavaScript UI library, such as jQuery, could be used together with Backbone.js. 3.2.5. References
[1] Backbone.js, http://documentcloud.github.com/backbone/ [2] Backbone.sync, http://documentcloud.github.com/backbone/#Sync [3] Backbone localstorage, http://documentcloud.github.com/backbone/docs/backbone-localstorage.html
Next Media University of Oulu, 2011 Page 8
Next Media - MuMuMeSe Version:
3.3. JQuery Mobile (A) jQuery Mobile is a touch-optimized web framework targeted for smartphones and tablet devices. It enables building unified user interfaces across all popular mobile device platforms. It is built on top of the popular jQuery and jQuery UI javascript frameworks. Its codebase is lightweight and it has a flexible, easily themeable design. All pages in jQuery Mobile are built on semantic HTML to ensure compatibility with pretty much any web- enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies progressive enhancement techniques to unobtrusively transform the semantic page into a rich, interactive experience utilizing jQuery and CSS. Accessibility features such as WAI-ARIA are integrated into the framework to provide support for screen readers and other assistive technologies. [1]
3.3.1. Support for relevant client tablet platforms
jQuery Mobile promises to fully support the browsers in iOS (3.2-5.0), Android (2.1-2.3 and Honeycomb) and Windows phone (7-7.5) platforms. There is no specific support for QT as the applications run in the web browser. Nokia’s Symbian^3 is partially supported. [2] 3.3.2. Support for relevant user interface idioms
3.3.2.1. Swipe navigation Support for swipe navigation is not explicitly declared, but it should work as with any regular web page. jQuery Mobile has also quite extensive support for different events that can be triggered from a touch-screen mobile device. These include different touch events (swipe, tap) and device orientation change (vertical/horizontal) events. [3] 3.3.2.2. Appearing/disappearing UI elements This feature is not directly mentioned in the documentation. However, based on the facts that jQuery Mobile is based on jQuery (which supports hiding/showin elements) and that it has good support for touch events, this type of functionality is probably very easy to implement. 3.3.2.3. Tab navigation jQuery Mobile has a widget called “navbar”, which basically provides support for navigation. [4] 3.3.2.4. Drill-down navigation There are various different list menu widgets for drill-down navigation in jQuery Mobile. [5]
3.3.3. Support for required application features
3.3.3.1. Distributable through an app store jQuery Mobile does not provide this feature itself. The documentation suggests using PhoneGap for this purpose. [6] 3.3.3.2. Installable as an application jQuery Mobile does not provide this feature itself. The documentation suggests using PhoneGap for this purpose. [6] 3.3.3.3. Access to In App Purchase / In App Billing There is no support for in-app purchase in jQuery Mobile. 3.3.3.4. User Interface implemented mainly with HTML/CSS/JavaScript jQuery Mobile uses only HTML, CSS and JavaScript for implementing the application. 3.3.3.5. Backend independent (HTTP backend server can be implemented with any technology) There seems to be nothing in the documentation about accessing backend servers. This feature could possibly be achieved by using for example Backbone.js in conjunction with jQuery Mobile to provide data model and persistence features.
Next Media University of Oulu, 2011 Page 9
Next Media - MuMuMeSe Version:
3.3.4. Support for preferred application features
3.3.4.1. Persistent caching of static resources jQuery Mobile itself does not provide any functionality for storing static resources, but this type of caching is implemented in most modern browsers. 3.3.4.2. Persistent caching of dynamic data jQuery Mobile supports caching pages retrieved via Ajax in the DOM. [7] 3.3.4.3. Storage of preferences and username/password etc. There is no direct support for this feature in jQuery Mobile. Cookies can be used for storing preferences and most modern browsers have support for storing username and password for different sites. 3.3.4.4. Application implementable as a single HTML document, with all navigation done through Ajax and transitions This is exactly the implementation style jQuery Mobile is intended for. All the user interface widgets are built based on Ajax and CSS transitions.
3.3.5. References
[1] jQuery Mobile, http://jquerymobile.com/ [2] Mobile Graded Browser Support, http://jquerymobile.com/gbs/ [3] jQuery Mobile Docs – Events, http://jquerymobile.com/demos/1.0/docs/api/events.html [4] jQuery Mobile Docs – Navbar, http://jquerymobile.com/demos/1.0/docs/toolbars/docs-navbar.html [5] jQuery Mobile Docs – Lists, http://jquerymobile.com/demos/1.0/docs/lists/index.html [6] jQuery Mobile Docs – PhoneGap, http://jquerymobile.com/test/docs/pages/phonegap.html [7] jQuery Mobile Docs – Prefetching & caching pages, http://jquerymobile.com/test/docs/pages/page-cache.html
3.4. Sencha Touch (M)
Sencha Touch is a web application framework built specifically to leverage HTML5, CSS3, and Javascript. It utilizes HTML5 to deliver components like audio and video, as well as a localStorage proxy for saving data offline. It extensively utilizes CSS3 in stylesheets to provide a robust styling layer. It is a cross-platform framework aimed for touch enabled devices and is currently compatible with Apple iOS 3+, Android 2.1+, and BlackBerry 6+ devices. It includes special themes created just for those devices. The entire library is under 120kb (gzipped and minified), and can be shrunk by disabling unused features. Sencha touch adds custom touch events on top of the standard events supported by the browser, like tap, double tap, swipe, tap and hold, pinch, and rotate. The latest version of Sencha Touch is 2.0, which is currently in developer preview stage. [1] 3.4.1. Support for relevant client tablet platforms
Sencha Touch is compatible with Apple iOS 3+, Android 2.1+, and BlackBerry 6+ devices. The latest version (2.0) also introduces the ability to build native iOS and Android applications. [2], [3] 3.4.2. Support for relevant user interface idioms
3.4.2.1. Swipe navigation Sencha Touch has a component designed specifically for swipe navigation called Carousel, in which the user can swipe from a view to another either vertically or horizontally. [4] 3.4.2.2. Appearing/disappearing UI elements This feature is not directly mentioned in the documentation. However, there are a few examples,
Next Media University of Oulu, 2011 Page 10
Next Media - MuMuMeSe Version:
such as the Pickers example, that demonstrate similar functionality implemented with Sencha Touch, so this should be quite easy to manage. [5] 3.4.2.3. Tab navigation Sencha Touch supports tab navigation using a component called Tab Panel [6]. Similar functionality can also be implemented using the Carousel component [4]. 3.4.2.4. Drill-down navigation Drill-down style of navigation can be implemented using the List component in Sencha Touch. [7] 3.4.3. Support for required application features
3.4.3.1. Distributable through an app store The ability to build native iOS and Android applications has been introduced in the latest version (2.0) of Sencha Touch. Therefore applications can be distributed through an app store. 3.4.3.2. Installable as an application The ability to build native iOS and Android applications has been introduced in the latest version (2.0) of Sencha Touch. This feature is supported. 3.4.3.3. Access to In App Purchase / In App Billing There is no support for in-app purchase in Sencha Touch. 3.4.3.4. User Interface implemented mainly with HTML/CSS/JavaScript Sencha Touch uses only HTML, CSS and JavaScript for implementing the application. 3.4.3.5. Backend independent (HTTP backend server can be implemented with any technology) Sencha Touch supports accessing backend HTTP servers using AJAX, REST and JSONP. [8]
3.4.4. Support for preferred application features
3.4.4.1. Persistent caching of static resources Sencha Touch itself does not provide any functionality for storing static resources, but this type of caching is implemented in most modern browsers. In a case where the application is packaged as a native application, static resources can be included with the application. 3.4.4.2. Persistent caching of dynamic data Sencha Touch supports persistent storage of model data locally on the client browser using localStorage. [9] 3.4.4.3. Storage of preferences and username/password etc. There is no specific support for this feature in Sencha Touch. Cookies or localStorage can be used for storing preferences and most modern browsers have support for storing username and password for different sites. 3.4.4.4. Application implementable as a single HTML document, with all navigation done through Ajax and transitions Sencha touch provides good support for creating an application in this fashion using for example the Tab Panel component. [6]
3.4.5. References
[1] Sencha Touch, http://www.sencha.com/products/touch [2] Sencha Touch – Native iOS packaging, http://docs.sencha.com/touch/2-0/#!/guide/native_packaging [3] Sencha Touch – Native Android packaging,
Next Media University of Oulu, 2011 Page 11
Next Media - MuMuMeSe Version:
http://docs.sencha.com/touch/2-0/#!/guide/native_android [4] Sencha Touch – Using Carousels, http://docs.sencha.com/touch/2-0/#!/guide/carousel [5] Sencha Touch – Pickers Example, http://docs.sencha.com/touch/2-0/#!/example/picker/index.html [6] Sencha Touch – Using Tab Panels, http://docs.sencha.com/touch/2-0/#!/guide/tabs [7] Sencha Touch – Using Lists, http://docs.sencha.com/touch/2-0/#!/guide/list [8] Sencha Touch – The Data Package, http://docs.sencha.com/touch/2-0/#!/guide/data [9] Sencha Touch – Local Storage Proxy, http://docs.sencha.com/touch/2-0/#/api/Ext.data.proxy.LocalStorage
3.5. Spine (J)
Spine is a simple and lightweight JavaScript framework based on MVC structure. It is inspired by Backbone’s API but contains some fundamental differences. Spine comes with support for HTML5 Local Storage and asynchronous server communication. Spine is written in, CoffeeScript, but it can be used with pure JavaScript also. Spine requires either jQuery or Zepto. [1, 2]
3.5.1. Support for relevant client tablet platforms
Spine claims to work with all major browser (Chrome, Safari, Firefox, IE >= 7) and Spine Mobile refers constantly to iOS examples. Otherwise, no clear definitions are made of support.
3.5.2. Support for relevant user interface idioms
Spine, in itself, does not provide any complex widgets, transitions or event listeners.
3.5.3. Support for required application features
3.5.3.1. Distributable through an app store PhoneGap can be used to make the Spine web application to look like native application. [3] 3.5.3.2. Installable as an application PhoneGap can be used to make the Spine web application to look like native application. [3] 3.5.3.3. Access to In App Purchase / In App Billing PhoneGap can be used to make the Spine web application to look like native application. PhoneGap suggests to use Urban Airship for app purchases. [3, 4] 3.5.3.4. User Interface implemented mainly with HTML/CSS/JavaScript Spine is a JavaScript/CoffeeScript library and, hence, stays in these boundaries, but it does not implement any UI components in itself. 3.5.3.5. Backend independent (HTTP backend server can be implemented with any technology) Spine itself does not seem to have backend functionality, but it apparently demands the use of jQuery or Zepto, which offer RESTful JSON requests. Also, Rails is mentioned to be a good backend API to be used with Spine. [5]
3.5.4. Support for preferred application features
3.5.4.1. Persistent caching of static resources Spine itself does not provide any functionality for storing static resources, but this type of caching is implemented in most modern browsers.
Next Media University of Oulu, 2011 Page 12
Next Media - MuMuMeSe Version:
3.5.4.2. Persistent caching of dynamic data HTML5 Local Storage seems to be supported and there is also an Ajax-based variant for persistent storage. [6] 3.5.4.3. Storage of preferences and username/password etc. Cookies can be used for storing preferences and most modern browsers have support for storing username and password for different sites. This information could also be stored locally into a persistent model with Spinet. 3.5.4.4. Application implementable as a single HTML document, with all navigation done through Ajax and transitions Spine supports the use of Ajax. Beyond that it depends on the used widget set.
3.5.5. References
[1] Spine Documentation – Introduction. URL: http://spinejs.com/docs/introduction [2] Spine Documentation – Getting Started. URL: http://spinejs.com/docs/started_js [3] Spine Documentation – PhoneGap. URL: http://spinejs.com/mobile/docs/phonegap [4] PhoneGap Tools. URL: http://phonegap.com/tools/ [5] Spine Documentation – Rails. URL: http://spinejs.com/docs/rails [6] Spine Documentation – Models. URL: http://spinejs.com/docs/models
3.6. Dojo (J)
Dojo Toolkit is an open source, modular, JavaScript library. It is designed fort rapid development of crossplatform, JavaScript/Ajax-based applications and web sites. Dojo Toolkit contains Dijit UI Library, which offers ready-made widgets for use [1]. It also has standalone widgets and extension under DojoX, but they can still be in experimental stage [2]. One of these extensions is Dojo Mobile, which provides lightweight CSS themes that support development for certain mobile devices [3, 4].
3.6.1. Support for relevant client tablet platforms
Dojo Mobile provides support for webkit-enabled mobile devise like iOS (iPhone and iPad) and Android. They are also currently working on supporting Blackberry 6, WebOS and neutral themes. [3]
3.6.2. Support for relevant user interface idioms
3.6.2.1. Swipe navigation Dojo Mobile supports swipe events for certain widgets like FlippableView. [5, 6, 7] 3.6.2.2. Appearing/disappearing UI elements Dijit widgets can be hidden by altering their CSS display property. Dojo has also wigged support for fade effect. [8, 9] 3.6.2.3. Tab navigation Dijit provides TabContainer widget for tab functionality and Dojo Mobile supports it. [3, 10, 11] 3.6.2.4. Drill-down navigation Dojo toolkit supports drill-down with Tree component. [12]
3.6.3. Support for required application features
3.6.3.1. Distributable through an app store Dojo Mobile is PhoneGap ready. Hence, PhoneGap can be used to pack Dojo Mobile
Next Media University of Oulu, 2011 Page 13
Next Media - MuMuMeSe Version:
applications as native applications, which should enable app store distribution. [3] 3.6.3.2. Installable as an application Dojo Mobile is PhoneGap ready. Hence, PhoneGap can be used to pack Dojo Mobile applications as native applications. [3] 3.6.3.3. Access to In App Purchase / In App Billing Dojo Mobile is PhoneGap ready. Hence, PhoneGap can be used to pack Dojo Mobile applications as native applications, and PhoneGap plugins should support In App Purchase/Billing. PhoneGap also suggest using Urban Airship for app purchases. [3, 13] 3.6.3.4. User Interface implemented mainly with HTML/CSS/JavaScript Dojo Toolkit uses only HTML, CSS and JavaScript for implementing the application. 3.6.3.5. Backend independent (HTTP backend server can be implemented with any technology) Dojo Toolkit claims to support all backend technology. At least Dojo Toolkit contains JsonRest store that provides REST/HTTP interaction with the server using GRUD actions and JSON messages. [14, 15]
3.6.4. Support for preferred application features
3.6.4.1. Persistent caching of static resources Dojo Toolkit itself does not provide any functionality for storing static resources, but this type of caching is implemented in most modern browsers. 3.6.4.2. Persistent caching of dynamic data There seems to be support for persistent data caching using cookies and Dojo Storage, which apparently has several storage methods to choose from, but it is poorly documented in the toolkit’s home page. [16, 17] 3.6.4.3. Storage of preferences and username/password etc. Cookies can be used for storing preferences and most modern browsers have support for storing username and password for different sites. This information could also be stored into a persistent model either locally or remotely using Dojo Toolkit. 3.6.4.4. Application implementable as a single HTML document, with all navigation done through Ajax and transitions Dojo Toolkit has easy to use Ajax functionality. An application can be implemented in this fashion using Dojo Toolkit.
3.6.5. References
[1] Dojo Toolkit Documentation – Dijit. URL: http://dojotoolkit.org/reference-guide/dijit/index.html#dijit-index [2] Dojo Toolkit Documentation – DojoX. URL: http://dojotoolkit.org/reference-guide/dojox/index.html [3] Dojo Mobile – Features. URL: http://dojotoolkit.org/features/mobile [4] Dojo Mobile Test Archive. URL: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/ [5] Dojo Mobile – FlippableView Document Page. URL: http://dojotoolkit.org/reference-guide/dojox/mobile/FlippableView.html#dojox-mobile- flippableview [6] Dojo Mobile Test Archive – Carousel Test Page for iPhone. URL: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/test_Carousel.html [7] Dojo Mobile Test Archive – Swap View Slideshow Test Page for iPhone. URL: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/test_iPhone-SwapView- slideshow.html
Next Media University of Oulu, 2011 Page 14
Next Media - MuMuMeSe Version:
[8] Dojo Toolkit – Dijit Info. URL: http://dojotoolkit.org/reference-guide/dijit/info.html [9] Dojo Mobile Test Archive – Animation Test Page for iPhone. URL: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/test_iPhone-Animation.html [10] Dojo Toolkit Documentation – Dijit TabContainer. URL: http://dojotoolkit.org/reference-guide/dijit/layout/TabContainer.html#dijit-layout-tabcontainer [11] Dojo Mobile Test Archive – TabBar Test Page for iPhone. URL: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/test_iPhone-TabBar.html [12] Dojo Toolkit Documentation – Connecting a Store to a Tree. URL: http://dojotoolkit.org/documentation/tutorials/1.6/store_driven_tree/ [13] PhoneGap Tools. URL: http://phonegap.com/tools/ [14] Dojo Toolkit Features – Integrations. URL: http://dojotoolkit.org/features/integrations [15] Dojo Toolkit Documentation – Dojo Object Store. URL: http://dojotoolkit.org/documentation/tutorials/1.6/intro_dojo_store/ [16] Jens Arps – Persistent Local Storage with Dojo. URL: http://jensarps.de/2010/01/04/persistent-local-storage-with-dojo/ [17] Wikipedia – Dojo Toolkit. URL: http://en.wikipedia.org/wiki/Dojo_Toolkit
3.7. PhoneGap wrapper (J)
PhoneGap (or Apache Callback) is a HTML5 app platform, developed by Nitobi Software that allows building of native applications for mobile devices with web technologies and allows access to APIs and app stores. PhoneGap enables software programmers to build applications using JavaScript, HTML and CSS, instead of often less-known languages such as Objective-C. On the devices, PhoneGap uses WebView or Webkit to show the pages and utilizes Foreign Function Interface (FFI) to access the device. In short, PhoneGap is used to create native applications from web applications with access to device functionality in all major mobile systems. [1, 2]
3.7.1. Support for relevant client tablet platforms
PhoneGap supports all the major mobile operating system with varying feature sets. These include iOS, Android, OS 4.6+, WebOS, WP7, Symbian(Qt) and Bada. [1]
3.7.2. Support for relevant user interface idioms
There seems to be no UI components offered by the PhoneGap, but PhoneGap suggests SencaTouch, jQueryMobile and GWT for UI development. [3]
3.7.3. Support for required application features
3.7.3.1. Distributable through an app store PhoneGap is designed especially for this. You can use either PhoneGap SDK or PhoneGap Build service to make app-store ready applications. [4] 3.7.3.2. Installable as an application Naturally, the applications PhoneGap provides are installable. 3.7.3.3. Access to In App Purchase / In App Billing PhoneGap has a set of plugins that provide this feature: PayPalPlugin and a plugin that utilizes third-party product Urban Airship for both Android and iOS and InAppPurchaseManager for only iOS. [5, 6] 3.7.3.4. User Interface implemented mainly with HTML/CSS/JavaScript PhoneGap is aimed for exactly the kind of web applications that use these technologies.
Next Media University of Oulu, 2011 Page 15
Next Media - MuMuMeSe Version:
3.7.3.5. Backend independent (HTTP backend server can be implemented with any technology) PhoneGap can use HTTP POST to send files to a server. Otherwise there seems to be no other implementation for backend communication.
3.7.4. Support for preferred application features
3.7.4.1. Persistent caching of static resources Static resources are probably built into the application if PhoneGap is used. 3.7.4.2. Persistent caching of dynamic data PhoneGap can store files into the device’s local file system. PhoneGap can also use either the device’s build-in functionality for storage or an implementation of its own. Both cases are hidden under an API that is based on W3C Web SQL Database Specification and W3C Web Storage. [7, 8] 3.7.4.3. Storage of preferences and username/password etc. PhoneGap can store files into the device’s local file system. PhoneGap can also use either the device’s build-in functionality for storage or an implementation of its own. Both cases are hidden under an API that is based on W3C Web SQL Database Specification and W3C Web Storage. [7, 8] 3.7.4.4. Application implementable as a single HTML document, with all navigation done through Ajax and transitions PhoneGap has no limitations that would prevent these kinds of applications, but neither does is offer components to ease the development of such.
3.7.5. References
[1] PhoneGap – Supported Features. URL: http://www.phonegap.com/about/features [2] Wikipedia – PhoneGap. URL: http://en.wikipedia.org/wiki/PhoneGap [3] PhoneGap – UI Development on PhoneGap. URL: http://wiki.phonegap.com/w/page/36767911/UI%20Development%20on%20PhoneGap [4] PhoneGap – Tutorial 11: Using PhoneGap to create an iOS App. URL: http://www.nsbasic.com/app/tutorials/TT11.htm [5] PhoneGap – Tools. URL: http://phonegap.com/tools [6] PhoneGap – Plugins. URL: https://github.com/phonegap/phonegap-plugins [7] PhoneGap Documentation – File. URL: http://docs.phonegap.com/en/1.0.0/phonegap_file_file.md.html [8] PhoneGap Documentation – Storage. URL: http://docs.phonegap.com/en/1.0.0/phonegap_storage_storage.md.html
Next Media University of Oulu, 2011 Page 16
Next Media - MuMuMeSe Version:
4. Summary of the frameworks
Deployment Size iOS Android QT Win 8 JavaScriptMVC Browser Varies on which Probably Probably No Probably components are included Backbone.js Browser 4.6KB + Probably Probably No Probably dependencies (varying) jQuery Mobile Browser 24KB + 7KB CSS Yes Yes No WP7 supported Sencha Touch Browser 120KB Yes Yes No No (also native in 2.0) Spine Browser 2K minified & Probably Probably No Probably compressed Dojo Browser Base size 31KB Yes Yes No No compressed (512KB uncompressed) + other components PhoneGap Native About 250KB Yes Yes Yes WP7 minimum supported Figure 1. General information
Swipe Appearing/disappearing Tab Drill-down navigation navigation UI elements navigation JavaScriptMVC Yes Yes No No Backbone.js Browser No No No default jQuery Mobile Yes Probably (not Yes Yes documented) Sencha Touch Yes Yes Yes Yes Spine Browser No No No default Dojo Yes Yes Yes Yes PhoneGap No No No No Figure 2. Support for UI idioms
Next Media University of Oulu, 2011 Page 17
Next Media - MuMuMeSe Version:
App store Installable as In-App Only Backend distribution app. purchase HTML, independent Javascript, CSS JavaScriptMVC No No No Yes Yes Backbone.js No No No Yes Yes jQuery Mobile No (Yes using No (Yes using No Yes Not documented PhoneGap) PhoneGap) (Possibly using e.g. Backbone.js) Sencha Touch Yes Yes No Yes Yes Spine No (Yes using No (Yes using No Yes Yes PhoneGap) PhoneGap) Dojo No (Yes using No (Yes using No Yes Yes PhoneGap) PhoneGap) PhoneGap Yes Yes Yes (with Yes Can make HTTP a plugin) POST for files Figure 3. Support for required application features
Static caching Dynamic caching Preferences and Implementable username/passwd as single HTML page JavaScriptMVC Browser default Json data Browser default Yes Backbone.js Browser default Json data Browser default No (Requires using some UI lib) jQuery Mobile Browser default Visited pages Browser default Yes Sencha Touch Browser default Json data Browser default Yes Spine Browser default Yes, but poorly Browser default No (Requires documented using some UI lib) Dojo Browser default Yes, but poorly Browser default Yes documented PhoneGap Yes Yes Yes No (Requires using some UI lib) Figure 4. Support for preferred application features
Next Media University of Oulu, 2011 Page 18
Next Media - MuMuMeSe Version:
4.1. Discussion and conclusions
The information for writing this report was gathered mainly from the available documentation for each framework. The quality and quantity of the documentation varied quite strongly from excellent to virtually unusable. The frameworks that have some business model attached to them seemed to have the best documentation, while the purely community-based projects seemed to be less focused on this area. After examining all the JavaScript frameworks in the scope of this report it is quite easy to divide them into three distinct groups: general-purpose web frameworks, mobile web frameworks and native wrapper frameworks.
General-purpose web frameworks
Backbone, Spine and JavaScriptMVC can be categorized as general-purpose web frameworks, because they are not targeted for any specific device or platform. While they will probably work on a variety of different desktop and mobile platforms, they lack many of the mobile-specific features that are relevant to the application scenario this report is based on. Backbone and Spine provide merely a skeleton on top of which to build your MVC application, acting as a sort of event bus between the different components of the user interface and the data model. They do not provide for example any ready user interface widgets, but for example jQuery can be used together with these frameworks to implement the UI. JavaScriptMVC has some UI components, but they are not specifically designed for mobile use. It also supports some touch-based events, but generally speaking it has very minimal support for mobile devices.
Mobile web frameworks
Dojo, jQuery Mobile and Sencha Touch form the group of mobile web frameworks. These frameworks offer rich variety of widgets to use and are aimed (or have extension) for mobile use. They are very complete products with little need for additional frameworks.
Native wrapper frameworks
PhoneGap is distinctive from the other frameworks and is the only representative of native wrapper frameworks. It is specifically designed for providing native support for mobile devices. It offers ways to use native functionality via JavaScript and packs the web applications into native form thus enabling the use of app stores. Naturally, PhoneGap has also quite good support for different mobile device platforms. Because of these unique features, some of the other frameworks have been advertising their compatibility with PhoneGap. These include Dojo, jQuery Mobile, Spine and Sencha Touch. Recently Sencha Touch has been aiming to also provide native support, but the features are still under development. In the future, though, Sencha Touch could reach independence from PhoneGap making it an even more complete framework for mobile development.
About In App Purchasing
In App Purchasing is a recent trend in mobile application ecosystems. It allows developers to create free applications and then generate revenue by unlocking features or providing downloadable content to the existing users of the application. The name describes the simplicity of the process: users don’t have to leave the application to complete the purchase. Google, Apple and also Nokia support In App Purchasing via their software market billing systems with the recent operating system versions. To use the In App Purchasing developers need to use platform specific implementations that tie billing to active user accounts in respective platforms. Windows Phone 7 platform does not support the feature natively at the time of writing this report, but can be implemented via third party services, such as Linxter. In App Purchasing involves managing purchase transactions, securing payment, validating receipt and managing and delivery of extra content to the application. There are third party vendors that
Next Media University of Oulu, 2011 Page 19
Next Media - MuMuMeSe Version:
Concluding remarks
This report evaluates multiplatform web frameworks, their characteristic features and architectural support for cross-platform service development. The evaluation focused on interactive service requirements targeting current tablet device markets and tablet-oriented platforms. The report shows that Sencha Touch and Phonegap offer the best combination for the service scenario requirements. Additionally, third party service providers were identified that enable In App Purchasing and In App content management and distribution over different platforms.
Next Media University of Oulu, 2011 Page 20