Next Media - MuMuMeSe

ubiquitousstrumpetMobile - Wireless

Dec 10, 2013 (3 years and 10 months ago)

60 views

Multiplatform
web application frameworks for
tablet devices - Part 1




Next Media - MuMuMeSe
Multiplatform web application frameworks
for tablet devices - Part 1

v1.0



Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 2

Revision History
Date Version Description Author
<10/08/11> <0.1> Creating the document Mika R
<01/09/11> <0.7> State of the art, information gathering for selected
frameworks
Jouni S, Arto H
<03/09/11> <1.0> Finalisation of the part 1 Mika R







List of authors
Dr. Mika Rautiainen
M.Sc. (Eng.) Arto Heikkinen
M.Sc. (Eng.) Jouni Sarvanko




Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 3

Table of Contents
1. INTRODUCTION ............................................................................................................................ 4
1.1. PROJECT OVERVIEW .................................................................................................................... 4
1.2. MOTIVATION ............................................................................................................................... 4
2. OVERVIEW OF THE WEB APPLICATION FRAMEWORKS ................................................ 5
2.1. WEB APPLICATION ARCHITECTURES ............................................................................................ 5
2.1.1. Model View Controller ........................................................................................................... 5
2.1.2. The use of MVC pattern in web application frameworks ........................................................ 5
2.1.3. Push vs. Pull communication .................................................................................................. 6
2.2. CHARACTERISTIC FEATURES ........................................................................................................ 7
2.2.1. Web caching ............................................................................................................................ 7
2.2.2. Security ................................................................................................................................... 7
2.2.3. Web services ........................................................................................................................... 8
2.2.4. Use of databases ..................................................................................................................... 8
2.2.5. JSON ....................................................................................................................................... 8
2.2.6. Ajax ......................................................................................................................................... 8
2.2.7. REST ....................................................................................................................................... 9
2.2.8. URL mapping .......................................................................................................................... 9
2.3. OVERVIEW OF THE EXISTING WEB APPLICATION FRAMEWORKS ................................................... 9
2.3.1. JavaScriptMVC ....................................................................................................................... 9
2.3.2. Backbone.js ........................................................................................................................... 11
2.3.3. jQuery Mobile ....................................................................................................................... 12
2.3.4. jQTouch ................................................................................................................................ 13
2.3.5. Sencha Touch ........................................................................................................................ 14
2.3.6. Spine ..................................................................................................................................... 15
2.3.7. Dojo Toolkit .......................................................................................................................... 16
2.3.8. Phonegap wrapper ................................................................................................................ 17
2.3.9. BoltJS .................................................................................................................................... 18
Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 4

Multiplatform web application frameworks for
tablet devices - Part 1

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 1 of the two part report series. This document shows characteristic information of
selected framework technologies. Next document, Part 2, will complete the study by evaluating the
frameworks’ central features and architectural support for interactive service development.
Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 5

2. Overview of the web application frameworks

2.1. Web application architectures
2.1.1. Model View Controller
Model–view–controller (MVC) is an architectural pattern used in software engineering. Its goal is to
separate and decouple the application logic from the user interface. This separation of concerns allows
independent development, testing and maintenance of each. The concept of MVC was introduced in
1979 by Trygve Reenskaug [1], then working on Smalltalk at Xerox PARC. MVC consists of three
main components, namely the model, the view and the controller, which can be seen in Figure 1. [2]

Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 6


Client
type
Server
requirements
Offline
working
Multimedia
performance
Distribution of computing
to client nodes
Thick Low Possibly Good Yes
Thin High Usually no Network may
become
bottleneck
No
Figure 2. Comparison of thick and thin client

Regarding the separation of roles in MVC, a thin client application gives more responsibility to the
server, whereas in the thick client application most of the functionality is implemented in the browser.
In a thin client type web application, the client usually only contains the view, which can also
partially be located on the server-side. The actual application logic, i.e. the model and the controller are
on the server. In a thick client application, model, view and controller can all be deployed to the client.
The only server-side functionality required is the persistent storage of the model data, for example in a
database. This exemplary separation of the MVC can be seen in Figure 2.

Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 7


