Real World Lessons in jQuery Mobile

Kai Koenig @AgentK

!

“I wish someone had told me that beforehand”

Web/Mobile Developer since the late 1990s

Interested in: Java, CFML, Functional

Programming, Go, JS, Mobile, Raspberry Pi

!

I’ve already showed you where I live :)

Me

- Some jQuery Mobile basic concepts- Architecture considerations and dealing with

your application & backend data- Can I use Responsive Design with jQM? - Device troubles and how to approach them - The issues with plugins and widgets- Other, unsorted bits and pieces

Agenda

jQuery Mobile concepts

Basics

jQuery Mobile

Framework for developing portable, mobile websites or web applications, mobile apps or desktop apps.

!

Builds on top of the jQuery framework

!

Leverages semantic HTML5/CSS3 and JS

Philosophy

jQuery Mobile

Cross-Mobile Platform (i.e. mobile operating system)

!

Cross-Browser

!

Optimised for touch but also provides support for mouse cursor

jQuery Mobile

1 .js file,1-many .css files and some images

!

Minified and/or Structure-only versions

!

Custom download packaging

!

2 interesting and very different examples

http://c.dric.be

http://m.stanford.edu

!

!

!

Discuss!

Architecture and Data

What do you want to build?

Some (good?) scenarios for jQM

Existing site and you want a mobile “view”. !

Existing site and you want a mobile web app complementing it. !

You’ve got an awesome idea for an app and want to leverage your web skills to build a mobile app for an app store.

Single-Page-App

Request-Response-Model

Architecture choices

Demo of the two different approaches with jQM and CF here

Be aware though

If you only have a hammer in your toolbox, every problem looks like a nail

Some (bad?) scenarios for jQM

You want to build a casual game app. (maybe use Flash/AIR and compile to native app) !

You want to build a game app using some 3D rendering and lots of heavy maths. (go native) !

You want a 100% “real and beautiful and awesome and perfect and...” native experience (go native)

Be aware EVEN MORE

Let’s get back to jQuery Mobile: !

- Widgets - Page Management - History Management - Event Management !

What’s missing here?

The need for another (data) framework

If you decide to build a Single-Page-App you most likely want to have another framework involved: !

- AngularJS (careful, known issues) - Knockout or Backbone !

Also worthwhile having a look at - structuring your app with RequireJS.

Require and jQuery Mobile

Demo of using jQuery Mobile with RequireJS

Responsive and jQM

Device detection is hard

Device detection

In all seriousness - you’re trying to swim against the stream if you try device detection on your own. !

- External services that help you (WURFL) - Do not do it unless you really have to* !

* For instance mobilising a legacy app and creating a different “default” views: phone, tablet, desktop

Device Detection

Quick demo of device detection (phone/tablet) with JS and CFML

<cffunction name="getDeviceType" access="public" returntype="numeric" output="false"> <cfscript> var currentMobile = ""; </cfscript> ! <cfloop list="#application.config.tabletDetectionKeywords#" index="currentMobile"> <cfif findNoCase(currentMobile,CGI.HTTP_USER_AGENT)> <cfreturn 3> </cfif> </cfloop> ! <cfloop list="#application.config.mobileDetectionKeywords#" index="currentMobile"> <cfif findNoCase(currentMobile,CGI.HTTP_USER_AGENT)> <cfreturn 2> </cfif> </cfloop> ! <cfreturn 1> </cffunction>

<parameter> <name>mobileDetectionKeywords</name> <value>iphone,ipod,blackberry,mobile,series60,symbian,android,windows ce,docomo,ppc,pda,iemobile,windows phone,midp,bada</value>

</parameter> <parameter> <name>tabletDetectionKeywords</name> <value>ipad,playbook,tablet</value> </parameter>

A problematic device detection example

User complains they always end up on the mobile web app even though they’re using Firefox on a Mac - obviously client couldn’t reproduce it. !

Screen sharing session with the user all of a sudden makes them realise that he’s using a reallly old Mac (PowerPC architecture, not Intel). Guess what, his user agent contained “PPC”...

RWD with jQuery Mobile

Urban myth: jQuery Mobile and RWD don’t work together

!

!

They do - but maybe differently from what you’d expect after having done pure-RWD without any mobile UI framework.

Foundations of RWD

