SlideShare a Scribd company logo
Intro to jQuery Mobile
                          South Bay Mobile User Group - 26 February 2013




Monday, February 25, 13
Introduction



Monday, February 25, 13
Who Am I?

                    • Troy Miles
                    • Senior Software Engineer w/ 30+ years of
                          experience
                    • Mobile/Mobile Web
                    • iOS, Android, & Windows Phone 7

Monday, February 25, 13
Monday, February 25, 13
Intermediate PhoneGap
                    • Learn by doing
                    • JS best practices, iScroll, Maps, Ajax + more
                    • Saturday, May 18th - 9 AM to 6 PM
                    • $99 - lunch & materials included
                    • http://bit.ly/XlxzYp
                    • CraveLab - Los Angeles
Monday, February 25, 13
You May Get Mad At
                                  Me
                    • Sorry, in advance if I insult your favorite:
                          company, device, or personality
                    • I have nothing against any of these
                          companies
                    • I will gladly do a project for any of them,
                          for the right price



Monday, February 25, 13
Our Agenda
                    • The Mobile Space Today
                    • Getting Started with jQuery Mobile
                    • Understanding Page Architecture
                    • Creating jQuery Mobile Forms
                    • Working with Lists
                    • jQuery Mobile Events
Monday, February 25, 13
Our Agenda


                    • Version 1.3.0
                    • Packaging for Distribution


Monday, February 25, 13
The Mobile Space Today



Monday, February 25, 13
85% of all US adults
                          now own a mobile
                                phone


Monday, February 25, 13
56% of all mobile
                    phone owners in the
                   US access the internet.


Monday, February 25, 13
Did you know 80% of customers
                 abandon a mobile site if they
                  have a bad user experience?




Monday, February 25, 13
Web Apps               Native Apps

                Can migrate web skills       Longer learning curve
                      One source base         Many source bases
               Deploy when you want       Deployment needs approval
         You choose when to update       User chooses when to update
             No device memory used           Uses device memory
                  Difficult to monetize      Monetization is built-in
             Restricted device access    Full access to device hardware
                           Slower                   Faster

Monday, February 25, 13
What is a Web App?

                    • A web app is more than just a website
                    • It incorporates app-like behavior
                    • Think GMail or Google Maps


Monday, February 25, 13
A unified, HTML5-based user interface system for all
    popular mobile device platforms, built on the rock-solid
    jQuery and jQuery UI foundation. Its lightweight code is
    built with progressive enhancement, and has a flexible,
    easily theme-able design. 

    Requires jQuery.




Monday, February 25, 13
From Web to Mobile


                    • Your HTML/CSS skills are still valuable
                    • Good design is more important than ever


Monday, February 25, 13
JQM & HTML5

                    • JQM doesn’t require you know HTML5
                    • JQM uses HTML5 when available
                    • Prefers semantic markup: header, footer,
                          section




Monday, February 25, 13
Getting Started with
                            jQuery Mobile


Monday, February 25, 13
Downloading JQM

                    • jquerymobile.com/download
                    • Use the uncompressed version while
                          developing
                    • Use the minimized version for deployment
                    • Get the correct version of jQuery

Monday, February 25, 13
Loading JQM
  <!DOCTYPE html>
  <html>
  <head>
    <title>Page Title</title>
    <meta name="viewport"
      content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
      href="http://code.jquery.com/mobile/1.3.0/ jquery.mobile-1.3.0.min.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js">
    </script>
  </head>




Monday, February 25, 13
Self-hosting vs. CDN

                    • CDN = Content Delivery Network
                    • Can speed up app load two ways:
                     • CDN’s use edge servers
                     • May be cached by other apps

Monday, February 25, 13
CDN Fallback Code
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
  </script>

  <script>
  window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"></
  script>');
  </script>




Monday, February 25, 13
Understanding Page
                            Architecture


Monday, February 25, 13
Best Practices

                    • Downloading is slow so,
                     • Download as few files as possible
                     • Download as little data as possible
                    • Use a JS minifier

Monday, February 25, 13
JQM Pages

                    • A single HTML page can contain many JQM
                          Pages
                    • This allows page transitions without server
                          contact