o HTTP server push
￿ The web server does not terminate a connection after response data has been served to a
client so that new or updated data can be immediately sent to the client.
￿ Another mechanism is related to a special MIME type called multipart/x-mixed-replace.
Web browsers interpret this as a document changing whenever the server pushes a new
version to the client. This feature is supported by the most popular web browsers
excluding Internet Explorer.

o Pushlet
￿ The server takes advantage of persistent HTTP connections and never terminates the
response, effectively fooling the browser into continuing in "loading" mode after the
initial page load would normally be complete. The server then periodically sends snippets
of javascript to update the content of the page. However, the server does not have control
of the browser timing out.

o Long polling
￿ The client requests information from the server in a similar way to a normal poll.
However, if the server does not have any data available for the client, instead of sending
an empty response, the server holds the request until new information is available. Not
technically a push technology, but can be used under circumstances where a real push is
not possible. [2]

2.1.3.1. References
[1] Wikipedia – Web application framework, Pull technology,
http://en.wikipedia.org/wiki/Pull_technology

[2] Wikipedia – Push technology,
http://en.wikipedia.org/wiki/Push_technology



2.2. Characteristic features
2.2.1. Web caching
Web caching means that web content (e.g. HTML pages and images) is temporally stored so that it does
not need to be fetched again for each page request. This reduces the traffic on the network, eases up
server load and makes the user-experience more comfortable (i.e. less laggy). Well-managed caching
eliminates much of client–server interactions, further improving scalability and performance. Some
frameworks can offer a common interface to disk or database storage of cached content and provide
mechanisms for caching documents and bypassing various stages of the page's preparation, such as
database access or template interpretation. [1] [2] [3]

2.2.1.1. References
[1] Wikipedia – Web application framework. URL:
http://en.wikipedia.org/wiki/Web_application_framework

[2] DocForge – Web application framework. URL:
http://docforge.com/wiki/Web_application_framework
[3] Wikipedia – Web cache. URL:
http://en.wikipedia.org/wiki/Web_cache


2.2.2. Security
Sometimes web application pages are only to be made visible to authenticated users. Some web
application frameworks come with authentication and authorization functionality, that enable the web
server to identify the users of the application before generating the page, and restrict access to functions
based on some defined criteria. [1] [2]
Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 8

Once a user is authenticated, a framework can check the specific permissions for that user. These
permissions may be managed in a variety of ways. A framework might provide role-based access
control, or any of a variety of other security features. These are typically managed by a developer in
code or a site administrator through an administrative interface. [2]

2.2.2.1. References
[1] Wikipedia – Web application framework. URL:
http://en.wikipedia.org/wiki/Web_application_framework

[2] DocForge – Web application framework. URL:
http://docforge.com/wiki/Web_application_framework

2.2.3. Web services
A Web service is a method of communication between two electronic devices over a network. Some
frameworks provide tools for creating and providing web services. These utilities may offer similar
tools as the rest of the web application. [1] [2]

2.2.3.1. References
[1] Wikipedia – Web application framework. URL:
http://en.wikipedia.org/wiki/Web_application_framework

[2] Wikipedia – Web service. URL:
http://en.wikipedia.org/wiki/Web_service


2.2.4. Use of databases
A database is a collection of organized data that can store information vital for a web page (e.g.
products and their prices in a store application). Many web application frameworks create a unified API
to a database backend, enabling web applications to work with a variety of databases with no code
changes, and allowing programmers to work with higher-level concepts. [1] [2]

2.2.4.1. References
[1] Wikipedia – Web application framework. URL:
http://en.wikipedia.org/wiki/Web_application_framework

[2] Wikipedia – Database. URL:
http://en.wikipedia.org/wiki/Database


2.2.5. JSON
JSON (JavaScript Object Notation) is a lightweight text-based open standard designed for data
interchange in human-readable format. It is derived from the JavaScript scripting language for
representing simple data structures and associative arrays, called objects. Despite its relationship to
JavaScript, it is language-independent, with parsers available for most languages. The JSON format is
often used for serializing and transmitting structured data between a server and web application, serving
as an alternative to XML. [1]

2.2.5.1. References
[1] Wikipedia – JSON. URL:
http://en.wikipedia.org/wiki/Json


2.2.6. Ajax
Ajax (Asynchronous JavaScript and XML) is a group of interrelated web development methods used on
the client-side to create interactive web applications. These programming techniques make it possible to
seamlessly update a Web page or a section of a Web application with input from the server, but without
the need for an immediate page refresh. In other words, with Ajax, web applications can send data to,
Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 9

