jQuery Mobile
Deep Dive
7 September 2013
Culver City, California USA
Saturday, September 7, 13
Google Maps
Full Throttle
• Learn the tips and tricks of the world’s
premier mapping app
• 21 September 2013
• Irvine, Cal...
Want more? Follow me for more tutorials
and source code.
@therockncoder
Saturday, September 7, 13
Source code for my tutorials hosted on
GitHub @
https://github.com/Rockncoder
Saturday, September 7, 13
Before We Begin
• This class will move fast
• The source code is yours to keep
• The slides are available for download
Sat...
What Are We Going To
Do?
We are going to learn about jQuery Mobile by examining a
working application.We aren’t going to d...
Coffee Coffee+
• jQuery Mobile
• Backbone
• Responsive Design
• Templates
Saturday, September 7, 13
jQuery &
jQuery Mobile
• jQuery 1.9.x
• jQuery Mobile 1.3.2
• released on July 19th
• jQuery Mobile 1.4 which will support...
Memory Management
Saturday, September 7, 13
Memory Management
Tips
• Globals are bad
• Use functions for information hiding
Saturday, September 7, 13
Globals are bad
• Try to use only one global variable
• Remember: JS objects can be modified at
runtime
• Use var app = app...
Information Hiding
• JS lacks classes or other information
• One alternative is to wrap code in
anonymous functions
Saturd...
Performance
Optimization
Saturday, September 7, 13
The fastest code is the
code which is never
run.
Saturday, September 7, 13
Performance
Optimization
• JavaScript
• jQuery
• HTML
Saturday, September 7, 13
JavaScript
• Define local variables
• Be careful with closures
• Accessing object properties and array items
is slower than...
jQuery
• Don’t use .live()
• Use $.mobile.activePage
• Use preventDefault()
• Cache selector
• Know when not to use jQuery...
HTML
• Copy HTML collections into JS arrays
• Avoid accessing the DOM
• Use CSS classes not styles
Saturday, September 7, ...
Templates
Saturday, September 7, 13
Templates
• Think of a template like a cookie cutter
• Fill it with data, and it produces HTML
• Templates can be used on ...
Templating Engines
• Underscore
• Handlebars
• Jade
• dust (LinkedIn)
• http://garann.github.io/template-chooser/
Saturday...
Handlebars
• Create a template in a script tag
• Compile template in JS
• Render template with data
Saturday, September 7,...
Looping
• Handlebars has a built helper named, each,
for looping
• else can be used with each for when no
data is returned...
Conditional
• The if helper conditionally renders a block
• else is available for falsy values
• unless inverses the logic...
Pre-compilation
• Precompile templates at application startup
for improved performance later
• Can also ship precompiled t...
Helpers
• Handlebars allows for the creation of JS
helper functions
• These handlers make it possible to extend
Handlebars...
MV* Frameworks
Saturday, September 7, 13
MV* Frameworks
• MV* Frameworks give an application
structure
• It is very easy to create spaghetti code in JS
• M = model...
MV* & jQuery Mobile
• jQuery Mobile and most frameworks don’t
get along well
• The main reason is routing. Both JQM and
MV...
URL Routing
• URL are an invaluable part of the internet
• Users are use to sharing them
• They provide an easy mechanism ...
Routing
• It is better for the MV* to handle routing
• To stop JQM from handling routing
•26 <script type="text/javascript...
MV* Frameworks
• Angular.js, from Google
• Ember.js, based on SproutCore
• Backbone.js,
• and many more
• http://todomvc.c...
Backbone.js
• A lightweight JS library which ads structure
to your client side code
• From the creator of Underscore
• Ver...
Small and Fast
• Ember.js = 56k minified
• Angular.js = 81kb minified
• http://jsperf.com/angular-vs-knockout-vs-
ember/173
...
The Nickel Tour
• Models
• Collections
• Views
• Routes
Saturday, September 7, 13
The Happy Path
• Use extend to create a “class”
• Use built in methods like initialize
• Once the “class” is defined, use n...
Models
• Backbone.Model.extend()
• defaults allows for the creation of default
values
Saturday, September 7, 13
Collections
• Backbone.Collection.extend()
• Use model to define the model of the
collection
• Use url to define a restful a...
Views
• Backbone.View.extend()
• Use the initialize method run handler code
which is executed once, like compiling
templat...
Routes
• Backbone.Router.extend()
• Normally only one route per app
• Backbone.history.Start() tells BB to begin
monitorin...
Unit Testing
Saturday, September 7, 13
Unit Testing
• Many unit testing frameworks are available
• QUnit, from the jQuery Team
• YUITest, fromYahoo
• Jasmine, fr...
Unit Testing Tips
• Be sure to test logic
• Write tests before fixing bugs
• Never stop running test
• Refactor the tests, ...
QUnit
• Probably the easiest one to learn
• Used to test all of the jQuery projects
Saturday, September 7, 13
Custom Attributes
Saturday, September 7, 13
Custom Attributes
• A custom attribute is a non-standard
attribute added to a tag to convey some
information
• HTML has al...
data-*
• The official way of creating custom
attributes is with data-
• Recommended is:
data-<company initials>-<attribute ...
getNamedItem()
• HTML, aka the DOM, includes the
getNamedItem() method
• Returns value of the attribute node with
the spec...
TheViewport
Saturday, September 7, 13
Meta tags
• meta tag is an element which is used to
provide structured metadata about a web
page
• They can be used to spe...
Meta Tag Attributes
• name, the name of the meta tag
• content, information for the reader
• http-equiv, character encodin...
Examples
<title>CC+</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-
scale=1,use...
Viewport
• A special meta tag used to provide
information about the device's display
•<meta name="viewport" content="width...
Viewport Parameters
• width, the width of the viewport in pixels
• initial-scale, the zoom level when the page
loads
• max...
Tips and Tricks
• There is no standard covering the viewport
• Apple probably has the best docs
• Type carefully, no error...
Responsive Design
Saturday, September 7, 13
Media Queries
• The workhorse of responsive design
• A media query is a media type and at least
one expression that limits...
Media Query by the
Piece
• The media query begins with @media
• then a media type, like screen, all, print,
braille, etc
•...
jQuery Mobile Features
• Grids, self sizing columns which dynamically
resize themselves when the size of the page
changes
...
Minification
Saturday, September 7, 13
Why?
Developers using other languages rarely think
of the size of their code. But client side
JavaScript is different. Min...
How to Minify
• By Hand
• Using an app
Saturday, September 7, 13
By Hand
Saturday, September 7, 13
Using an App
• packer, http://dean.edwards.name/packer/
• Microsoft Ajax Minifier, http://
ajaxmin.codeplex.com/
• YUI Comp...
In Practice
• Hand minification is fraught with danger -
code is hard to read and grows increasingly
fragile
• Using a web ...
Icons and Splash Pages
Saturday, September 7, 13
Icons
• Classic icon (Microsoft)
• Standardized
• Mobile icon (Apple)
Saturday, September 7, 13
Splash Page
• An Apple thing
• The splash page is cached on the user’s
device
• When the icon is click on the home page,
s...
HTML5 Offline App
Saturday, September 7, 13
How to Reach Me
• rockncoder@gmail.com
• http://therockncoder.blogspot.com/
• https://github.com/Rockncoder/ccplus
Saturda...
Questions
Saturday, September 7, 13
Upcoming SlideShare
Loading in...5
×

