Your SlideShare is downloading. ×
Building jQuery Mobile Web Apps                                by           Jag Reehal (@jagreehal)OPERATION MOBILE - HIRE...
Agenda About   me   What this talk is about   Why use a mobile web UI framework?   Why jQuery Mobile?   Look at some ...
About Me   Live in Cambridge   Ive been a freelance web developer for over twelve years   Freelance mobile web developer f...
This talk is about    Developing jQuery Mobile web apps    (jQuery Mobile can be used as the UI for native apps)    This t...
Why use a mobile web UI framework?Because of the                             BROWSER!        We want the SAME markup to be...
Why use a mobile web UI framework?    Who did web development in the days of Netscape?    My first job after graduating in...
It’s not just about native browsers…          OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
because users could be using…             And there’s more I couldn’t fit in!http://www.webdevelopersnotes.com/articles/mo...
Worldwide mobile browser trends for thelast 6 months         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
European mobile browser trends for thelast 6 months         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
North American mobile browser trends forthe last 6 months         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
African mobile browser trends for the last 6months          OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Asian mobile browser trends for the last 6months          OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
And don’t forget about browser versions!         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
And let’s not forget about devicefragmentation (yes I’m looking at youAndroid)          OPERATION MOBILE - HIRE US FOR YOU...
“write less, do more”OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
jQuery Mobile   makes it easy to develop user interfaces for mobile web apps   has events for touch actions like tap, ta...
Supports more platforms than any othermobile web UI framework         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Had ‘A’ grade support for mobile browsersbefore V1         OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
Is fast and compact      31kb                        jQuery.min.js      24kb                        jQuery.mobile.min.js  ...
Let’s build a app using jQuery Mobile App provides functionality for a user to register and view events and who’s  attend...
I will use Just jQuery and the jQuery Mobile Framework NO other JavaScript library Minimal custom CSS styles No server ...
If you’re here (i.e. not viewing this onslideshare) follow along! Follow along http://tinyurl.com/jqmpres       View fin...
Step 1. Basic page template Viewport meta tag for layout Uses jQuery CDN for JavaScript and CSS resources Uses data-rol...
Step 2. Fixed footer Use data-position="fixed" to lock the footer to the bottom  of the page e.g.<div data-role="footer" ...
Step 3. Multi page template Can have multiple pages in single html file Each page much have a unique Id Uses hash tags ...
Step 4. Page transitions Lots of options Can configure default using config Use on individual links<a href="#bar" data-...
Step 5. Multi page fixed footers Must specify fixed data position attribute for smooth  experience otherwise their (initi...
Step 6. Multi page back button Default is not to show a back button Default can be overridden in config Or you can add ...
Step 7. Header buttons Can specify position to be on the left or right side using  CSS class Can use icon that comes wit...
Step 8. Dialog Pages Same as a page but with data-rel attribute in link to specify  target is a dialog Can use same tran...
Step 9. Demo template Contains a page with a dialog Specifies lang=“en” in head element Set the charset to UTF-8FILE: 9...
Step 10. Add a list Want to display a list of events Same as normal HTML list but with added attribute  that jQuery Mobi...
Step 11. Add a list divider Use list dividers to enhance the UX of your app Add list item with data-role attribute<ul da...
Step 12. Use data inset for rounded corners Adding data-inset attribute gives lists nicer styling<ul data-role="listview"...
Step 13. Create event page New page to show event details Users can register to attend an event View people who are att...
Step 14. Add event actions using buttons Use data-role and data-type attributes to align buttons<div data-role="controlgr...
Step 15. Adding actions in the footer v2 Use navbar data-role with icons for nice action  buttons<div data-role="navbar">...
Step 16. Add Registration FormWay to much code to list! Get the code to see the mark up! Uses native controls – unless  y...
Step 17. Page events to handle form submit Use page event to set up handler for form submit  action Do NOT use $(documen...
Step 18. Store attendees Could use form submit to send data to a server In this example add attendee to a JavaScript col...
Step 19. Add sample data Use the populate button to add items into the  JavaScript array! Not going to be happy if you’r...
Step 20. Show attendees in Event page In the pageshow event loop over attendees  collection and add list item for each at...
Step 21. Fix list view wrapping Use CSS style so that list items don’t have ellipses.ui-li-desc {white-space: normal;}FIL...
Step 22. Show list filter Built in to the framework is the to filter list options Can specify your own placeholder In t...
Step 23. Show thumbnails Convention based list templates are built in to the  framework If img is the first element in a...
Step 24. Create attendee page Show attendee information But each link is to the same page… so how can  you pass data?   ...
Step 25. Show attendee page passing id Add id attribute to each list item element On the click event of a list item elem...
Step 26. Attendee Swipe Because jQuery Mobile is touch optimised Adding touch events is easy! In the demo swipe left an...
Step 27. Using the themes jQuery Mobile comes with 5 themes Themes can be set by using the data-theme attribute<div data...
Step 28. Using the themes on elements Can use mixture of themes for different elements e.g.  theme ‘e’ for the page and t...
Step 29. Using themeroller jQuery Mobile tool for creating your own theme -  http://jquerymobile.com/themeroller/ Use th...
Steps 30. Use HTML5 local storage to storeattendees Not a jQuery Mobile feature         Not checking if localstorage is s...
Want further inspiration? If you want further inspiration checkout the jQuery Mobile  gallery http://www.jqmgallery.com/ ...
Operation Mobile Blog Check out my blog series on Yummy Bakes  (http://tinyurl.com/ybmvc) Looking at mobile web UX, perf...
What are the downsides? Not suited for building games (but that’s not what it was built for) Doesn’t give full native ex...
So to wrap up jQuery Mobile is the most compatible mobile web UI framework out there Although not native gives consisten...
Feedback Let me know after the talk On twitter @jagreehal By email jag@operationmobile.com                   OPERATION ...
Upcoming SlideShare
Loading in...5
×

Building jQuery Mobile Web Apps

18,037

Published on

These are the slides for my talk about jQuery Mobile and creating a jQuery Mobile web app from scratch with nothing more than a text editor.

Published in: Technology, Business
1 Comment
20 Likes
Statistics
Notes
No Downloads
Views
Total Views
18,037
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
1
Likes
20
Embeds 0
No embeds

No notes for slide

Transcript of "Building jQuery Mobile Web Apps"

  1. 1. Building jQuery Mobile Web Apps by Jag Reehal (@jagreehal)OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  2. 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. 3. About Me Live in Cambridge Ive 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. 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. 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. 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. 7. It’s not just about native browsers… OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  8. 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. 9. Worldwide mobile browser trends for thelast 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  10. 10. European mobile browser trends for thelast 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  11. 11. North American mobile browser trends forthe last 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  12. 12. African mobile browser trends for the last 6months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  13. 13. Asian mobile browser trends for the last 6months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  14. 14. And don’t forget about browser versions! OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  15. 15. And let’s not forget about devicefragmentation (yes I’m looking at youAndroid) OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  16. 16. “write less, do more”OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  17. 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. 18. Supports more platforms than any othermobile web UI framework OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  19. 19. Had ‘A’ grade support for mobile browsersbefore V1 OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  20. 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. 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. 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. 23. If you’re here (i.e. not viewing this onslideshare) follow along! Follow along http://tinyurl.com/jqmpres  View final http://tinyurl.com/jqmfinal OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  24. 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. 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. 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. 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 attributeFILE: 4_multi_page_template_page_transitions.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  28. 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. 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 buttonFILE: 6_multi_page_template_page_back_button.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  30. 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. 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. 32. Step 9. Demo template Contains a page with a dialog Specifies lang=“en” in head element Set the charset to UTF-8FILE: 9_demo_template.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  33. 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 Reehals talk</a></li></ul>FILE: 10_demo_using_list.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  34. 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 Reehals talk</a></li></ul>FILE: 11_demo_using_list_divider.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  35. 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 stylesFILE: 12_demo_using_list_inset.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  36. 36. Step 13. Create event page New page to show event details Users can register to attend an event View people who are attendingFILE: 13_create_event_page.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  37. 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. 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 textFILE: 15_demo_event_actions_using_nav_in_footer.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  39. 39. Step 16. Add Registration FormWay 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. 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 infoFILE: 17_demo_jQueryMobile_page_events_to_handle_form_submit.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  41. 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 demoFILE: 18_demo_storing_attendees.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  42. 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. 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. 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. 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. 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 thumbnailFILE: 23_demo_show_thumbnails.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  47. 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. 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 pageFILE: 25_demo_show_attendee_passing_id.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  49. 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. 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. 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. 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. 53. Steps 30. Use HTML5 local storage to storeattendees 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 addedFILE: 30_demo_local_storage.html OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION
  54. 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. 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. 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. 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 youll 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. 58. Feedback Let me know after the talk On twitter @jagreehal By email jag@operationmobile.com OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

×