Comparing native Android and jQuery Mobile capabilities (Presentation)

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 20132
Introduction
jQuery Mobile
Android
Comparing capabilites
Conclusion

Introduction
3

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

Introduction
5

Agenda
Introduction
jQuery Mobile
Android
Conclusion

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>

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

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!

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

jQuery Mobile
Features
• jQuery core
• Compatibility
• Lightweight size
• Modular architecture
• HTML5
• AJAX-driven navigation
• UI widgets
• Theming
• Mobile-specific events support
11

jQuery Mobile
EXAMPLES
12

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

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

jQuery Mobile
Result
15

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

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

jQuery Mobile
Result
18

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

jQuery Mobile
Result
20

jQuery Mobile
Events
$('div.box').on( 'swipe', swipeHandler );
function swipeHandler(event){
alert('do stuff');
}
Methods
$.mobile.changePage( "/confirm.html", {
transition: "pop"
});
21

Agenda
Introduction
jQuery Mobile
Android
Conclusion

Android
• First full release in December 2008.
• Rapid release cycle
• Android evolution
• Open-source
• Powerful API libraries
• > 800,000 apps
• Inevitable interest
23

Android
Development environment
• Java
• Dalvik VM
• Eclipse IDE
• Android SDK = tools + APIs
• ADT plugin extends capabilities of Eclipse
24

jQuery Mobile
FEATURES
Android 4.2 – Jelly Bean
25

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

Android
External display support
• Display manager
• Presentation window
• Preferred display selection
• Protected content
• Wireless display
27

Android
Performance improvements
• Filterscript
• Script intrinsics
• Script groups
• Ongoing optimization improvements
• New built-in developer options
• GPU
Compute
28

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
Introduction
jQuery Mobile
Android
Conclusion

Speed and graphics performance
31

Access to underlying mobile platform
32

Development tools
33

Development community and support
34

Developer's learning curve
35

Offline mode
36

Multiplatform support
37

Monetization options
38

• 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

Agenda
Introduction
jQuery Mobile
Android
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

[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

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.

Dražen Patekar Bahun, bacc.inf.
drazen.patekar@vern.hr
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.

Dunja Maslić, bacc.inf.
dumaslic@foi.hr
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.

Comparing native Android and jQuery Mobile capabilities (Presentation)

Recommended

Recommended

More Related Content

Similar to Comparing native Android and jQuery Mobile capabilities (Presentation)

Similar to Comparing native Android and jQuery Mobile capabilities (Presentation) (20)

More from Zlatko Stapic

More from Zlatko Stapic (8)

Recently uploaded

Recently uploaded (20)

Comparing native Android and jQuery Mobile capabilities (Presentation)