Presented at CASE25 developers conference.
Abstract: The distribution of mobile operating systems shows that development of mobile applications for multiple target platforms is necessary in order to reach a critical amount of users in any business model. Additionally, the platform fragmentation is not the only problem as for some platforms a device fragmentation has become a night mare for developers too. Thus, reaching for some "of the shelf" solutions that will enable developers to have single code base deployable to multiple mobile platforms became a usual practice for small companies or teams. One of these is quickly emerging and often used solution called jQuery Mobile. jQuery Mobile is touch-optimized web framework based on HTML5 and (web) applications written in it can be executed on any popular mobile platform. On the other side, this approach of running application in web browser has some disadvantages too. Thus, this paper will critically compare the possibilities of jQuery Mobile (including APIs and plugins) aligned with native Android possibilities in order to define the level of coverage of functionality provided by such framework. The complete and comparable set of possibilities should make the decision on using the web based framework or the native development kit easier for any specific mobile application.
Mcleodganj Call Girls 𼰠8617370543 Service Offer VIP Hot Model
Â
Comparing native Android and jQuery Mobile capabilities (Presentation)
1. Comparing native Android and
jQuery Mobile capabilities
Zlatko StapiÄ, DraĹžen Patekar Bahun, Dunja MasliÄ
University of Zagreb, Faculty of Organization and Informatics
Pavlinska 2, 42000 VaraĹždin, Croatia
http://www.foi.unizg.hr/
VERNâ University of Applied Sciences
Trg bana J. JelaÄiÄa 3, 10000 Zagreb, Croatia
http://www.vern.hr/
CASE25 â Developers conference - 11.06.2013. â Zagreb, Croatia
2. Agenda
StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 20132
Introduction
jQuery Mobile
Android
Comparing capabilites
Conclusion
3. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Introduction
3
4. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Introduction
Code once for multi-platform? TGTBT?
YES ITâS TRUE, BUTâŚ
Three different categories of tools:
1. Mediatory language or mediatory transform
engine (cross-compilation)
2. Adapter applications
3. Web technologies only
4
5. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Introduction
5
6. Agenda
StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 20136
Introduction
jQuery Mobile
Android
Comparing capabilites
Conclusion
7. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
⢠More than 55% of todayâs popular web sites use jQuery
⢠Looks familiar?
⢠jQuery Mobile is built on top of the robust base jQuery
library
7
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.X.X/jquery.min.js">
</script>
8. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Short description
Touch-optimized cross-platform UI framework
Strategy
Delivering top-of-the-line JavaScript and a unified User
Interface across the most-used smartphone web
browsers
8
9. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
What do we need to know to start making multi-platform
apps with JQM?
1. JQM basics
2. HTML, CSS, JavaScript, jQuery, server-side technology
(ASP.NET, PHP, Ruby, JSP etc.), database technology
(Oracle, Microsoft SQL Server, MySQL, DB2 etc.)
9
Hey, but I allready know all this
stuff (2) because Iâm a web
developer!
10. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
10
Platform Support level
Apple iOS 3.2-6.1 A-grade
Android 2.1-2.3 A-grade
Android 3.2 A-grade
Android 4.0 A-grade
Android 4.1 A-grade
Windows Phone 7.5-7.8 A-grade
Blackberry 6-10 A-grade
Firefox Mobile 18 A-grade
Chrome for Android 18 A-grade
Opera Mobile 11.5-12 A-grade
Kindle 3 A-grade
Opera Mini 7 B-grade
Nokia Symbian^3 B-grade
iOS 3.x and older C-grade
Windows Mobile C-grade
11. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Features
⢠jQuery core
⢠Compatibility
⢠Lightweight size
⢠Modular architecture
⢠HTML5
⢠AJAX-driven navigation
⢠UI widgets
⢠Theming
⢠Mobile-specific events support
11
12. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
EXAMPLES
12
13. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Basic HTML page structure
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.
com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-
1.3.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
</head>
<body>
UI content goes here.
</body>
</html>
13
14. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Basic UI example
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Header text</h1>
</div>
<div data-role="content">
<p>Hello CASE25!</p>
<a href="http://www.google.com" rel="external" data-
role="button">Visit Google</a>
</div>
<div data-role="footer">
<h1>Footer text</h1>
</div>
</div>
14
15. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Result
15
17. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Widgets â Checkbox
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1"
value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2"
value="choice-2" />
<label for="radio-choice-2">Dog</label>
</fieldset>
</div>
17
18. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Result
18
19. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Widgets â Filterable list
<ul data-role="listview" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Chrysler</a></li>
<li><a href="#">Dodge</a></li>
<li><a href="#">Ferrari</a></li>
<li><a href="#">GMC</a></li>
</ul>
19
20. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Result
20
21. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Events
$('div.box').on( 'swipe', swipeHandler );
function swipeHandler(event){
alert('do stuff');
}
Methods
$.mobile.changePage( "/confirm.html", {
transition: "pop"
});
21
22. Agenda
StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 201322
Introduction
jQuery Mobile
Android
Comparing capabilites
Conclusion
23. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Android
⢠First full release in December 2008.
⢠Rapid release cycle
⢠Android evolution
⢠Open-source
⢠Powerful API libraries
⢠> 800,000 apps
⢠Inevitable interest
23
24. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Android
Development environment
⢠Java
⢠Dalvik VM
⢠Eclipse IDE
⢠Android SDK = tools + APIs
⢠ADT plugin extends capabilities of Eclipse
24
25. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
FEATURES
Android 4.2 â Jelly Bean
25
26. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Android
User interface improvements
⢠Renderscript Compute
⢠Optimized drawing
⢠WebView rendering optimizations
⢠Refined UI
⢠One tablet, many users
⢠Lock screen widgets
⢠Daydream
⢠Nested Fragments
⢠Accessibility
⢠Full native support for RTL layouts
⢠RTL layout mirroring
26
27. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Android
External display support
⢠Display manager
⢠Presentation window
⢠Preferred display selection
⢠Protected content
⢠Wireless display
27
28. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Android
Performance improvements
⢠Filterscript
⢠Script intrinsics
⢠Script groups
⢠Ongoing optimization improvements
⢠New built-in developer options
⢠GPU
Compute
28
29. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Android
New platform technologies
⢠Hardware-accelerated 2D renderer
⢠New camera hardware interface
⢠Security enhancements
⢠New Bluetooth stack
⢠Low-latency audio
⢠NFC hardware interface and controller interface
⢠Dalvik runtime optimizations
29
30. Agenda
StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 201330
Introduction
jQuery Mobile
Android
Comparing capabilites
Conclusion
31. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Speed and graphics performance
31
32. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Access to underlying mobile platform
32
33. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Development tools
33
34. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Development community and support
34
35. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Developer's learning curve
35
36. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Offline mode
36
37. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Multiplatform support
37
38. StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Monetization options
38
39. Comparing capabilites
⢠Speed and graphics performance
⢠Access to underlying mobile platform
⢠Development tools
⢠Development community and support
⢠Developer's learning curve
⢠Offline mode
⢠Multiplatform support
⢠Monetization options
StapiÄ, Bahun, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 201339
40. Agenda
StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 201340
Introduction
jQuery Mobile
Android
Comparing capabilites
Conclusion
41. Looking forward to your qeustions ď
41 StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
42. [1] Z. StapiÄ, L. de-Marcos, and J. M. GutiĂŠrrez MartĂnez, âApproaches in Development of
Multi-platform Mobile Applications: State of the Art,â in Proceedings of IV International
Conference on Application of Advanced Information and Communication Technologies,
Loja, Ecuador, 2012, pp. 429â436.
[2] Wikipedia, âDocument Object Model,â Wikipedia, the free encyclopedia, 2013. [Online].
Available: http://en.wikipedia.org/wiki/Document_Object_Model. [Accessed: 01-May-
2013].
[3] Wikipedia, âAjax (programming),â Wikipedia, the free encyclopedia, 2013. [Online].
Available: http://en.wikipedia.org/wiki/Ajax_programming. [Accessed: 01-May-2013].
[4] The jQuery Foundation, âjQueryâs Mobile Strategy,â jQueryâs Mobile Strategy | jQuery
Mobile, 2013. [Online]. Available: http://jquerymobile.com/strategy/. [Accessed: 01-May-
2013].
[5] Wikipedia, âContent delivery network,â Wikipedia, the free encyclopedia, 2013. [Online].
Available: http://en.wikipedia.org/wiki/Content_delivery_network. [Accessed: 01-May-
2013].
[6] International Data Corporation (IDC), âSmartphones Expected to Outship Feature Phones
for First Time in 2013,â 2013. [Online]. Available:
http://www.idc.com/getdoc.jsp?containerId=prUS23982813. [Accessed: 15-May-2013].
References
42 StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
43. [7] International Data Corporation (IDC), âIDC Raises Tablet Forecast for 2012 and Beyond
As iOS Picks Up Steam, Android Gains Traction, and Windows Finally Enters the
Market,â 2012. [Online]. Available:
http://www.idc.com/getdoc.jsp?containerId=prUS23833612#.UMYzLawRtG9.
[Accessed: 15-May-2013].
[8] E. Ravenscraft, âGoogle: There Are More Than 850,000 Android Devices Activated Daily,
300 Million Activated To Date - 450,000 Apps On The Market,â Android Police: Looking
after all things Android, 2013. [Online]. Available:
http://www.androidpolice.com/2012/02/27/google-there-are-more-than-850000-
android-devices-activated-daily-300-million-activated-to-date-450000-apps-on-the-
market/. [Accessed: 15-May-2013].
[9] J. Levi, âWhy Project Butter in Jelly Bean Makes Android Faster,â Pocketnow, 2012.
[Online]. Available: http://pocketnow.com/2012/06/27/what-is-googles-project-butter-
and-why-its-so-awesome. [Accessed: 15-May-2013].
[10] Android Developers, âDeveloper Tools,â Android Developers, 2013. [Online]. Available:
http://developer.android.com/tools/index.html. [Accessed: 15-May-2013].
[11] Android Developers, âGetting Started with Android Studio,â Android Developers, 2013.
[Online]. Available: http://developer.android.com/sdk/installing/studio.html. [Accessed:
15-May-2013].
References
43 StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
44. Information on authors
Zlatko StapiÄ, M.A.
zlatko.stapic@foi.hr
Faculty of Organization and Informatics
Pavlinska 2, 42000 VaraĹždin
tel: +385 42 390 820, fax: +385 42 213 413
Zlatko StapiÄ, M.A. works from 2006 as a Teaching assistant at the Information
Systems Development Department at Faculty of Organization and Informatics in
VaraĹždin, and attends two doctoral programs: Information sciences at the same Faculty
and Information and Knowledge Engineering at the Computer Science Department at
the University of AlcalĂĄ in Spain.
Recently, Zlatko is intensively engaged in developing applications for mobile devices,
which is also the subject of his research in the dissertation, and it is particularly
important to notice that he is developing for multiple mobile platforms, including
Android, Symbian, Windows Phone 7, Nokia Qt etc. Zlatko's more detailed resume, a
list of all papers, projects and awards, and other important information can be found
on his personal website: http://www.foi.unizg.hr/djelatnici/zlatko.stapic.
StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 201344
45. Information on authors
DraĹžen Patekar Bahun, bacc.inf.
drazen.patekar@vern.hr
VERNâ University of Applied Sciences
Zdravestvari.hr
Baltazar i prijatelji Ltd.
Tell: +385 98 278 667
DraĹžen Patekar Bahun is assistant teacher for Introduction to computer architecture
course at VERNâ University of Applied Sciences. He is implementing modern concepts
and devices into lab exercises for more efficiency and entertainment in learning basic
concepts of computing, programming and building logical circuits and electronic
devices. Drazen is also an IT manager at Zdravestvari.hr and system administration
department manager at Baltazar i prijatelji Ltd. Drazenâs affinities include Web
application development (Microsoft .NET Framework, ASP.NET, MVC, jQuery, jQuery
Mobile, Microsoft SQL Server), Programing languages (C#, JAVA, C/C++, JavaScript)
and Digital systems design and development.
StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 201345
46. Information on authors
Dunja MasliÄ, bacc.inf.
dumaslic@foi.hr
VERNâ University of Applied Sciences
Faculty of Organization and Informatics
Tell: +385 91 527 3601
Dunja MasliÄ is a student of two graduate studies: specialist graduate professional
study âIT Managementâ at VERNâ University of Applied Sciences and graduate study
âBusiness Systems Organizationâ at Faculty of Organization and Informatics. She is
learning concepts of effective management of business processes and organizations by
applying information technology, comprehensive knowledge of business functions and
contemporary business management and effective use of software tools for
reorganization of business processes.
StapiÄ, Patekar, MasliÄ: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 201346