CSS Media Queries !

Fluid Grids !

Flexible Images and Media

Myth explanations

An early beta version of jQuery Mobile had “Media Query Helper Classes” that were removed. !

Instead: use CSS3 Media Queries !

It’s absolutely feasible to use RWD on the global design level.

RWD on global design level

Quick demo of using RWD to render different part of a jQuery Mobile UI depending on viewport sizing.

RWD-enabled components

All jQuery Mobile components are flexible re their width and can work in a responsive context.

!

Since jQM 1.3.x, some UI widgets explicitly support internal RWD-behaviour:

Grids, Reflow Tables & Column Toggles, Panels

RWD-enabled components

Demo of using some of the RWD-enabled jQuery Mobile components.

!

Device troubles…

Testing

Testing process

Multiple levels: !

- Desktop browser with fake user agent - Device simulator & On-device !

Valuable tools: !

- iOS SDK, Android SDK - Ghostlab - Adobe Edge Inspect

Catering for device specifics

Using proper data types on device forms

Using proper data types on device forms

Radio vs. Selects

Animations

Animations and Transitions

Transitions are seriously broken on Android 2/3 devices. Still in some instances on Android 4.x devices. !Good solution: switch them off! !

$( document ).bind( "mobileinit", function (){ var userAgent = navigator.userAgent.toUpperCase(); if (userAgent.indexOf('IPHONE') == -1 && userAgent.indexOf('IPOD') == -1) { $.mobile.defaultPageTransition = 'none'; } });

Other bits and pieces

Load your stuff on every page

Loading scripts

Every page should contain custom css, global scripts, headers, footers etc. !

Some overhead - but SOME user will be on a phone where JS is locked away or running a basic feature phone etc. !

Don’t assume that the user has the latest and greatest and give jQuery Mobile the option to provide an appropriate fallback.

Site switchers

Switching between mobile and …

If you switch me between the mobile, tablet and desktop version of a site, there is no parallel universe in which I wouldn’t want to end up on the equivalent page of where I’ve been before. !

Note: That can be surprisingly hard in a Single-Page-App.

Some quick & dirty code snippets

Labels

jQM automatically truncates your labels. !

Very cool and useful - not that great if you have a site with 15 languages, including Hebrew and Arabic and dynamic labelling. !

It can be switched off via CSS - but it depends on the version one’s on.

The power of grids

I seriously think grids and blocks are the most under-leveraged features in jQuery Mobile.

!<div class="content" data-role="content">!! <div class="ui-grid-a">!! <div class="ui-block-a">I'm the grid element content on the left</div>!! <div class="ui-block-b">I'm the grid element content on the right</div>!! </div>!!! <div class="ui-grid-a">!! <div class="ui-block-a"><div class="ui-bar ui-bar-e">I'm the grid element content on the left</div></div>!! <div class="ui-block-b"><div class="ui-bar ui-bar-b">I'm the grid element content on the right</div></div>!! </div>!!! <div class="ui-grid-a"> ! <div class="ui-block-a"><button type="submit" data-theme="c">Submit</button></div> ! <div class="ui-block-b"><button type="cancel" data-theme="e">Cancel</button></div> ! </div>!</div>!!

Photo credits

https://www.flickr.com/photos/dave-friedel/4605576616

https://www.flickr.com/photos/pictoquotes/11623812414/

https://www.flickr.com/photos/ell-r-brown/6982864935

https://www.flickr.com/photos/aai/6936657289

https://www.flickr.com/photos/konch/4974020028

https://www.flickr.com/photos/nnova/5447593986

https://www.flickr.com/photos/r36ariadne/6263911540

https://www.flickr.com/photos/jacqueline-w/56107224

https://www.flickr.com/photos/iw2nse/2787985066

https://www.flickr.com/photos/7317295@N04/7852528240

https://www.flickr.com/photos/library_mistress/136046502

!

Useful links

https://github.com/angular-widgets/angular-jqm

https://github.com/opitzconsulting/jquery-mobile-angular-adapter

http://simonguest.com/2013/04/08/jquery-mobile-and-angularjs-working-together/

Get in touch

Kai Koenig

Email: kai@ventego-creative.co.nz

www.ventego-creative.co.nz

Blog: www.bloginblack.de

Twitter: @AgentK