and retrieve data from, a server asynchronously (in the background) without interfering with the display
and behavior of the existing page. Data is usually retrieved using the XMLHttpRequest object. Despite
the name, the use of XML is not needed (JSON is often used instead), and the requests don't need to be
asynchronous. [1] [2]

2.2.6.1. References
[1] Wikipedia – Ajax. URL:http://en.wikipedia.org/wiki/Ajax_(programming)
[2] Chris Ullman – What is Ajax? URL:
http://www.wrox.com/WileyCDA/Section/id-303217.html


2.2.7. REST
Representational State Transfer (REST) is a style of software architecture for distributed hypermedia
systems such as the World Wide Web. REST-style architectures consist of clients and servers. Clients
initiate requests to servers; servers process requests and return appropriate responses. Requests and
responses are built around the transfer of representations of resources. A resource can be essentially any
coherent and meaningful concept that may be addressed. A representation of a resource is typically a
document that captures the current or intended state of a resource. An application that adheres to the
REST constraints can be referred to be RESTful. [1]

2.2.7.1. References
[1] Wikipedia – Representational state transfer. URL:
http://en.wikipedia.org/wiki/Representational_State_Transfer

2.2.8. URL mapping
URL mapping is the mechanism by which the framework interprets URLs. This allows the creation of
human readable and, thus, more user-friendly URLs. This also increases the simplicity of the site and
allows for better indexing by search engines. The frameworks can offer different methods to provide
this functionality. [1] [2]

2.2.8.1. References
[1] Wikipedia – Web application framework. URL:
http://en.wikipedia.org/wiki/Web_application_framework

[2] IBM Corporation, WebSphere Portal for Multiplatforms – URL mapping. URL:
http://publib.boulder.ibm.com/infocenter/wpdoc/v510/index.jsp?topic=/com.ibm.wp.ent.doc/wps/adurl
map.html



2.3. Overview of the existing web application frameworks
This section introduces a set of selected web development frameworks that have been found relevant in
developing applications to tablet devices. The selection of frameworks was made in collaboration with
Sanoma Entertainment. The goal was to gather information on specific framework characteristics, such
as available UI component libraries, multiplatform support, local data persistency, support for
transactions and dynamic templates, interoperability with other frameworks, references and MVC
architecture.

2.3.1. JavaScriptMVC
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:
o StealJS - Dependency management and a stupidly easy build tool.
o FuncUnit - There's no better functional testing solution available. Write tests in jQuery syntax,
Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 10

run them via command line or browser.
o jQueryMX - These plugins are the building blocks of large jQuery applications: model, view,
controller, class, fixtures, and more.
o DocumentJS - A JSDoc compliant tool that turns comments into a searchable documentation
app. [1]

2.3.1.1. UI component library and GPU acceleration
There seems to be no built-in component library or support for GPU acceleration.

2.3.1.2. Platform support
Supports multiple browsers and operating systems. More detailed information about supported
platforms was not found.

2.3.1.3. Local persistent data support.
There seems to be no support for local data persistence.

2.3.1.4. Transaction support
There seems to be no support for transactions.

2.3.1.5. Dynamic web template and template engine support
JavascriptMVC supports templates via the jQuery.View plugin. It offers quite flexible templating
functionality:
o Use views with jQuery extensions after, append, before, html, prepend, replaceWith, text.
o Template loading from html elements and external files.
o Synchronous and asynchronous template loading.
o Deferred Rendering.
o Template caching.
o Bundling of processed templates in production builds.
o Hookup jquery plugins directly in the template. [2]

2.3.1.6. Interoperability with other frameworks
JavaScriptMVC has a plugin system which allows including any javascript library you wish to use. In
the documentation, jQuery and Prototype are mentioned as examples. [3]

2.3.1.7. Reference applications
JavaScriptMVC is used by Zend, Social Collider, Music Glue, Kaplan, Shoretel Inc., Jupiter IT and
Wegener. [4]

2.3.1.8. MVC support
As the name indicates, JavaScriptMVC follows the MVC paradigm. It provides separate Model, View
and Controller classes. The flow of events between these components can be seen in Figure 3. [5]

Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 11