jQuery Mobile Deep Dive

1,985

Published on

jQuery Mobile Deep Dive shows you how to create single page web apps that look and behave like native ones. We use JavaScript and open source libraries like jQuery, underscore, and backbone. And explore advanced topics like unit testing and performance optimization.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,985
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
262
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

jQuery Mobile Deep Dive

  1. 1. jQuery Mobile Deep Dive 7 September 2013 Culver City, California USA Saturday, September 7, 13
  2. 2. Google Maps Full Throttle • Learn the tips and tricks of the world’s premier mapping app • 21 September 2013 • Irvine, California USA • http://bit.ly/156Mr5C Saturday, September 7, 13
  3. 3. Want more? Follow me for more tutorials and source code. @therockncoder Saturday, September 7, 13
  4. 4. Source code for my tutorials hosted on GitHub @ https://github.com/Rockncoder Saturday, September 7, 13
  5. 5. Before We Begin • This class will move fast • The source code is yours to keep • The slides are available for download Saturday, September 7, 13
  6. 6. What Are We Going To Do? We are going to learn about jQuery Mobile by examining a working application.We aren’t going to decompose each line of code, instead we will examine each major area of functionality. Saturday, September 7, 13
  7. 7. Coffee Coffee+ • jQuery Mobile • Backbone • Responsive Design • Templates Saturday, September 7, 13
  8. 8. jQuery & jQuery Mobile • jQuery 1.9.x • jQuery Mobile 1.3.2 • released on July 19th • jQuery Mobile 1.4 which will support jQuery 2.0, coming soon Saturday, September 7, 13
  9. 9. Memory Management Saturday, September 7, 13
  10. 10. Memory Management Tips • Globals are bad • Use functions for information hiding Saturday, September 7, 13
  11. 11. Globals are bad • Try to use only one global variable • Remember: JS objects can be modified at runtime • Use var app = app || {}; Saturday, September 7, 13
  12. 12. Information Hiding • JS lacks classes or other information • One alternative is to wrap code in anonymous functions Saturday, September 7, 13
  13. 13. Performance Optimization Saturday, September 7, 13
  14. 14. The fastest code is the code which is never run. Saturday, September 7, 13
  15. 15. Performance Optimization • JavaScript • jQuery • HTML Saturday, September 7, 13
  16. 16. JavaScript • Define local variables • Be careful with closures • Accessing object properties and array items is slower than variables • Avoid for-in loops Saturday, September 7, 13
  17. 17. jQuery • Don’t use .live() • Use $.mobile.activePage • Use preventDefault() • Cache selector • Know when not to use jQuery Saturday, September 7, 13
  18. 18. HTML • Copy HTML collections into JS arrays • Avoid accessing the DOM • Use CSS classes not styles Saturday, September 7, 13
  19. 19. Templates Saturday, September 7, 13
  20. 20. Templates • Think of a template like a cookie cutter • Fill it with data, and it produces HTML • Templates can be used on the server or on the client • There are many templating engines Saturday, September 7, 13
  21. 21. Templating Engines • Underscore • Handlebars • Jade • dust (LinkedIn) • http://garann.github.io/template-chooser/ Saturday, September 7, 13
  22. 22. Handlebars • Create a template in a script tag • Compile template in JS • Render template with data Saturday, September 7, 13
  23. 23. Looping • Handlebars has a built helper named, each, for looping • else can be used with each for when no data is returned • @index is the current loop index • @key is the current object Saturday, September 7, 13
  24. 24. Conditional • The if helper conditionally renders a block • else is available for falsy values • unless inverses the logic of the if Saturday, September 7, 13
  25. 25. Pre-compilation • Precompile templates at application startup for improved performance later • Can also ship precompiled templates using command line, node based tools Saturday, September 7, 13
  26. 26. Helpers • Handlebars allows for the creation of JS helper functions • These handlers make it possible to extend Handlebars functionality Saturday, September 7, 13
  27. 27. MV* Frameworks Saturday, September 7, 13
  28. 28. MV* Frameworks • MV* Frameworks give an application structure • It is very easy to create spaghetti code in JS • M = model • V = controller • * = something else, like routing Saturday, September 7, 13
  29. 29. MV* & jQuery Mobile • jQuery Mobile and most frameworks don’t get along well • The main reason is routing. Both JQM and MV* want to control the routes Saturday, September 7, 13
  30. 30. URL Routing • URL are an invaluable part of the internet • Users are use to sharing them • They provide an easy mechanism to save state in an otherwise stateless environment Saturday, September 7, 13
  31. 31. Routing • It is better for the MV* to handle routing • To stop JQM from handling routing •26 <script type="text/javascript"> 27 /* Prevent jQM from handling <a> clicks and # changes */ 28 /* IMPORTANT: This must be hooked before loading jQM */ 29 $(document).on("mobileinit", function () { 30 $.mobile.linkBindingEnabled = false; 31 $.mobile.hashListeningEnabled = false; 32 }); 33 </script> 34 <script src="js/libs/jquery.mobile-1.3.2.min.js" type="text/javascript"></script> Saturday, September 7, 13
  32. 32. MV* Frameworks • Angular.js, from Google • Ember.js, based on SproutCore • Backbone.js, • and many more • http://todomvc.com/ Saturday, September 7, 13
  33. 33. Backbone.js • A lightweight JS library which ads structure to your client side code • From the creator of Underscore • Very small - 6.3k minified and gzipped Saturday, September 7, 13
  34. 34. Small and Fast • Ember.js = 56k minified • Angular.js = 81kb minified • http://jsperf.com/angular-vs-knockout-vs- ember/173 Saturday, September 7, 13
  35. 35. The Nickel Tour • Models • Collections • Views • Routes Saturday, September 7, 13
  36. 36. The Happy Path • Use extend to create a “class” • Use built in methods like initialize • Once the “class” is defined, use new to instantiate an object • “Classes” begins with upper case • Objects begins with lower case Saturday, September 7, 13
  37. 37. Models • Backbone.Model.extend() • defaults allows for the creation of default values Saturday, September 7, 13
  38. 38. Collections • Backbone.Collection.extend() • Use model to define the model of the collection • Use url to define a restful api Saturday, September 7, 13
  39. 39. Views • Backbone.View.extend() • Use the initialize method run handler code which is executed once, like compiling templates • Use the render method to display the view Saturday, September 7, 13
  40. 40. Routes • Backbone.Router.extend() • Normally only one route per app • Backbone.history.Start() tells BB to begin monitoring the URL Saturday, September 7, 13
  41. 41. Unit Testing Saturday, September 7, 13
  42. 42. Unit Testing • Many unit testing frameworks are available • QUnit, from the jQuery Team • YUITest, fromYahoo • Jasmine, from Pivotal Labs • Mocha Saturday, September 7, 13
  43. 43. Unit Testing Tips • Be sure to test logic • Write tests before fixing bugs • Never stop running test • Refactor the tests, when your refactor the code Saturday, September 7, 13
  44. 44. QUnit • Probably the easiest one to learn • Used to test all of the jQuery projects Saturday, September 7, 13
  45. 45. Custom Attributes Saturday, September 7, 13
  46. 46. Custom Attributes • A custom attribute is a non-standard attribute added to a tag to convey some information • HTML has always supported custom attributes • HTML5 makes the support explicit instead of implicit Saturday, September 7, 13
  47. 47. data-* • The official way of creating custom attributes is with data- • Recommended is: data-<company initials>-<attribute name> • example: data-rnc-listingId Saturday, September 7, 13
  48. 48. getNamedItem() • HTML, aka the DOM, includes the getNamedItem() method • Returns value of the attribute node with the specified name •/* set a click event on each row */ $(".listing").off().on("click", function () { app.CurrentListing = this.attributes.getNamedItem("data-rnc-listingid").value; }); Saturday, September 7, 13
  49. 49. TheViewport Saturday, September 7, 13
  50. 50. Meta tags • meta tag is an element which is used to provide structured metadata about a web page • They can be used to specify page description, keywords, and instructions • Always in the head section • 5 defined attributes Saturday, September 7, 13
  51. 51. Meta Tag Attributes • name, the name of the meta tag • content, information for the reader • http-equiv, character encoding, auto refresh • scheme, specifies scheme to interpret content (not support in HTML5) • charset, added in HTML5 Saturday, September 7, 13
  52. 52. Examples <title>CC+</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial- scale=1,user-scalable=no, maximum-scale=1"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="robots" content="noindex, nofollow"> Saturday, September 7, 13
  53. 53. Viewport • A special meta tag used to provide information about the device's display •<meta name="viewport" content="width=device- width,initial-scale=1,user-scalable=no,maximum-scale=1"/> Saturday, September 7, 13
  54. 54. Viewport Parameters • width, the width of the viewport in pixels • initial-scale, the zoom level when the page loads • maximum-scale, the max zoom level • minimum-scale, the min zoom level • user-scalable, if the user can change zoom Saturday, September 7, 13
  55. 55. Tips and Tricks • There is no standard covering the viewport • Apple probably has the best docs • Type carefully, no error checking on viewport • Use the viewport standardize your app’s screen size across different devices Saturday, September 7, 13
  56. 56. Responsive Design Saturday, September 7, 13
  57. 57. Media Queries • The workhorse of responsive design • A media query is a media type and at least one expression that limits the style sheets' scope @media screen and (min-width: 480px) and (orientation:portrait) { } Saturday, September 7, 13
  58. 58. Media Query by the Piece • The media query begins with @media • then a media type, like screen, all, print, braille, etc • You can add logical operators like: and, not, and only • There is also the comma separated list which behaves like an or operator Saturday, September 7, 13
  59. 59. jQuery Mobile Features • Grids, self sizing columns which dynamically resize themselves when the size of the page changes • Tables, added with version 1.3.0 • Panels, ala Facebook, a panel, usually options, reveals itself when an icon is clicked Saturday, September 7, 13
  60. 60. Minification Saturday, September 7, 13
  61. 61. Why? Developers using other languages rarely think of the size of their code. But client side JavaScript is different. Minifying JavaScript can dramatically reduce its size and radically reduce page load time. Saturday, September 7, 13
  62. 62. How to Minify • By Hand • Using an app Saturday, September 7, 13
  63. 63. By Hand Saturday, September 7, 13
  64. 64. Using an App • packer, http://dean.edwards.name/packer/ • Microsoft Ajax Minifier, http:// ajaxmin.codeplex.com/ • YUI Compressor, http://yui.github.io/ yuicompressor/ • Google Closure Compiler, http://closure- compiler.appspot.com/home Saturday, September 7, 13
  65. 65. In Practice • Hand minification is fraught with danger - code is hard to read and grows increasingly fragile • Using a web site is good for an example but not in practice, too much labor • Usually done via a command line tool, during build or on page request Saturday, September 7, 13
  66. 66. Icons and Splash Pages Saturday, September 7, 13
  67. 67. Icons • Classic icon (Microsoft) • Standardized • Mobile icon (Apple) Saturday, September 7, 13
  68. 68. Splash Page • An Apple thing • The splash page is cached on the user’s device • When the icon is click on the home page, splash page is shown while the app is loaded Saturday, September 7, 13
  69. 69. HTML5 Offline App Saturday, September 7, 13
  70. 70. How to Reach Me • rockncoder@gmail.com • http://therockncoder.blogspot.com/ • https://github.com/Rockncoder/ccplus Saturday, September 7, 13
  71. 71. Questions Saturday, September 7, 13
  1. A particular slide catching your eye?

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

×