Monday, February 25, 13
JQM Pages
                    • Pages are denoted with data-role=”page”
                    • Multiple JQM pages can be on an HTML
                          page
                    • Only one page is active at a time
                    • $.mobile.activePage is the currently active
                          page


Monday, February 25, 13
Page Transitions

                    • Animate from one page to next
                    • Only work on platforms that support CSS
                          3D transforms
                    • Others will see only “fade”
                    • Android below version 4

Monday, February 25, 13
Page Transitions
                    • fade
                    • pop
                    • flip
                    • turn
                    • flow
                    • and more
Monday, February 25, 13
Toolbars

                    • Supports HTML5 header/footer tags
                    • Or via div tag with data-role
                    • data-role=”header”
                    • data-role=”footer”

Monday, February 25, 13
Positioning Toolbars

                    • Toolbars will normally flow with the page
                    • data-position=”fixed”
                    • data-fullscreen=”true”


Monday, February 25, 13
Navbars
                    • Denoted by data-role=”navbar”
                    • When a link is clicked, it gets the active
                          state (ui-btn-active)
                    • JQM automatically sizes button
                    • 5 or less buttons, single line
                    • More than 5, two across
Monday, February 25, 13
Navbars

                    • Can appear in headers
                    • Or footers
                    • Can be persisted
                    • Can have icons

Monday, February 25, 13
Creating jQuery Mobile
                        Forms


Monday, February 25, 13
Form Basics

                    • Buttons
                    • Sliders
                    • Range Slider
                    • Flip Switch
                    • Checkboxes

Monday, February 25, 13
Selects

                    • Select
                    • Mini select
                    • Custom select
                    • Multi-slect with optgroups+

Monday, February 25, 13
Text

                    • Text input
                    • Textarea
                    • Number, date, tel, search
                    • File
                    • Password

Monday, February 25, 13
Getting Data to the
                                Server




Monday, February 25, 13
Working with Lists



Monday, February 25, 13
Listviews
                    • Unordered (ul)
                    • Ordered (ol)
                    • Linked
                    • Inset
                    • Filter
                    • List dividers
Monday, February 25, 13
Listviews

                    • Autodividers
                    • Count bubbles
                    • Icons
                    • Thumbnails
                    • Formatted content

Monday, February 25, 13
Nested listviews have been
                deprecated in version 1.3 - they
                will be removed in version 1.4.



Monday, February 25, 13
jQuery Mobile Events



Monday, February 25, 13
Events

                    • Touch events
                    • Orientation events
                    • Scroll events
                    • Page events

Monday, February 25, 13
Touch Events

                    • swipe
                    • swipeleft
                    • swiperight
                    • tap
                    • taphold

Monday, February 25, 13
Orientation Change


                    • orientationchange
                    • Not supported natively universally


Monday, February 25, 13
Scroll Events


                    • scrollstart
                    • scrollstop


Monday, February 25, 13
Page Events

                    • pageinit - use this instead of DOM ready()
                    • pagehide
                    • pageshow


Monday, February 25, 13
Version 1.3.0



Monday, February 25, 13
New Features

                    • Panels
                    • Responsive tables
                    • Range sliders
                    • Responsive grids
                    • Deprecated: nested lists

Monday, February 25, 13
Packaging for
                          Distribution


Monday, February 25, 13
Hybrid Apps

                    • HTML5 web app
                    • Wrapped in a native app
                    • Usually adds a way to access native features
                    • Distributable in most app stores

Monday, February 25, 13
Hybrid Apps

                                Can migrate web skills
                                   One source base
                             Deployment needs approval
                            User chooses when to update
                                 Uses device memory
                               Monetization is possible
                           Access to some device hardware
                          Faster than web, slower than device

Monday, February 25, 13
Ways to Hybridize

                    • PhoneGap
                    • Icenium
                    • Others


Monday, February 25, 13
PhoneGap

                    • Created by Nitobi, acquired by Adobe
                    • Open sourced as Apache Cordova
                    • PhoneGap is a trademark of Adobe


Monday, February 25, 13
Icenium
                    • Also based on Apache Cordova
                    • Built by Telerik
                    • PhoneGap code runs unmodified
                    • Deploy directly to device
                    • Includes Kendo UI Mobile
                    • Free until May 1st