Figure 4. MVC architecture in JavaScriptMVC
2.3.1.9. References
[1]
http://javascriptmvc.com/

[2] jQuery View,
http://javascriptmvc.com/docs/jQuery.View.html#&who=jQuery.Viev

[3] Using other libraries,
http://wiki.javascriptmvc.com/wiki/index.php?title=Using_other_libraries

[4] Who’s using JavaScriptMVC,

http://wiki.javascriptmvc.com/wiki/index.php?title=Who%27s_Using_JavaScriptMVC

[5] JavaScriptMVC documentation,
http://javascriptmvc.com/docs.html#&who=learn


2.3.2. Backbone.js
Backbone.js 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]

2.3.2.1. UI component library and GPU acceleration
There seems to be no built-in component library or support for GPU acceleration.

2.3.2.2. Platform support
Backbone.js supports multiple browsers and operating systems. More detailed information about
supported platforms was not found.

2.3.2.3. Local persistent data support.
Backbone.js supports HTML5 localStorage for local data persistence. [2]

2.3.2.4. Transaction support
There seems to be no support for transactions.

2.3.2.5. Dynamic web template and template engine support
Backbone.js comes with integrated templating support via Underscore.js, which is a dependency of
Backbone.js. However, Backbone.js is compatible with any JavaScript templating library. [3]

2.3.2.6. Interoperability with other frameworks
Apparently Backbone.js can be used with a variety of other frameworks and libraries. Examples of
Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 12

utilizing e.g. jQuery and zepto.js [4] can be found in the documentation.

2.3.2.7. Reference applications
There is no information about applications implemented with Backbone.js

2.3.2.8. MVC support
Backbone.js supports the MVC architecture with the exception that it does not have a separate
Controller class. The controller functionality is included in the View and Router classes. [5]

2.3.2.9. References
[1]
http://documentcloud.github.com/backbone/

[2] Backbone.js – localstorage,

http://documentcloud.github.com/backbone/docs/backbone-localstorage.html

[3] Backbone.View,
http://documentcloud.github.com/backbone/#View

[4]
http://zeptojs.com/

[5] Backbone.js MVC,
http://documentcloud.github.com/backbone/#FAQ-mvc



2.3.3. jQuery Mobile
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]

2.3.3.1. UI component library and GPU acceleration
JQuery mobile provides a set of UI widgets and components that are optimized for building touch-
based mobile applications. It utilizes CSS transitions e.g. for page navigation, which are GPU
accelerated on some mobile platforms, such as Apple’s iOS. [2]

2.3.3.2. Platform support
JQuery mobile supports all major mobile platforms, including Android, iOS, Symbian (S60 and
Platform), Windows Mobile and BlackBerry OS. [3]

2.3.3.3. Local persistent data support
There seems to be no support for local data persistence.

2.3.3.4. Transaction support
There seems to be no transaction support.

2.3.3.5. Dynamic web template and template engine support
There seems to be no information regarding templating support, but some blog entries suggest it can be
enabled using e.g. the JQuery Templates plugin (jquery-tmpl). [4]

Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 13

2.3.3.6. Interoperability with other frameworks
JQuery Mobile is interoperable with Phonegap. There seems to be no information regarding
interoperability with other frameworks. [3]

2.3.3.7. Reference applications
There seems to be no reference applications listed, but the project sponsors include Filament group,
Mozilla corporation, Palm, Blackberry, Nokia, DeviceAtlas, Adobe, dotMobi and Originate. [5]

2.3.3.8. MVC support
JQuery Mobile seems to have no built-in MVC support.

2.3.3.9. References
[1]
http://jquerymobile.com/

[2] Demos and Documentation,
http://jquerymobile.com/demos/1.0b2/

[3] Mobile Graded Browser Support,
http://jquerymobile.com/gbs/

[4] Templates – jQuery API,
http://api.jquery.com/category/plugins/templates/

[5] Project Sponsors,
http://jquerymobile.com/#project-sponsors


2.3.4. jQTouch
A jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-
thinking devices. It features native animations, automatic navigation, and themes for mobile WebKit
browsers. [1]

2.3.4.1. UI component library and GPU acceleration
jQTouch has touch-screen optimized CSS themes, but no UI component library [2]. It also has CSS3-
based page animations, which are hardware accelerated on certain platforms, such as iOS [3].

