real world lessons in jquery mobile
DESCRIPTION
cf.Objective() 2014 session on jQuery MobileTRANSCRIPT
![Page 1: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/1.jpg)
Real World Lessons in jQuery Mobile
Kai Koenig @AgentK
![Page 2: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/2.jpg)
!
“I wish someone had told me that beforehand”
![Page 3: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/3.jpg)
![Page 4: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/4.jpg)
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
![Page 5: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/5.jpg)
- 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
![Page 6: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/6.jpg)
jQuery Mobile concepts
![Page 7: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/7.jpg)
Basics
![Page 8: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/8.jpg)
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
![Page 9: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/9.jpg)
Philosophy
![Page 10: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/10.jpg)
jQuery Mobile
Cross-Mobile Platform (i.e. mobile operating system)
!
Cross-Browser
!
Optimised for touch but also provides support for mouse cursor
![Page 11: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/11.jpg)
jQuery Mobile
1 .js file,1-many .css files and some images
!
Minified and/or Structure-only versions
!
Custom download packaging
!
![Page 12: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/12.jpg)
2 interesting and very different examples
http://c.dric.be
http://m.stanford.edu
!
!
!
Discuss!
![Page 13: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/13.jpg)
Architecture and Data
![Page 14: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/14.jpg)
What do you want to build?
![Page 15: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/15.jpg)
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.
![Page 16: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/16.jpg)
Single-Page-App
![Page 17: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/17.jpg)
Request-Response-Model
![Page 18: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/18.jpg)
Architecture choices
Demo of the two different approaches with jQM and CF here
![Page 19: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/19.jpg)
Be aware though
If you only have a hammer in your toolbox, every problem looks like a nail
![Page 20: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/20.jpg)
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)
![Page 21: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/21.jpg)
Be aware EVEN MORE
Let’s get back to jQuery Mobile: !
- Widgets - Page Management - History Management - Event Management !
What’s missing here?
![Page 22: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/22.jpg)
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.
![Page 23: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/23.jpg)
Require and jQuery Mobile
Demo of using jQuery Mobile with RequireJS
![Page 24: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/24.jpg)
Responsive and jQM
![Page 25: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/25.jpg)
Device detection is hard
![Page 26: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/26.jpg)
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
![Page 27: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/27.jpg)
Device Detection
Quick demo of device detection (phone/tablet) with JS and CFML
![Page 28: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/28.jpg)
<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>
![Page 29: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/29.jpg)
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”...
![Page 30: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/30.jpg)
RWD with jQuery Mobile
![Page 31: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/31.jpg)
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.
![Page 32: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/32.jpg)
Foundations of RWD
CSS Media Queries !
Fluid Grids !
Flexible Images and Media
![Page 33: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/33.jpg)
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.
![Page 34: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/34.jpg)
RWD on global design level
Quick demo of using RWD to render different part of a jQuery Mobile UI depending on viewport sizing.
![Page 35: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/35.jpg)
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
![Page 36: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/36.jpg)
RWD-enabled components
Demo of using some of the RWD-enabled jQuery Mobile components.
!
![Page 37: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/37.jpg)
Device troubles…
![Page 38: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/38.jpg)
Testing
![Page 39: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/39.jpg)
Testing process
Multiple levels: !
- Desktop browser with fake user agent - Device simulator & On-device !
Valuable tools: !
- iOS SDK, Android SDK - Ghostlab - Adobe Edge Inspect
![Page 40: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/40.jpg)
Catering for device specifics
![Page 41: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/41.jpg)
Using proper data types on device forms
![Page 42: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/42.jpg)
Using proper data types on device forms
![Page 43: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/43.jpg)
Radio vs. Selects
![Page 44: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/44.jpg)
![Page 45: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/45.jpg)
![Page 46: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/46.jpg)
Animations
![Page 47: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/47.jpg)
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'; } });
![Page 48: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/48.jpg)
Other bits and pieces
![Page 49: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/49.jpg)
Load your stuff on every page
![Page 50: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/50.jpg)
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.
![Page 51: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/51.jpg)
Site switchers
![Page 52: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/52.jpg)
![Page 53: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/53.jpg)
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.
![Page 54: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/54.jpg)
Some quick & dirty code snippets
![Page 55: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/55.jpg)
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.
![Page 56: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/56.jpg)
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>!!
![Page 57: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/57.jpg)
![Page 58: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/58.jpg)
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
!
![Page 59: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/59.jpg)
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/
![Page 60: Real World Lessons in jQuery Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c71d9e4a79595e4e8b45c4/html5/thumbnails/60.jpg)
Get in touch
Kai Koenig
Email: [email protected]
www.ventego-creative.co.nz
Blog: www.bloginblack.de
Twitter: @AgentK