cf.Objective() 2014 session on jQuery Mobile

1. Real World Lessons
in jQuery Mobile
Kai Koenig
@AgentK

2. !
“I wish someone had told me that
beforehand”

4. 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

5. - 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

6. jQuery Mobile concepts

7. Basics

8. 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

9. Philosophy

10. jQuery Mobile
Cross-Mobile Platform (i.e. mobile operating
system)
!
Cross-Browser
!
Optimised for touch but also provides support
for mouse cursor

11. jQuery Mobile
1 .js file,1-many .css files and some images
!
Minified and/or Structure-only versions
!
Custom download packaging
!

12. 2 interesting and very different examples
http://c.dric.be
http://m.stanford.edu
!
!
!
Discuss!

13. Architecture and Data

14. What do you want to build?

15. 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.

16. Single-Page-App

17. Request-Response-Model

18. Architecture choices
Demo of the two different approaches with jQM
and CF here

19. Be aware though
If you only have a hammer in your toolbox, every
problem looks like a nail

20. 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)

21. Be aware EVEN MORE
Let’s get back to jQuery Mobile:
!
- Widgets
- Page Management
- History Management
- Event Management
!
What’s missing here?

22. 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.

23. Require and jQuery Mobile
Demo of using jQuery Mobile with RequireJS

24. Responsive and jQM

25. Device detection is hard

26. 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

27. Device Detection
Quick demo of device detection (phone/tablet)
with JS and CFML

28. <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>

29. 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”...

30. RWD with jQuery Mobile

31. 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.

32. Foundations of RWD
CSS Media Queries
!
Fluid Grids
!
Flexible Images and Media

33. 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.

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

35. 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

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

37. Device troubles…

38. Testing

39. Testing process
Multiple levels:
!
- Desktop browser with fake user agent
- Device simulator & On-device
!
Valuable tools:
!
- iOS SDK,Android SDK
- Ghostlab
- Adobe Edge Inspect

40. Catering for device specifics

41. Using proper data types on device forms

42. Using proper data types on device forms

43. Radio vs. Selects

46. Animations

47. 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';
}
});

48. Other bits and pieces

49. Load your stuff on every page

50. 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.

51. Site switchers

53. 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.

54. Some quick & dirty code snippets

55. 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.

56. 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>!
!

58. 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
!

59. 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/

60. Get in touch
Kai Koenig
Email: kai@ventego-creative.co.nz
www.ventego-creative.co.nz
Blog: www.bloginblack.de
Twitter: @AgentK