2.3.4.2. Platform support
jQTouch is targeted for mobile platforms with WebKit browsers, such as iOS and Android. [4]

2.3.4.3. Local persistent data support
There seems to be no support for local data persistence.

2.3.4.4. Transaction support
There is no information about transaction support.

2.3.4.5. Dynamic web template and template engine support
There is no information regarding templating support.

2.3.4.6. Interoperability with other frameworks
There is no information regarding interoperability with other frameworks or libraries.

2.3.4.7. Reference applications
There is no information about applications implemented with jQTouch.

2.3.4.8. MVC support
There seems to be no support for MVC-based architecture.
Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 14


2.3.4.9. References
[1]
http://jqtouch.com/

[2]
https://github.com/senchalabs/jQTouch/wiki/themingstyling

[3]
https://github.com/senchalabs/jQTouch/wiki/animations

[4]
https://github.com/senchalabs/jQTouch/wiki/


2.3.5. Sencha Touch
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. [1]

2.3.5.1. UI component library and GPU acceleration
Sencha Touch features a quite extensive UI component library. GPU accelerated animations are
supported at least in iOS. [2]

2.3.5.2. Platform support
Sencha Touch supports iPhone, Android and BlackBerry touch devices. [1]

2.3.5.3. Local persistent data support.
HTML5 localStorage is supported on browsers that implement it. [3]

2.3.5.4. Transaction support
There seems to be no transaction support.

2.3.5.5. Dynamic web template and template engine support
Sencha Touch has integrated dynamic templating system. [4]

2.3.5.6. Interoperability with other frameworks
Sencha Touch can be used with PhoneGap to distribute the application in application stores. [1]

2.3.5.7. Reference applications
Applications developed using Sensa Touch include CarSense Mobile Inventory [5], Echo Conference
Mobile [6] and e-Resistible [7].

2.3.5.8. MVC support
Although MVC support is not directly stated in the documentation, MVC-related classes, such as
Model, Controller, EventObject and several view-related classes can be found from the API
documentation. [2]

2.3.5.9. References
[1]
http://www.sencha.com/products/touch/

[2] Sencha Touch API Documentation,
http://dev.sencha.com/deploy/touch/docs/

Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 15

[3]
http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.LocalStorageProxy

[4]
http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.LocalStorageProxy?class=Ext.
Template

[5]
http://www.sencha.com/blog/2010/12/16/sencha-touch-spotlight-carsense-mobile-inventory/

[6]
http://www.sencha.com/blog/2010/12/08/sencha-touch-spotlight-echo-conference-mobile/

[7]
http://www.sencha.com/blog/2010/12/21/sencha-touch-contest-2010-an-interview-with-e-
resistible/


2.3.6. Spine
Spine is a lightweight framework that provides an MVC structure to your JavaScript applications with a
focus on providing a more traditional literal inheritance model through classes and extension. It is
based on Backbone's API but contains some fundamental differences. Spine comes with support for
HTML5 Local Storage and asynchronous server communication. [1]



Figure 5. Spine.js structure [J2.4.5.1]

2.3.6.1. UI component library and GPU acceleration
Spine does not seem to have any view components provided.

2.3.6.2. Platform support
Works in all major browsers (Chrome, Safari, Firefox, IE >= 7) [2]

2.3.6.3. Local persistent data support
HTML5 Local Storage seems to be supported and there is also an Ajax-based variant for persistent
storage. [3]

2.3.6.4. Transaction support
No information was found relating to this subject.

2.3.6.5. Dynamic web template and template engine support
Spine apparently supports all sorts of templates. [1]

2.3.6.6. Interoperability with other frameworks
Spine is optimized to work with jQuery or Zepto. [4]
Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 16


2.3.6.7. Reference applications
No information was found relating to applications made with the help of Spine.

2.3.6.8. MVC support
Spine utilizes MVC pattern. This is done with lightweight controller implementation, based on
Backbone's API, and a full model layer and ORM that provide persistency and functionality for
saving, retrieving and validating records and raising events, which can be used to bind records to
the view. [5]

2.3.6.9. References