Monday, February 25, 13
Others

                    • Appcelerator Titanium
                    • Trigger.io
                    • CodeName One
                    • (and still more)

Monday, February 25, 13
Links

                    • jquerymobile.com
                    • jquerymobile.com/themeroller/
                    • phonegap.com
                    • www.icenium.com

Monday, February 25, 13
My Links

                    • @therockncoder
                    • rockncoder@gmail.com
                    • http://therockncoder.blogspot.com/
                    • http://www.youtube.com/user/rockncoder
                    • https://github.com/Rockncoder

Monday, February 25, 13
Questions?



Monday, February 25, 13

More Related Content

Introduction to jQuery Mobile

  • 1. Intro to jQuery Mobile South Bay Mobile User Group - 26 February 2013 Monday, February 25, 13
  • 3. Who Am I? • Troy Miles • Senior Software Engineer w/ 30+ years of experience • Mobile/Mobile Web • iOS, Android, & Windows Phone 7 Monday, February 25, 13
  • 5. Intermediate PhoneGap • Learn by doing • JS best practices, iScroll, Maps, Ajax + more • Saturday, May 18th - 9 AM to 6 PM • $99 - lunch & materials included • http://bit.ly/XlxzYp • CraveLab - Los Angeles Monday, February 25, 13
  • 6. You May Get Mad At Me • Sorry, in advance if I insult your favorite: company, device, or personality • I have nothing against any of these companies • I will gladly do a project for any of them, for the right price Monday, February 25, 13
  • 7. Our Agenda • The Mobile Space Today • Getting Started with jQuery Mobile • Understanding Page Architecture • Creating jQuery Mobile Forms • Working with Lists • jQuery Mobile Events Monday, February 25, 13
  • 8. Our Agenda • Version 1.3.0 • Packaging for Distribution Monday, February 25, 13
  • 9. The Mobile Space Today Monday, February 25, 13
  • 10. 85% of all US adults now own a mobile phone Monday, February 25, 13
  • 11. 56% of all mobile phone owners in the US access the internet. Monday, February 25, 13
  • 12. Did you know 80% of customers abandon a mobile site if they have a bad user experience? Monday, February 25, 13
  • 13. Web Apps Native Apps Can migrate web skills Longer learning curve One source base Many source bases Deploy when you want Deployment needs approval You choose when to update User chooses when to update No device memory used Uses device memory Difficult to monetize Monetization is built-in Restricted device access Full access to device hardware Slower Faster Monday, February 25, 13
  • 14. What is a Web App? • A web app is more than just a website • It incorporates app-like behavior • Think GMail or Google Maps Monday, February 25, 13
  • 15. A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design.  Requires jQuery. Monday, February 25, 13
  • 16. From Web to Mobile • Your HTML/CSS skills are still valuable • Good design is more important than ever Monday, February 25, 13
  • 17. JQM & HTML5 • JQM doesn’t require you know HTML5 • JQM uses HTML5 when available • Prefers semantic markup: header, footer, section Monday, February 25, 13
  • 18. Getting Started with jQuery Mobile Monday, February 25, 13
  • 19. Downloading JQM • jquerymobile.com/download • Use the uncompressed version while developing • Use the minimized version for deployment • Get the correct version of jQuery Monday, February 25, 13
  • 20. Loading JQM <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/ jquery.mobile-1.3.0.min.css"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"> </script> </head> Monday, February 25, 13
  • 21. Self-hosting vs. CDN • CDN = Content Delivery Network • Can speed up app load two ways: • CDN’s use edge servers • May be cached by other apps Monday, February 25, 13
  • 22. CDN Fallback Code <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script> <script> window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"></ script>'); </script> Monday, February 25, 13
  • 23. Understanding Page Architecture Monday, February 25, 13
  • 24. Best Practices • Downloading is slow so, • Download as few files as possible • Download as little data as possible • Use a JS minifier Monday, February 25, 13
  • 25. JQM Pages • A single HTML page can contain many JQM Pages • This allows page transitions without server contact Monday, February 25, 13
  • 26. JQM Pages • Pages are denoted with data-role=”page” • Multiple JQM pages can be on an HTML page • Only one page is active at a time • $.mobile.activePage is the currently active page Monday, February 25, 13
  • 27. Page Transitions • Animate from one page to next • Only work on platforms that support CSS 3D transforms • Others will see only “fade” • Android below version 4 Monday, February 25, 13
  • 28. Page Transitions • fade • pop • flip • turn • flow • and more Monday, February 25, 13
  • 29. Toolbars • Supports HTML5 header/footer tags • Or via div tag with data-role • data-role=”header” • data-role=”footer” Monday, February 25, 13
  • 30. Positioning Toolbars • Toolbars will normally flow with the page • data-position=”fixed” • data-fullscreen=”true” Monday, February 25, 13
  • 31. Navbars • Denoted by data-role=”navbar” • When a link is clicked, it gets the active state (ui-btn-active) • JQM automatically sizes button • 5 or less buttons, single line • More than 5, two across Monday, February 25, 13
  • 32. Navbars • Can appear in headers • Or footers • Can be persisted • Can have icons Monday, February 25, 13
  • 33. Creating jQuery Mobile Forms Monday, February 25, 13
  • 34. Form Basics • Buttons • Sliders • Range Slider • Flip Switch • Checkboxes Monday, February 25, 13
  • 35. Selects • Select • Mini select • Custom select • Multi-slect with optgroups+ Monday, February 25, 13
  • 36. Text • Text input • Textarea • Number, date, tel, search • File • Password Monday, February 25, 13
  • 37. Getting Data to the Server Monday, February 25, 13
  • 38. Working with Lists Monday, February 25, 13
  • 39. Listviews • Unordered (ul) • Ordered (ol) • Linked • Inset • Filter • List dividers Monday, February 25, 13
  • 40. Listviews • Autodividers • Count bubbles • Icons • Thumbnails • Formatted content Monday, February 25, 13
  • 41. Nested listviews have been deprecated in version 1.3 - they will be removed in version 1.4. Monday, February 25, 13
  • 42. jQuery Mobile Events Monday, February 25, 13
  • 43. Events • Touch events • Orientation events • Scroll events • Page events Monday, February 25, 13
  • 44. Touch Events • swipe • swipeleft • swiperight • tap • taphold Monday, February 25, 13
  • 45. Orientation Change • orientationchange • Not supported natively universally Monday, February 25, 13
  • 46. Scroll Events • scrollstart • scrollstop Monday, February 25, 13
  • 47. Page Events • pageinit - use this instead of DOM ready() • pagehide • pageshow Monday, February 25, 13
  • 49. New Features • Panels • Responsive tables • Range sliders • Responsive grids • Deprecated: nested lists Monday, February 25, 13
  • 50. Packaging for Distribution Monday, February 25, 13
  • 51. Hybrid Apps • HTML5 web app • Wrapped in a native app • Usually adds a way to access native features • Distributable in most app stores Monday, February 25, 13
  • 52. Hybrid Apps Can migrate web skills One source base Deployment needs approval User chooses when to update Uses device memory Monetization is possible Access to some device hardware Faster than web, slower than device Monday, February 25, 13
  • 53. Ways to Hybridize • PhoneGap • Icenium • Others Monday, February 25, 13
  • 54. PhoneGap • Created by Nitobi, acquired by Adobe • Open sourced as Apache Cordova • PhoneGap is a trademark of Adobe Monday, February 25, 13
  • 55. Icenium • Also based on Apache Cordova • Built by Telerik • PhoneGap code runs unmodified • Deploy directly to device • Includes Kendo UI Mobile • Free until May 1st Monday, February 25, 13
  • 56. Others • Appcelerator Titanium • Trigger.io • CodeName One • (and still more) Monday, February 25, 13
  • 57. Links • jquerymobile.com • jquerymobile.com/themeroller/ • phonegap.com • www.icenium.com Monday, February 25, 13
  • 58. My Links • @therockncoder • rockncoder@gmail.com • http://therockncoder.blogspot.com/ • http://www.youtube.com/user/rockncoder • https://github.com/Rockncoder Monday, February 25, 13