Real World Lessons in jQuery Mobile


Published on

cf.Objective() 2014 session on jQuery Mobile

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Real World Lessons in jQuery Mobile

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

    Clipping is a handy way to collect important slides you want to go back to later.