[1] Addy Osmani – Building JavaScript Web Apps With MVC & Spine.js. URL:
http://addyosmani.com/blog/building-apps-spinejs/
[2] Spine – Overview. URL: http://maccman.github.com/spine/#h-overview
[3] Spine – Persistence. http://maccman.github.com/spine/#s-models-persistence
[4] Spine – Setup. URL: http://maccman.github.com/spine/#h-setup
[5] Spine – Events. URL:
http://maccman.github.com/spine/#s-models-events


2.3.7. Dojo Toolkit
Dojo Toolkit is an open source modular JavaScript library designed fort rapid development of cross-
platform, JavaScript/Ajax-based applications and web sites.

2.3.7.1. UI component library and GPU acceleration
Dojo contains Dijit widget library and Dojo Mobile library and with them a multitude of UI
components for different purposes, but there seems to be no word about GPU acceleration support.
[1]

2.3.7.2. Platform support
Dojo Mobile has support for webkit-enabled mobile devise like iOS (iPhone and iPad) and Android
and WebOS support is under work. [1] [2]

2.3.7.3. Local persistent data support
Dojo has an object store API that is based on the HTML5 IndexedDB [3] Object Store, which is the
successor of WebSQL [4] and there are legacy storage APIs that should offer persistent client-side
storage options. [5]

2.3.7.4. Transaction support
Dojo supports server-side storage with JsonRest store, and it seem to provide transactions with
multiple combined operations. The JsonRest store provides full read, write, and notification
capabilities through standards based HTTP/REST interaction with the server using GET, PUT,
POST, and DELETE commands. [5] [6] [7]

2.3.7.5. Dynamic web template and template engine support
Dojo provides functionality for using templates.

2.3.7.6. Interoperability with other frameworks
No mention of interoperability was noted.

Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 17

2.3.7.7. Reference applications
No mention of reference applications was found, but IBM and Sun Microsystems are major
members of the project. [8]

2.3.7.8. MVC support
Dojo claims to implement MVC pattern. At leas, it offers model with data validation and a wrapper
for model monitoring. [7]

2.3.7.9. References
[1] Dojo toolkit – Features – Dojo Mobile. URL: http://dojotoolkit.org/features/mobile
[2] Dojo toolkit – Features. URL:
http://dojotoolkit.org/features/

[3] W3C – Indexed Database API. URL:
http://www.w3.org/TR/IndexedDB/

[4] W3C – Web SQL Database. URL:
http://dev.w3.org/html5/webdatabase/

[5] Dojo toolkit – Features – Dojo Object Store. URL:
http://dojotoolkit.org/features/1.6/object-
store

[6] Dojo toolkit – Documentation – dojo.store.JsonRest. URL:
http://dojotoolkit.org/reference-
guide/dojo/store/JsonRest.html

[7] Dojo toolkit – Documentation – Data modeling. URL:
http://dojotoolkit.org/documentation/tutorials/1.6/data_modeling/
[8] Wikipedia – Dojo Toolkit. URL: http://en.wikipedia.org/wiki/Dojo_Toolkit

2.3.8. Phonegap wrapper
PhoneGap 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.
The full list of supported device features can be found here [1]. PhoneGap enables software
programmers to build applications using JavaScript, HTML and CSS, instead of often less-known
languages such as Objective-C. In short, PhoneGap is used to create web pages that can access
device functionality. [2] [3]

2.3.8.1. UI component library and GPU acceleration
There seems to be no UI components offered by the PhoneGap.

2.3.8.2. Platform support
PhoneGap currently supports development for the operating systems iOS, Android, webOS,
Symbian, Bada and BlackBerry. [1]

2.3.8.3. Local persistent data support
According to [4], PhoneGap provides an API for using W3C’s Web Storage [5] and SQL database
[6], if devices support them, or some SQLite variant of its own. PhoneGap opens databases as
SQLite databases and supports execution of multiple SQL statements in a single transaction
command (the statements are defined inside a function that is given to transaction command).

This API should be supported by:
• Android
• BlackBerry WebWorks (OS 6.0 and higher)
• iPhone

2.3.8.4. Transaction support
There seems to be no backend database support and, hence, no transaction support for that matter.

Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 18

2.3.8.5. Dynamic web template and template engine support
No mention of support for templates.

