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
Agenda
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 2
Introduction
jQuery Mobile
Android
Comparing capabilites
Conclusion
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Introduction
3
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
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Introduction
5
Agenda
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 6
Introduction
jQuery Mobile
Android
Comparing capabilites
Conclusion
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>
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
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!
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
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
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
EXAMPLES
12
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
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
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Result
15
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Widgets – Sliders
<label for="flip-0">Select slider:</label>
<select name="flip-0" id="flip-0" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider-0" id="slider-0" value="60" min="0" max="100" />
16
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
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Result
18
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
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
Result
20
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
Agenda
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 22
Introduction
jQuery Mobile
Android
Comparing capabilites
Conclusion
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
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
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
jQuery Mobile
FEATURES
Android 4.2 – Jelly Bean
25
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
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
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
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
Agenda
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 30
Introduction
jQuery Mobile
Android
Comparing capabilites
Conclusion
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Speed and graphics performance
31
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Access to underlying mobile platform
32
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Development tools
33
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Development community and support
34
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Developer's learning curve
35
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Offline mode
36
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Multiplatform support
37
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
Comparing capabilites
Monetization options
38
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 2013 39
Agenda
Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 40
Introduction
jQuery Mobile
Android
Comparing capabilites
Conclusion
Looking forward to your qeustions
41 Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
[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
[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
Information on authors
Zlatko Stapić, M.A.
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 2013 44
Information on authors
Dražen Patekar Bahun, bacc.inf.
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 2013 45
Information on authors
Dunja Maslić, bacc.inf.
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 2013 46