jQuery Mobile is the easiest way to go from web to mobile. It can be used for internet application or serve as the UI for PhoneGap applications. Here is a fast pace introduction to jQuery Mobile.
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
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
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
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
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
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