2.3.8.6. Interoperability with other frameworks
According to [3] PhoneGap can co-exist with other JavaScript libraries, for example:
• jQuery
• MooTools
• XUI
• jQTouch

2.3.8.7. Reference applications
Applications done with PhoneGap inclure Diary Mobile, NFB Films, IGN Dominate etc. [7]

2.3.8.8. MVC support
According to [8], PhoneGap has the following MVC design structure:
• Model = PhoneGap JS API + offline storage/cache (+ Lawnchair?)
• Controller = JavaScript
• View = HTML + CSS

2.3.8.9. References
[1] PhoneGap – Supported Features. URL: http://www.phonegap.com/about/features
[2] Wikipedia – PhoneGap. URL: http://en.wikipedia.org/wiki/PhoneGap
[3] Jesse MacFadyen – PhoneGap. URL:
http://www.phonegap.com/wp-
content/uploads/2010/04/AppyHourPhoneGap_iPhone_HighLevel_Pres.ppt
[4] PhoneGap Documentation – Storage. URL:
http://docs.phonegap.com/phonegap_storage_storage.md.html
[5] W3C – Web Storage. URL: http://dev.w3.org/html5/webstorage/
[6] W3C – Web SQL Database. URL:
http://dev.w3.org/html5/webdatabase/

[7] PhoneGap – Apps. URL: http://www.phonegap.com/apps/
[8] Fil Maj – PhoneGap Development Best Practices. URL:
http://www.phonegap.com/wp-content/uploads/2010/04/SeattleBestPractices2010.pptx


2.3.9. BoltJS
BoltJS is a UI framework designed by Facebook. It is built on top of Javelin [1], from which it uses
the event delegation and class declaration features, as well as various utility methods. BoltJS is aimed
to be compact, fast and powerful. It is written entirely in JavaScript and runs in the browser, needing
no server backend. While BoltJS can be used in a progressive enhancement approach, it is primarily
designed for UIs that are built mostly, if not completely, in the browser. [2]
BoltJS seems to still be unpublished since it lacks example applications and there are no
working links to the source code. [3]

2.3.9.1. UI component library and GPU acceleration
BoltJS has views that are UI component or can even be called widgets. These contain and control
DOM nodes, but aren’t visual components themselves. Hence, it seems BoltJS does not offer any
complete UI components. [4]

2.3.9.2. Platform support
BoltJS is currently focused on supporting mobile WebKit browsers. [2]

Next Media - MuMuMeSe
Version: <v1.0>
Multiplatform web application frameworks for tablet devices - Part 1 Date: <3/9/2011>

Next Media
©
University of Oulu, 2011 Page 19

2.3.9.3. Local persistent data support
There seems to be no support for using local storage.

2.3.9.4. Transaction support
Nothing was said about supporting server-side databases or transactions.

2.3.9.5. Dynamic web template and template engine support
No word was given on templates or support for them.

2.3.9.6. Interoperability with other frameworks
Nothing reported of issues or compatibility with other frameworks.

2.3.9.7. Reference applications
Apparently there are none, but the framework seems to be quite a new thing anyways.

2.3.9.8. MVC support
BoltJS has structures for models and views, but has not yet implemented controllers. Views in Bolt,
also known as widgets, are UI components that contain DOM node. They control the creation of the
DOM node and its children and provide methods for manipulating it. Models are simple wrappers
around JSON objects. They invoke changed events when a value changes. Models can be bound to
views such that a view will automatically update itself when a model value changes. [4] [5] [6]

2.3.9.9. References
[1] Javelin (JS). URL:
http://javelinjs.com/

[2] BoltJS – Introduction to BoltJS. URL:
http://shaneosullivan.github.com/boltjs/intro.html

[3] Emil Protalinski – BoltJS: the key to Facebook’s upcoming HTML5 apps platform? URL:
http://www.zdnet.com/blog/facebook/boltjs-the-key-to-facebooks-upcoming-html5-apps-platform/3131
[4] BoltJS – BoltJS Documentation: Views URL:
http://shaneosullivan.github.com/boltjs/view.html
[5] BoltJS – BoltJS Documentation: Getting Started. URL:
http://shaneosullivan.github.com/boltjs/gettingstarted.html

[6] BoltJS – BoltJS Documentation: Models. URL:
http://shaneosullivan.github.com/boltjs/model.html