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


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


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


Why use a mobile web UI framework?

Because of the

BROWSER!

We want the SAME markup to be rendered CONSISTANTLY across
browsers


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…


It’s not just about native browsers…


because users could be using…

And there’s more I couldn’t fit in!

http://www.webdevelopersnotes.com/articles/mobile-web-browsers-list.php


Worldwide mobile browser trends for the
last 6 months


European mobile browser trends for the
last 6 months


North American mobile browser trends for
the last 6 months


African mobile browser trends for the last 6
months


Asian mobile browser trends for the last 6
months


And don’t forget about browser versions!


And let’s not forget about device
fragmentation (yes I’m looking at you
Android)


“write less, do more”


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


Supports more platforms than any other
mobile web UI framework


Had ‘A’ grade support for mobile browsers
before V1


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


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


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


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


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


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">
</div>

FILE: 2_basic_page_template_fixed_footer.html


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


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


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">
</div>

FILE: 5_multi_page_template_fixed_header_footer_between_transition.html


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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!)


Feedback

 Let me know after the talk

 On twitter @jagreehal

 By email jag@operationmobile.com


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