Comparing native Android and jQuery Mobile capabilities (Presentation)

8,165 views
7,926 views

Published on

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.

Published in: Technology, Business
3 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
8,165
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
85
Comments
3
Likes
5
Embeds 0
No embeds

No notes for slide

Comparing native Android and jQuery Mobile capabilities (Presentation)

  1. 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. 2. Agenda Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 20132 Introduction jQuery Mobile Android Comparing capabilites Conclusion
  3. 3. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 Introduction 3
  4. 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. 5. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 Introduction 5
  6. 6. Agenda Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 20136 Introduction jQuery Mobile Android Comparing capabilites Conclusion
  7. 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. 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. 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. 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. 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. 12. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 jQuery Mobile EXAMPLES 12
  13. 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. 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. 15. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 jQuery Mobile Result 15
  16. 16. 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
  17. 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. 18. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 jQuery Mobile Result 18
  19. 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. 20. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 jQuery Mobile Result 20
  21. 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. 22. Agenda Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 201322 Introduction jQuery Mobile Android Comparing capabilites Conclusion
  23. 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. 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. 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. 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. 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. 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. 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. 30. Agenda Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 201330 Introduction jQuery Mobile Android Comparing capabilites Conclusion
  31. 31. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 Comparing capabilites Speed and graphics performance 31
  32. 32. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 Comparing capabilites Access to underlying mobile platform 32
  33. 33. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 Comparing capabilites Development tools 33
  34. 34. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 Comparing capabilites Development community and support 34
  35. 35. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 Comparing capabilites Developer's learning curve 35
  36. 36. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 Comparing capabilites Offline mode 36
  37. 37. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 Comparing capabilites Multiplatform support 37
  38. 38. Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013 Comparing capabilites Monetization options 38
  39. 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. 40. Agenda Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 201340 Introduction jQuery Mobile Android Comparing capabilites Conclusion
  41. 41. Looking forward to your qeustions  41 Stapić, Patekar, Maslić: Comparing native Android and jQuery Mobile capabilities - CASE25, 11th June 2013
  42. 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. 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. 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. 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. 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

×