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

http://www.foi.unizg.hr/

http://www.vern.hr/

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


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>

http://ajax.googleapis.com/ajax/libs/jquery/1.X.X/jquery.min.js


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 2013 39

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.

[email protected]

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.


mailto:[email protected]

http://www.foi.unizg.hr/djelatnici/zlatko.stapic

http://www.foi.unizg.hr/djelatnici/zlatko.stapic


Dražen Patekar Bahun, bacc.inf.

[email protected]


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.

[email protected]


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)

Technology

Transcript of Comparing native Android and jQuery Mobile capabilities (Presentation)