1. Building jQuery Mobile Web Apps
by
Jag Reehal (@jagreehal)
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
2. Agenda
About me
What this talk is about
Why use a mobile web UI framework?
Why jQuery Mobile?
Look at some of the basic building blocks
Build an app using jQuery Mobile
What are the downsides?
Wrap up
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
3. About Me
Live in Cambridge
I've been a freelance web developer for over twelve years
Freelance mobile web developer for over two years
Microsoft and Java certified
Experience of building native iOS and Android apps
Barcelona supporter
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
4. This talk is about
Developing jQuery Mobile web apps
(jQuery Mobile can be used as the UI for native apps)
This talk is not about native vs. web apps
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
5. Why use a mobile web UI framework?
Because of the
BROWSER!
We want the SAME markup to be rendered CONSISTANTLY across
browsers
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
6. Why use a mobile web UI framework?
Who did web development in the days of Netscape?
My first job after graduating in 2000 was to make Fords ecommerce
website work with… IE6
The only way was to have separate files for each browser
Now I’m a mobile web developer and the browser problem
has got worse…
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
7. It’s not just about native browsers…
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
8. because users could be using…
And there’s more I couldn’t fit in!
http://www.webdevelopersnotes.com/articles/mobile-web-browsers-list.php
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
9. Worldwide mobile browser trends for the
last 6 months
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
10. European mobile browser trends for the
last 6 months
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
11. North American mobile browser trends for
the last 6 months
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
12. African mobile browser trends for the last 6
months
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
13. Asian mobile browser trends for the last 6
months
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
14. And don’t forget about browser versions!
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
15. And let’s not forget about device
fragmentation (yes I’m looking at you
Android)
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
16. “write less, do more”
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
17. jQuery Mobile
makes it easy to develop user interfaces for mobile web apps
has events for touch actions like tap, tap-and-hold, and swipe
uses progressive enhancement so your UI will adapt to what the browser supports
is responsive so can adapt to screen size and orientation
is free to use for commercial projects
excellent support on its’ forum and on StackOverflow
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
18. Supports more platforms than any other
mobile web UI framework
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
19. Had ‘A’ grade support for mobile browsers
before V1
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
20. Is fast and compact
31kb jQuery.min.js
24kb jQuery.mobile.min.js
7kb jQuery.mobile.min.css
You can use content distribution network (CDN) or self host
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
21. Let’s build a app using jQuery Mobile
App provides functionality for a user to register and view events and who’s
attending
Aim to show how easy it is to build a optimised UI for mobiles and tablets which
can detect touch specific actions e.g. swipe.
The code is on github - https://github.com/operationmobile/jQueryMobileDemo
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
22. I will use
Just jQuery and the jQuery Mobile Framework NO other JavaScript library
Minimal custom CSS styles
No server side code
A text editor – no need for a special IDE
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
23. If you’re here (i.e. not viewing this on
slideshare) follow along!
Follow along http://tinyurl.com/jqmpres View final http://tinyurl.com/jqmfinal
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
24. Step 1. Basic page template
Viewport meta tag for layout
Uses jQuery CDN for JavaScript and CSS resources
Uses data-role HTML5 attributes
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
FILE: 1_basic_page_template.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
25. Step 2. Fixed footer
Use data-position="fixed" to lock the footer to the bottom
of the page e.g.
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
FILE: 2_basic_page_template_fixed_footer.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
26. Step 3. Multi page template
Can have multiple pages in single html file
Each page much have a unique Id
Uses hash tags to navigate between pages e.g.
<a href="#bar">bar</a>
would go to the page
<div data-role="page" id="bar">
FILE: 3_multi_page_template.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
27. Step 4. Page transitions
Lots of options
Can configure default using config
Use on individual links
<a href="#bar" data-role="button" data-
transition="fade">fade</a>
Uses same transition to go back
BTW you can make links into buttons using a data-
role attribute
FILE: 4_multi_page_template_page_transitions.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
28. Step 5. Multi page fixed footers
Must specify fixed data position attribute for smooth
experience otherwise their (initial) position can be random
Use same data-id attribute in footers
<div data-role="header" data-position="fixed">
<h1>Foo</h1>
</div>
<div data-role="footer" data-position="fixed" data-id="myfooter">
<h4>Page Footer</h4>
</div>
FILE: 5_multi_page_template_fixed_header_footer_between_transition.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
29. Step 6. Multi page back button
Default is not to show a back button
Default can be overridden in config
Or you can add it on page by page basis
<div data-role="page" id="bar" data-add-back-btn="true">
</div>
Think about if you really need one e.g. browser/device
back button
FILE: 6_multi_page_template_page_back_button.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
30. Step 7. Header buttons
Can specify position to be on the left or right side using
CSS class
Can use icon that comes with the framework or use your
own by using data-icon attribute
<div data-role="header">
<a href="#" class="ui-btn-right" data-icon="home">Home</a>
<h1>Page Title</h1>
</div>
FILE: 7_header_button_on_right.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
31. Step 8. Dialog Pages
Same as a page but with data-rel attribute in link to specify
target is a dialog
Can use same transitions as a page
Can add custom buttons etc. to close the dialog
<a href="#bar" data-rel="dialog">Bar</a>
FILE: 8_dialogs.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
32. Step 9. Demo template
Contains a page with a dialog
Specifies lang=“en” in head element
Set the charset to UTF-8
FILE: 9_demo_template.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
33. Step 10. Add a list
Want to display a list of events
Same as normal HTML list but with added attribute
that jQuery Mobile uses to render list UI
<ul data-role="listview">
<li><a href="#event">Jag Reehal's talk</a></li>
</ul>
FILE: 10_demo_using_list.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
34. Step 11. Add a list divider
Use list dividers to enhance the UX of your app
Add list item with data-role attribute
<ul data-role="listview">
<li data-role="list-divider">Upcoming Events</li>
<li><a href="#event">Jag Reehal's talk</a></li>
</ul>
FILE: 11_demo_using_list_divider.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
35. Step 12. Use data inset for rounded corners
Adding data-inset attribute gives lists nicer styling
<ul data-role="listview" data-inset="true">
Margin can also be added manually using CSS styles
FILE: 12_demo_using_list_inset.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
36. Step 13. Create event page
New page to show event details
Users can register to attend an event
View people who are attending
FILE: 13_create_event_page.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
37. Step 14. Add event actions using buttons
Use data-role and data-type attributes to align buttons
<div data-role="controlgroup" data-type="horizontal">
…
</div>
FILE: 14_demo_events_actions_using_buttons_in_footer.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
38. Step 15. Adding actions in the footer v2
Use navbar data-role with icons for nice action
buttons
<div data-role="navbar">
<ul>
…
</ul>
</div>
Icons can be placed above, below and to the left or
right of the text
FILE: 15_demo_event_actions_using_nav_in_footer.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
39. Step 16. Add Registration Form
Way to much code to list! Get the code to see the mark up!
Uses native controls – unless
you specify not to
Running the demo will only show
input uses type so only numbers
for a type=“number” field
Custom controls!
FILE: 16_demo_registration_form.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
40. Step 17. Page events to handle form submit
Use page event to set up handler for form submit
action
Do NOT use $(document).ready
Use pagecreate events – see docs for more info
FILE: 17_demo_jQueryMobile_page_events_to_handle_form_submit.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
41. Step 18. Store attendees
Could use form submit to send data to a server
In this example add attendee to a JavaScript collection
Which is not persisted if you refresh the page!
We’ll add HTML5 local storage later in the demo
FILE: 18_demo_storing_attendees.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
42. Step 19. Add sample data
Use the populate button to add items into the
JavaScript array!
Not going to be happy if you’re a Real Madrid fan ;)
FILE: 19_demo_add_sample_data.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
43. Step 20. Show attendees in Event page
In the pageshow event loop over attendees
collection and add list item for each attendee
Don’t forget to call refresh when you’ve added
or deleted an element!
$('#attendees').listview('refresh');
FILE: 20_demo_show_attendees_in_event_page.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
44. Step 21. Fix list view wrapping
Use CSS style so that list items don’t have ellipses
.ui-li-desc {white-space: normal;}
FILE: 21_demo_fix_list_view_wrapping.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
45. Step 22. Show list filter
Built in to the framework is the to filter list options
Can specify your own placeholder
In the demo it’s only shown when at least one
attendee has registered
Can be added by using data-filter attribute
<ul data-role="listview" data-filter="true">
</ul>
FILE: 22_demo_show_list_filter.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
46. Step 23. Show thumbnails
Convention based list templates are built in to the
framework
If img is the first element in a list item element then it
will used as a thumbnail
<li>
<img/>
<h3>Name</h3>
<p>Bio</p>
</li>
Demo uses twitter avatar as thumbnail
FILE: 23_demo_show_thumbnails.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
47. Step 24. Create attendee page
Show attendee information
But each link is to the same page… so how can
you pass data?
Local storage?
URL?
jQuery data?
Set JavaScript variable?
FILE: 24_create_show_attendee_page.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
48. Step 25. Show attendee page passing id
Add id attribute to each list item element
On the click event of a list item element set id as
current id
Populate placeholders in attendee details page
Show the attendees details page
FILE: 25_demo_show_attendee_passing_id.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
49. Step 26. Attendee Swipe
Because jQuery Mobile is touch optimised
Adding touch events is easy!
In the demo swipe left and right to view attendees!
This is done by binding to the events
$('#attendee').bind('swiperight', function (e) {});
$('#attendee').bind('swipeleft', function (e) {});
FILE: 26_demo_attendee_swipe.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
50. Step 27. Using the themes
jQuery Mobile comes with 5 themes
Themes can be set by using the data-theme attribute
<div data-role="page" id="home" data-theme="e">
FILE: 27_demo_use_theme.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
51. Step 28. Using the themes on elements
Can use mixture of themes for different elements e.g.
theme ‘e’ for the page and theme ‘a’ for a list
<div data-role="page" id="home" data-theme="e">
<div data-role= "listview" data-theme="a">
</div>
</div>
FILE: 28_demo_use_theme_on_elements.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
52. Step 29. Using themeroller
jQuery Mobile tool for creating your own theme -
http://jquerymobile.com/themeroller/
Use the UI to create theme, download and link to your custom
style
<link rel="stylesheet" href="themes/browntheme.css" />
FILE: 29_demo_using_themeroller
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
53. Steps 30. Use HTML5 local storage to store
attendees
Not a jQuery Mobile feature
Not checking if localstorage is supported on
your device - we could have used a polyfill
Very easy to integrate into demo – only a few lines
need to be added
FILE: 30_demo_local_storage.html
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
54. Want further inspiration?
If you want further inspiration checkout the jQuery Mobile
gallery http://www.jqmgallery.com/
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
55. Operation Mobile Blog
Check out my blog series on Yummy Bakes
(http://tinyurl.com/ybmvc)
Looking at mobile web UX, performance, etc.
Version using ASP.NET MVC 4
Version using knockout.js
Version using backbone.js
Create native versions using Phonegap and Titanium
Mobile
Use other mobile web frameworks such as Kendo
UI, jQMobi and Sencha Touch
Automated UI testing
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
56. What are the downsides?
Not suited for building games (but that’s not what it was built for)
Doesn’t give full native experience
Favors iOS. A lot of web UI frameworks are much smoother on iOS
Ask to see a demo on a friends Android/iOS device
Opportunity for other frameworks to take advantage e.g. jQMobi
Heavyweight if all you want is to detect touch events – use Zepto.js
instead
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
57. So to wrap up
jQuery Mobile is the most compatible mobile web UI framework out there
Although not native gives consistent experience across wide range of
devices with progressive enhancement
Yes you have to may have to write JavaScript to do anything useful and do
some custom styling
But 99.9% of the time you'll just be using the framework!
You saw how quickly we put together a touch enabled web app
Can be used to build native apps (talk to your organiser if you want me to do
a talk on this!)
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
58. Feedback
Let me know after the talk
On twitter @jagreehal
By email jag@operationmobile.com
OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION