jQuery Mobile Jump Start


Published on

This 6 hour, hands-on training class introduces you and teaches you intermediate to advanced mobile web development using jQuery Mobile. We get you up and running with this popular JavaScript framework for creating mobile apps and mobile optimized web sites! In this six hour class, you will learn how to develop client side user interfaces for smart phones and tablets.

Published in: Technology
  • 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

jQuery Mobile Jump Start

  1. 1. jQuery MobileJump StartTroy Miles aka @therockncoderSaturday, June 15, 13
  2. 2. Want more? Follow me for more tutorialsand source code.@therockncoderSaturday, June 15, 13
  3. 3. Check out my videos:www.youtube.com/rockncoderSaturday, June 15, 13
  4. 4. Source code for my tutorials hosted onGitHub @https://github.com/RockncoderSaturday, June 15, 13
  5. 5. Before We Begin• This class will move fast• Don’t worry if you don’t complete anexercise• The exercises and solutions are availablefor download• All slides are available for downloadSaturday, June 15, 13
  6. 6. What Are Going ToDo?We are going to learn about jQuery Mobile by examining aworking application.We aren’t going to decompose eachline of code, instead we will examine each major area offunctionality.Saturday, June 15, 13
  7. 7. Coffee+Coffee• Listview• Location/Maps• Ajax• TemplatesSaturday, June 15, 13
  8. 8. Today’s Agenda• 0830-0900 Setup• 0900-0930 HTML Overview• 0930-1000 JavaScript Overview• 1015-1030 Morning Break• 1000-1030 Ajax pt. 1• 1045-1115 Ajax pt. 2Saturday, June 15, 13
  9. 9. Today’s Agenda• 1115-1145 Listviews• 1145-1215 Templates• 1215-1245 Lunch• 1245-1345 Location & Maps• 1400-1445 Responsive Design• 1445-1515 Media & ChartsSaturday, June 15, 13
  10. 10. “You have to learn to fakethe funk before you canbegin to make the funk.”Saturday, June 15, 13
  11. 11. HTML5 Overview• Fast Facts• Best Practices• Exercise - Creating a semantic SPA• SummarySaturday, June 15, 13
  12. 12. Fast Facts• HTML5 not official but in wide use• Well supported by smart phones: iPhone,Android, Blackberry, and WP8• W3C analyzed millions of web pages todecide on new semantic tags• SPA - single page applicationSaturday, June 15, 13
  13. 13. Best Practices• Use semantic tags for clarity• Place multiple pages together for speed• Use page transitions for a better UXSaturday, June 15, 13
  14. 14. Exercise #1Semantic SPA• Start with the exercise folder• Add a second JQM page• Use transitions to smooth page changeSaturday, June 15, 13
  15. 15. Summary• The new semantic tags in HTML5 increaseclarity• jQuery Mobile includes attributes toimprove app look and feelSaturday, June 15, 13
  16. 16. “Java is to JavaScript asCar is to Carpet.”Saturday, June 15, 13
  17. 17. JavaScript Overview• Fast Facts• The Power Trio• Events• Best Practices• Exercise - Create page code• SummarySaturday, June 15, 13
  18. 18. Fast Facts• Created by Brendan Eich of Netscape• Originally named LiveScript, but renamedfor marketing purposes• Based on Self and Scheme languages, butnot CSaturday, June 15, 13
  19. 19. The Power Trio• Objects• Functions• ClosuresSaturday, June 15, 13
  20. 20. Objects• Are associative arrays or dictionariesconsisting of key/value pairs• The key can be ANY string• Can be modified at run-time• No difference between dot and bracketnotationsSaturday, June 15, 13
  21. 21. Functions• Are first-class entities• They are objects themselves and can haveproperties and methods• The provide the primary method ofinformation hiding• Can be nested and passed as parametersSaturday, June 15, 13
  22. 22. Closures• A very tough concept to grasp• A closure is a special kind of object thatcombines two things: a function, and theenvironment in which that function wascreated.Saturday, June 15, 13
  23. 23. Events• A loosely couple way of componentcommunication• Receive or handle events• Transmit or trigger events• In jQuery .on() and .off() are preferredSaturday, June 15, 13
  24. 24. Best Practices• Minimize the use of global memory• Wrap code in functions to protect it• Load JS files last for speed*• Use events to avoid tight couplingSaturday, June 15, 13
  25. 25. Exercise #2Create Page Code• Start from the exercise #2 code• Create code to hook events for both page1 and 2Saturday, June 15, 13
  26. 26. Summary• JavaScript in the browser is a very dirtyenvironment• Apps must be pro-active in order tofunction well• Always write your code in a structured waySaturday, June 15, 13
  27. 27. Why not jQuery 2.0?• jQuery 2.0 is available and is smaller andfaster since it no longer supports IEversions 6, 7, and 8. Yet we use version 1.91in the app, why? The jQuery Mobile teamhas not yet upgraded JQM to support it.Saturday, June 15, 13
  28. 28. Ajax pt. 1• Fast Facts• jQuery ajax()• Promise• Data Formats• Exercise - Getting data from the server• SummarySaturday, June 15, 13
  29. 29. Fast Facts• The web designed to load complete HTMLpages• Microsoft created XMLHTTP object in 1998• Mozilla based their XMLHttpRequest objecton it in 2000• The XMLHttpRequest object became adefacto standardSaturday, June 15, 13
  30. 30. .ajax()• Before the introduction of Prototype &jQuery in 2006 communication with theserver was browser specific• Performs an async HTTP request• .ajax(url, [settings])Saturday, June 15, 13
  31. 31. .promise()• Returns a Promise object that is resolvedonce all actions complete• Considered easier to ready than callbacksSaturday, June 15, 13
  32. 32. Data Formats• There two standard data formats:• JSON - JavaScript Object Notation• XML - eXtensible Markup Language• JSON is the lighter of the twoSaturday, June 15, 13
  33. 33. JSON• Created by Douglas Crockford in 2001• JSON.stringify to serialize• JSON.parse to deserialize• Officially only double quotes supportedSaturday, June 15, 13
  34. 34. Best Practices• Always be prepared for failure• Prefer chunky over chatty• Prefer JSON over XML• Use double quotes in JSONSaturday, June 15, 13
  35. 35. Exercise #3Getting Data• Starting from exercise #3• Make a call toYP API• Use an alert or console.log to displayresultsSaturday, June 15, 13
  36. 36. Summary• Its ability to do cross-browser Ajax is oneof jQuery’s most popular features• Ajax data to/from RESTful web services isvery popularSaturday, June 15, 13
  37. 37. Ajax pt. 2• HTTP Traffic Watching• Chrome & Fiddler• Exercise - Paging, Getting more data• SummarySaturday, June 15, 13
  38. 38. HTTP Traffic Watching• Issues with Ajax often cause bugs• Their async nature makes can make fixingthese bugs challenging• There are tools to helpSaturday, June 15, 13
  39. 39. Chrome & Fiddler• Chrome includes tools to watch networktraffic (lightweight)• Fiddler a free tool from Telerik is alsoavailable (super)• Fiddler is only available for the PCSaturday, June 15, 13
  40. 40. Exercise #4Getting more data• Starting from exercise #4• Make more calls to theYP API whichrequest more data• Again use alert or console.log to displayresultsSaturday, June 15, 13
  41. 41. Summary• Debugging Ajax issues can be tough butthere are tools to help• Often the amount of data available exceedsthat which can be easily handledSaturday, June 15, 13
  42. 42. Listviews• Fast Facts• Best Practices• Vertical Scrolling• Exercise - Creating list from data• SummarySaturday, June 15, 13
  43. 43. Fast Facts• Listviews are coded as either HTMLunordered (ul) or ordered (ol) lists• Can be used as menus, settings or simplydisplay a list of itemsSaturday, June 15, 13
  44. 44. Vertical Scrolling• JQM supports vertical scrolling as does anyother web site• Can also fix the position of the header andfooterSaturday, June 15, 13
  45. 45. Exercise #5Creating a Listview• Start with exercise #5• Finish the listview generation code• Remember to call the refresh methodSaturday, June 15, 13
  46. 46. Summary• JQM out of the box supports verticalscrolling• The end result is less than app-like howeverSaturday, June 15, 13
  47. 47. iScroll• Fast Facts• Best Practices• Exercise - Implement pull to refresh• SummarySaturday, June 15, 13
  48. 48. Fast Facts• iScroll4 created by Matteo Spinelli• Source code is MIT Licensed• Works by using CSS3 transformation• Number of scroll regions only limited bymemorySaturday, June 15, 13
  49. 49. Best Practices• Release no longer needed iScrolls with thedestroy() methodSaturday, June 15, 13
  50. 50. Exercise #6Smooth Scrolling• Start with exercise #6• Finished the smooth scrolling method• If you have trouble, look at the working“cc” appSaturday, June 15, 13
  51. 51. Summary• Smooth scrolling improves both UI and UX• It is relatively easy to replace traditionalHTML scrollingSaturday, June 15, 13
  52. 52. Templates• Fast Facts• Handlebars• Best Practices• Exercise - Rewrite the code to usetemplates• SummarySaturday, June 15, 13
  53. 53. Fast Facts• Mixing HTML with JavaScript violatesseparation of concerns• Templating engines allow for the inclusionof HTML which can be modified easily• HTML by definition does not operate onunknown tagsSaturday, June 15, 13
  54. 54. Handlebars.js• There are many of templating engines• Handlebars.js works on both the client andthe server• The project is maintain by the same teamas Ember.jsSaturday, June 15, 13
  55. 55. Best Practices• HTML is content• CSS is presentation• JavaScript is behavior• Separation of Concerns (SOC) states notto mix any of the threeSaturday, June 15, 13
  56. 56. Exercise #7Using Templates• Start from exercise #7• Replace the use of JS strings with atemplateSaturday, June 15, 13
  57. 57. Summary• Using templates keeps us from violatingseparation of concerns• The handlebars templates are easy for bothengineers and designers to work withSaturday, June 15, 13
  58. 58. Geolocation• Fast Facts• The Geolocation Object• Best Practices• Exercise - Get location• SummarySaturday, June 15, 13
  59. 59. Fast Facts• Not actually part of HTML5• User must grant web site access to thegeolocation data• Can be a significant drain on batteries• Can take a significant amount of timebefore location async returnSaturday, June 15, 13
  60. 60. The Geolocation Object• Part of the navigator object, which has noofficial standard• Three methods: getCurrentPosition(),watchPosition(), clearWatch()Saturday, June 15, 13
  61. 61. Best Practices• People have just concerns about locationprivacy• Provide an alternative if possible• Gracefully fail it not able to continue• Remember to clear unneededwatchPositionsSaturday, June 15, 13
  62. 62. Exercise #8Getting Location• Starting with exercise #8• Use a console.log to display the currentlatitude and longitudeSaturday, June 15, 13
  63. 63. Summary• Geolocation is support by most currentbrowsers, mobile and desktop• Power used Geolocation can drain powerand tax CPUSaturday, June 15, 13
  64. 64. Maps• Maps (Google Maps)• Exercise - Display our current location• Annotating Maps• Exercise - Displaying cafe location• SummarySaturday, June 15, 13
  65. 65. Google Maps• There are many publicly available mapproviders• Google was chosen because of itsaccuracy, simplicity, and cost (free)• To use simply include a file, specify a div,and call the draw map codeSaturday, June 15, 13
  66. 66. Exercise #9Displaying a Map• Start with exercise #9• The Maps include file is present• The map div is displayed on the page• Write the code to make the map appearSaturday, June 15, 13
  67. 67. Map Annotation• Markers identify locations on the map• You can use Google’s markers or your own• Markers can have click eventsSaturday, June 15, 13
  68. 68. Exercise #10Annotating a Map• Start with exercise #10• Place a maker on the map at:• latitude = 33.8226203918457• longitude= -118.331848144531Saturday, June 15, 13
  69. 69. Summary• Most users expect to see a map whereverlocation information is displayed• Google Maps is the most popular mapprovider (75% of web sites)Saturday, June 15, 13
  70. 70. Responsive Design• Fast Facts• Phone vs Tablet• Grids, Divs, and Tables• Exercise - Make display responsive• SummarySaturday, June 15, 13
  71. 71. Fast Facts• Responsive design means supportingmultiple device resolutions from a singleapplication• JQM added the Grid object to supportresponsive design• JQM 1.3.0 added tablesSaturday, June 15, 13
  72. 72. Best Practices• Be careful of one size fits all solutions• The needs of your mobile user maybedifferent than those on desktop• Always keep bandwidth restrictions in mindSaturday, June 15, 13
  73. 73. Exercise #11Making a Responsive Design• Start with exercise #11• Adjust the values of the media queries tosee how the app adjustSaturday, June 15, 13
  74. 74. Summary• Responsive Design is difficult and must bethoroughly planned• A solution for one web site will notnecessarily work for anotherSaturday, June 15, 13
  75. 75. Media• Fast Facts• Taking a picture (yes, from a mobilebrowser)• Exercise - Upload a picture to a server• SummarySaturday, June 15, 13
  76. 76. Fast Facts• Modern smart phones treat the inputtype=”file” as the camera• Can take picture or video or choose fromphoto album• The real work is done on the serverSaturday, June 15, 13
  77. 77. Taking and Uploading aPicture• Must turn off JQM’s Ajax with data-ajax=”false”• Use a input type=file with form post withenctype=”multipart/form-data”Saturday, June 15, 13
  78. 78. Exercise #12Uploading a Picture• Start with exercise #12• Complete form tag for upload• You will not actually be able to submit thephoto since that requires a serverSaturday, June 15, 13
  79. 79. Summary• Many mobile browser support photoupload, but not all• Can upload photo and video but keep inmind how much memory is required• Can also choose from photos in the user’salbumSaturday, June 15, 13
  80. 80. Charts• Fast Facts• jqPlots• Exercise - Create a chart from hours ofoperation• SummarySaturday, June 15, 13
  81. 81. Fast Facts• Humans understand visual faster thanwritten• Charts are a standard way to rendernumeric data• There are lots of charting solutions for thewebSaturday, June 15, 13
  82. 82. jqPlot• An open source project by Chris Leonello• A jQuery widget• Supports its own plug-in• Rendered completely on the clientSaturday, June 15, 13
  83. 83. Best Practices• Charts are computationally expensive torender• It is possible to render charts dynamically,but not recommendedSaturday, June 15, 13
  84. 84. Exercise #13Charting Data• Start from exercise #13• Implement bar chart to display hours ofoperation of coffee shopsSaturday, June 15, 13
  85. 85. Summary• jqPlot is free and easy use charting solutionSaturday, June 15, 13
  86. 86. Links• jquerymobile.com• jquery.com• cubiq.org/iscroll-4• jqplot.com• http://handlebarsjs.com/• callbackhell.com• garann.github.io/template-chooser/Saturday, June 15, 13
  87. 87. My Links• @therockncoder• https://github.com/Rockncoder• http://youtube.com/rockncoder• http://slideshare.net/rockncoderSaturday, June 15, 13
  88. 88. Course Summary• When in doubt follow best practices• Build a Coffee+Coffee app of your own• Still lots we haven’t coveredSaturday, June 15, 13
  89. 89. jQuery Mobile Advance• MV* Frameworks• Responsive Design• Deep Templating• Memory Management• Unit Testing• Nag Phillip until he schedules it!Saturday, June 15, 13