Building jQuery Mobile Web Apps

Building jQuery Mobile Web Apps by Jag Reehal (@jagreehal) OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

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

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

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

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

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

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/mobile-web-browsers-list.php OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

Worldwide mobile browser trends for the last 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

European mobile browser trends for the last 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

North American mobile browser trends for the last 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

African mobile browser trends for the last 6 months OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

Asian mobile browser trends for the last 6 months 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 device fragmentation (yes I’m looking at you Android) OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

“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, 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

Supports more platforms than any other mobile web UI framework OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

Had ‘A’ grade support for mobile browsers before V1 OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Feedback  Let me know after the talk  On twitter @jagreehal  By email jag@operationmobile.com OPERATION MOBILE - HIRE US FOR YOUR MOBILE MISSION

Building jQuery Mobile Web Apps

More Related Content

What's hot

Viewers also liked

Similar to Building jQuery Mobile Web Apps

Recently uploaded

Building jQuery Mobile Web Apps