jQuery Mobile Deep Dive

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, California USA
• http://bit.ly/156Mr5C

Want more? Follow me for more tutorials
and source code.
@therockncoder

Source code for my tutorials hosted on
GitHub @
https://github.com/Rockncoder

Before We Begin
• This class will move fast
• The source code is yours to keep
• The slides are available for download

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.

Coffee Coffee+
• jQuery Mobile
• Backbone
• Responsive Design
• Templates

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

Memory Management

Memory Management
Tips
• Globals are bad
• Use functions for information hiding

Globals are bad
• Try to use only one global variable
• Remember: JS objects can be modiﬁed at
runtime
• Use var app = app || {};

Information Hiding
• JS lacks classes or other information
• One alternative is to wrap code in
anonymous functions

Performance
Optimization

The fastest code is the
code which is never
run.

Performance
Optimization
• JavaScript
• jQuery
• HTML

JavaScript
• Deﬁne local variables
• Be careful with closures
• Accessing object properties and array items
is slower than variables
• Avoid for-in loops

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

Templates

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

Templating Engines
• Underscore
• Handlebars
• Jade
• dust (LinkedIn)
• http://garann.github.io/template-chooser/

Handlebars
• Create a template in a script tag
• Compile template in JS
• Render template with data

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

Conditional
• The if helper conditionally renders a block
• else is available for falsy values
• unless inverses the logic of the if

Pre-compilation
• Precompile templates at application startup
for improved performance later
• Can also ship precompiled templates using
command line, node based tools

Helpers
• Handlebars allows for the creation of JS
helper functions
• These handlers make it possible to extend
Handlebars functionality

MV* Frameworks

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

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

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

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>

MV* Frameworks
• Angular.js, from Google
• Ember.js, based on SproutCore
• Backbone.js,
• and many more
• http://todomvc.com/

Backbone.js
• A lightweight JS library which ads structure
to your client side code
• From the creator of Underscore
• Very small - 6.3k miniﬁed and gzipped

Small and Fast
• Ember.js = 56k miniﬁed
• Angular.js = 81kb miniﬁed
• http://jsperf.com/angular-vs-knockout-vs-
ember/173

The Nickel Tour
• Models
• Collections
• Views
• Routes

The Happy Path
• Use extend to create a “class”
• Use built in methods like initialize
• Once the “class” is deﬁned, use new to
instantiate an object
• “Classes” begins with upper case
• Objects begins with lower case

Models
• Backbone.Model.extend()
• defaults allows for the creation of default
values

Collections
• Backbone.Collection.extend()
• Use model to deﬁne the model of the
collection
• Use url to deﬁne a restful api

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

Routes
• Backbone.Router.extend()
• Normally only one route per app
• Backbone.history.Start() tells BB to begin
monitoring the URL

Unit Testing

Unit Testing
• Many unit testing frameworks are available
• QUnit, from the jQuery Team
• YUITest, fromYahoo
• Jasmine, from Pivotal Labs
• Mocha

Unit Testing Tips
• Be sure to test logic
• Write tests before ﬁxing bugs
• Never stop running test
• Refactor the tests, when your refactor the
code

QUnit
• Probably the easiest one to learn
• Used to test all of the jQuery projects

Custom Attributes

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

data-*
• The ofﬁcial way of creating custom
attributes is with data-
• Recommended is:
data-<company initials>-<attribute name>
• example: data-rnc-listingId

getNamedItem()
• HTML, aka the DOM, includes the
getNamedItem() method
• Returns value of the attribute node with
the speciﬁed name
•/* set a click event on each row */
$(".listing").off().on("click", function () {
app.CurrentListing = this.attributes.getNamedItem("data-rnc-listingid").value;
});

TheViewport

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 deﬁned attributes

Meta Tag Attributes
• name, the name of the meta tag
• content, information for the reader
• http-equiv, character encoding, auto refresh
• scheme, speciﬁes scheme to interpret
content (not support in HTML5)
• charset, added in HTML5

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">

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"/>

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

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

Responsive Design

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)
{
}

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

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

Miniﬁcation

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.

How to Minify
• By Hand
• Using an app

By Hand

Using an App
• packer, http://dean.edwards.name/packer/
• Microsoft Ajax Miniﬁer, http://
ajaxmin.codeplex.com/
• YUI Compressor, http://yui.github.io/
yuicompressor/
• Google Closure Compiler, http://closure-
compiler.appspot.com/home

In Practice
• Hand miniﬁcation 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

Icons and Splash Pages

Icons
• Classic icon (Microsoft)
• Standardized
• Mobile icon (Apple)

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

HTML5 Ofﬂine App

How to Reach Me
• rockncoder@gmail.com
• http://therockncoder.blogspot.com/
• https://github.com/Rockncoder/ccplus

Questions

jQuery Mobile Deep Dive

More Related Content

jQuery Mobile Deep Dive