SlideShare a Scribd company logo
1 of 71
Download to read offline
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
Saturday, September 7, 13
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
Saturday, September 7, 13
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
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
jQuery 2.0, coming soon
Saturday, September 7, 13
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 || {};
Saturday, September 7, 13
Information Hiding
• JS lacks classes or other information
• One alternative is to wrap code in
anonymous functions
Saturday, September 7, 13
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 variables
• Avoid for-in loops
Saturday, September 7, 13
jQuery
• Don’t use .live()
• Use $.mobile.activePage
• Use preventDefault()
• Cache selector
• Know when not to use jQuery
Saturday, September 7, 13
HTML
• Copy HTML collections into JS arrays
• Avoid accessing the DOM
• Use CSS classes not styles
Saturday, September 7, 13
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 the server or on
the client
• There are many templating engines
Saturday, September 7, 13
Templating Engines
• Underscore
• Handlebars
• Jade
• dust (LinkedIn)
• http://garann.github.io/template-chooser/
Saturday, September 7, 13
Handlebars
• Create a template in a script tag
• Compile template in JS
• Render template with data
Saturday, September 7, 13
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
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
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
Helpers
• Handlebars allows for the creation of JS
helper functions
• These handlers make it possible to extend
Handlebars functionality
Saturday, September 7, 13
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
• V = controller
• * = something else, like routing
Saturday, September 7, 13
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
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
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
MV* Frameworks
• Angular.js, from Google
• Ember.js, based on SproutCore
• Backbone.js,
• and many more
• http://todomvc.com/
Saturday, September 7, 13
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
Small and Fast
• Ember.js = 56k minified
• Angular.js = 81kb minified
• http://jsperf.com/angular-vs-knockout-vs-
ember/173
Saturday, September 7, 13
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 new to
instantiate an object
• “Classes” begins with upper case
• Objects begins with lower case
Saturday, September 7, 13
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 api
Saturday, September 7, 13
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
Routes
• Backbone.Router.extend()
• Normally only one route per app
• Backbone.history.Start() tells BB to begin
monitoring the URL
Saturday, September 7, 13
Unit Testing
Saturday, September 7, 13
Unit Testing
• Many unit testing frameworks are available
• QUnit, from the jQuery Team
• YUITest, fromYahoo
• Jasmine, from Pivotal Labs
• Mocha
Saturday, September 7, 13
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
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 always supported custom
attributes
• HTML5 makes the support explicit instead
of implicit
Saturday, September 7, 13
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
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
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 specify page
description, keywords, and instructions
• Always in the head section
• 5 defined attributes
Saturday, September 7, 13
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
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
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
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
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
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 the style sheets'
scope
@media screen and (min-width: 480px) and (orientation:portrait)
{
}
Saturday, September 7, 13
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
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
Minification
Saturday, September 7, 13
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
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 Compressor, http://yui.github.io/
yuicompressor/
• Google Closure Compiler, http://closure-
compiler.appspot.com/home
Saturday, September 7, 13
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
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,
splash page is shown while the app is
loaded
Saturday, September 7, 13
HTML5 Offline App
Saturday, September 7, 13
How to Reach Me
• rockncoder@gmail.com
• http://therockncoder.blogspot.com/
• https://github.com/Rockncoder/ccplus
Saturday, September 7, 13
Questions
Saturday, September 7, 13

More Related Content

What's hot

The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015Matt Raible
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performancedmethvin
 
jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014dmethvin
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery PluginsMarc Grabanski
 
Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015Matt Raible
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015Matt Raible
 
React brief introduction
React brief introductionReact brief introduction
React brief introductionPrograils.com
 

What's hot (7)

The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
 
React brief introduction
React brief introductionReact brief introduction
React brief introduction
 

Viewers also liked

Creative coding with d3.js
Creative coding with d3.jsCreative coding with d3.js
Creative coding with d3.jsFabian Dubois
 
Functional Programming in JavaScript
Functional Programming in JavaScriptFunctional Programming in JavaScript
Functional Programming in JavaScriptTroy Miles
 
Writing Code That Lasts - Joomla!Dagen 2015
Writing Code That Lasts - Joomla!Dagen 2015Writing Code That Lasts - Joomla!Dagen 2015
Writing Code That Lasts - Joomla!Dagen 2015Rafael Dohms
 
Satellite communication
Satellite communicationSatellite communication
Satellite communicationNeeda Multani
 
GUI Programming In Java
GUI Programming In JavaGUI Programming In Java
GUI Programming In Javayht4ever
 
TDD - Inevitable Challenge for Software Developers (phpkonf15 keynote)
TDD - Inevitable Challenge for Software Developers (phpkonf15 keynote)TDD - Inevitable Challenge for Software Developers (phpkonf15 keynote)
TDD - Inevitable Challenge for Software Developers (phpkonf15 keynote)Lemi Orhan Ergin
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript ProgrammingSehwan Noh
 
Node.js and The Internet of Things
Node.js and The Internet of ThingsNode.js and The Internet of Things
Node.js and The Internet of ThingsLosant
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScriptNicholas Zakas
 
Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebMontreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebRachel Andrew
 
Satellite communications ppt
Satellite communications pptSatellite communications ppt
Satellite communications pptNiranjan kumar
 
Digitized Student Development, Social Media, and Identity
Digitized Student Development, Social Media, and IdentityDigitized Student Development, Social Media, and Identity
Digitized Student Development, Social Media, and IdentityPaul Brown
 
Creative Traction Methodology - For Early Stage Startups
Creative Traction Methodology - For Early Stage StartupsCreative Traction Methodology - For Early Stage Startups
Creative Traction Methodology - For Early Stage StartupsTommaso Di Bartolo
 

Viewers also liked (16)

Creative coding with d3.js
Creative coding with d3.jsCreative coding with d3.js
Creative coding with d3.js
 
Dev Ops 101
Dev Ops 101Dev Ops 101
Dev Ops 101
 
Functional Programming in JavaScript
Functional Programming in JavaScriptFunctional Programming in JavaScript
Functional Programming in JavaScript
 
Writing Code That Lasts - Joomla!Dagen 2015
Writing Code That Lasts - Joomla!Dagen 2015Writing Code That Lasts - Joomla!Dagen 2015
Writing Code That Lasts - Joomla!Dagen 2015
 
Satellite communication
Satellite communicationSatellite communication
Satellite communication
 
GUI Programming In Java
GUI Programming In JavaGUI Programming In Java
GUI Programming In Java
 
TDD - Inevitable Challenge for Software Developers (phpkonf15 keynote)
TDD - Inevitable Challenge for Software Developers (phpkonf15 keynote)TDD - Inevitable Challenge for Software Developers (phpkonf15 keynote)
TDD - Inevitable Challenge for Software Developers (phpkonf15 keynote)
 
OPTICAL FIBER COMMUNICATION PPT
OPTICAL FIBER COMMUNICATION PPTOPTICAL FIBER COMMUNICATION PPT
OPTICAL FIBER COMMUNICATION PPT
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
Node.js and The Internet of Things
Node.js and The Internet of ThingsNode.js and The Internet of Things
Node.js and The Internet of Things
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
 
Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebMontreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern Web
 
Satellite communications ppt
Satellite communications pptSatellite communications ppt
Satellite communications ppt
 
Digitized Student Development, Social Media, and Identity
Digitized Student Development, Social Media, and IdentityDigitized Student Development, Social Media, and Identity
Digitized Student Development, Social Media, and Identity
 
Creative Traction Methodology - For Early Stage Startups
Creative Traction Methodology - For Early Stage StartupsCreative Traction Methodology - For Early Stage Startups
Creative Traction Methodology - For Early Stage Startups
 
Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 

Similar to jQuery Mobile Deep Dive

jQuery Mobile, Backbone.js, and ASP.NET MVC
jQuery Mobile, Backbone.js, and ASP.NET MVCjQuery Mobile, Backbone.js, and ASP.NET MVC
jQuery Mobile, Backbone.js, and ASP.NET MVCTroy Miles
 
RailsAdmin - Overview and Best practices
RailsAdmin - Overview and Best practicesRailsAdmin - Overview and Best practices
RailsAdmin - Overview and Best practicesBenoit Bénézech
 
Red Dirt Ruby Conference
Red Dirt Ruby ConferenceRed Dirt Ruby Conference
Red Dirt Ruby ConferenceJohn Woodell
 
PhoneGap in 60 Minutes or Less
PhoneGap in 60 Minutes or LessPhoneGap in 60 Minutes or Less
PhoneGap in 60 Minutes or LessTroy Miles
 
PhoneGap in a Day
PhoneGap in a DayPhoneGap in a Day
PhoneGap in a DayTroy Miles
 
Responsive Design and jQuery Mobile
Responsive Design and jQuery MobileResponsive Design and jQuery Mobile
Responsive Design and jQuery MobileTroy Miles
 
Lone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New AngleLone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New AnglePablo Godel
 
Frontend Engineer Toolbox
Frontend Engineer ToolboxFrontend Engineer Toolbox
Frontend Engineer ToolboxYnon Perek
 
Writing SaltStack Modules - OpenWest 2013
Writing SaltStack Modules - OpenWest 2013Writing SaltStack Modules - OpenWest 2013
Writing SaltStack Modules - OpenWest 2013SaltStack
 
Bundling Client Side Assets
Bundling Client Side AssetsBundling Client Side Assets
Bundling Client Side AssetsTimothy Oxley
 
From Renamer Plugin to Polyglot IDE
From Renamer Plugin to Polyglot IDEFrom Renamer Plugin to Polyglot IDE
From Renamer Plugin to Polyglot IDEintelliyole
 
An Introduction to AngularJS
An Introduction to AngularJSAn Introduction to AngularJS
An Introduction to AngularJSFalk Hartmann
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSPablo Godel
 
JSDay 2013 - Practical Responsive Web Design
JSDay 2013 - Practical Responsive Web DesignJSDay 2013 - Practical Responsive Web Design
JSDay 2013 - Practical Responsive Web DesignJonathan Klein
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGuillaume Laforge
 
2a-JQuery AJAX.pptx
2a-JQuery AJAX.pptx2a-JQuery AJAX.pptx
2a-JQuery AJAX.pptxLe Hung
 
Atlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring IntegrationAtlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring IntegrationGunnar Hillert
 
Front-End Performance Starts On the Server
Front-End Performance Starts On the ServerFront-End Performance Starts On the Server
Front-End Performance Starts On the ServerJon Arne Sæterås
 

Similar to jQuery Mobile Deep Dive (20)

jQuery Mobile, Backbone.js, and ASP.NET MVC
jQuery Mobile, Backbone.js, and ASP.NET MVCjQuery Mobile, Backbone.js, and ASP.NET MVC
jQuery Mobile, Backbone.js, and ASP.NET MVC
 
RailsAdmin - Overview and Best practices
RailsAdmin - Overview and Best practicesRailsAdmin - Overview and Best practices
RailsAdmin - Overview and Best practices
 
Red Dirt Ruby Conference
Red Dirt Ruby ConferenceRed Dirt Ruby Conference
Red Dirt Ruby Conference
 
PhoneGap in 60 Minutes or Less
PhoneGap in 60 Minutes or LessPhoneGap in 60 Minutes or Less
PhoneGap in 60 Minutes or Less
 
PhoneGap in a Day
PhoneGap in a DayPhoneGap in a Day
PhoneGap in a Day
 
Responsive Design and jQuery Mobile
Responsive Design and jQuery MobileResponsive Design and jQuery Mobile
Responsive Design and jQuery Mobile
 
Lone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New AngleLone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New Angle
 
Frontend Engineer Toolbox
Frontend Engineer ToolboxFrontend Engineer Toolbox
Frontend Engineer Toolbox
 
Writing SaltStack Modules - OpenWest 2013
Writing SaltStack Modules - OpenWest 2013Writing SaltStack Modules - OpenWest 2013
Writing SaltStack Modules - OpenWest 2013
 
Bundling Client Side Assets
Bundling Client Side AssetsBundling Client Side Assets
Bundling Client Side Assets
 
From Renamer Plugin to Polyglot IDE
From Renamer Plugin to Polyglot IDEFrom Renamer Plugin to Polyglot IDE
From Renamer Plugin to Polyglot IDE
 
An Introduction to AngularJS
An Introduction to AngularJSAn Introduction to AngularJS
An Introduction to AngularJS
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
 
Android introduccion2
Android introduccion2Android introduccion2
Android introduccion2
 
JSDay 2013 - Practical Responsive Web Design
JSDay 2013 - Practical Responsive Web DesignJSDay 2013 - Practical Responsive Web Design
JSDay 2013 - Practical Responsive Web Design
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and Gaelyk
 
2a-JQuery AJAX.pptx
2a-JQuery AJAX.pptx2a-JQuery AJAX.pptx
2a-JQuery AJAX.pptx
 
Atlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring IntegrationAtlanta JUG - Integrating Spring Batch and Spring Integration
Atlanta JUG - Integrating Spring Batch and Spring Integration
 
Front-End Performance Starts On the Server
Front-End Performance Starts On the ServerFront-End Performance Starts On the Server
Front-End Performance Starts On the Server
 
Backbone
BackboneBackbone
Backbone
 

More from Troy Miles

Fast C++ Web Servers
Fast C++ Web ServersFast C++ Web Servers
Fast C++ Web ServersTroy Miles
 
Node Boot Camp
Node Boot CampNode Boot Camp
Node Boot CampTroy Miles
 
AWS Lambda Function with Kotlin
AWS Lambda Function with KotlinAWS Lambda Function with Kotlin
AWS Lambda Function with KotlinTroy Miles
 
React Native One Day
React Native One DayReact Native One Day
React Native One DayTroy Miles
 
React Native Evening
React Native EveningReact Native Evening
React Native EveningTroy Miles
 
Intro to React
Intro to ReactIntro to React
Intro to ReactTroy Miles
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN StackTroy Miles
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application TestingTroy Miles
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?Troy Miles
 
Angular Weekend
Angular WeekendAngular Weekend
Angular WeekendTroy Miles
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN StackTroy Miles
 
Functional Programming in Clojure
Functional Programming in ClojureFunctional Programming in Clojure
Functional Programming in ClojureTroy Miles
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-upTroy Miles
 
The JavaScript You Wished You Knew
The JavaScript You Wished You KnewThe JavaScript You Wished You Knew
The JavaScript You Wished You KnewTroy Miles
 
Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Troy Miles
 
Build a Game in 60 minutes
Build a Game in 60 minutesBuild a Game in 60 minutes
Build a Game in 60 minutesTroy Miles
 
Quick & Dirty & MEAN
Quick & Dirty & MEANQuick & Dirty & MEAN
Quick & Dirty & MEANTroy Miles
 
A Quick Intro to ReactiveX
A Quick Intro to ReactiveXA Quick Intro to ReactiveX
A Quick Intro to ReactiveXTroy Miles
 
JavaScript Foundations Day1
JavaScript Foundations Day1JavaScript Foundations Day1
JavaScript Foundations Day1Troy Miles
 

More from Troy Miles (20)

Fast C++ Web Servers
Fast C++ Web ServersFast C++ Web Servers
Fast C++ Web Servers
 
Node Boot Camp
Node Boot CampNode Boot Camp
Node Boot Camp
 
AWS Lambda Function with Kotlin
AWS Lambda Function with KotlinAWS Lambda Function with Kotlin
AWS Lambda Function with Kotlin
 
React Native One Day
React Native One DayReact Native One Day
React Native One Day
 
React Native Evening
React Native EveningReact Native Evening
React Native Evening
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
Functional Programming in Clojure
Functional Programming in ClojureFunctional Programming in Clojure
Functional Programming in Clojure
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
 
The JavaScript You Wished You Knew
The JavaScript You Wished You KnewThe JavaScript You Wished You Knew
The JavaScript You Wished You Knew
 
Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1
 
Build a Game in 60 minutes
Build a Game in 60 minutesBuild a Game in 60 minutes
Build a Game in 60 minutes
 
Quick & Dirty & MEAN
Quick & Dirty & MEANQuick & Dirty & MEAN
Quick & Dirty & MEAN
 
A Quick Intro to ReactiveX
A Quick Intro to ReactiveXA Quick Intro to ReactiveX
A Quick Intro to ReactiveX
 
JavaScript Foundations Day1
JavaScript Foundations Day1JavaScript Foundations Day1
JavaScript Foundations Day1
 

Recently uploaded

The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 

Recently uploaded (20)

The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 

jQuery Mobile Deep Dive

  • 1. jQuery Mobile Deep Dive 7 September 2013 Culver City, California USA Saturday, September 7, 13
  • 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. Want more? Follow me for more tutorials and source code. @therockncoder Saturday, September 7, 13
  • 4. Source code for my tutorials hosted on GitHub @ https://github.com/Rockncoder Saturday, September 7, 13
  • 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. 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. Coffee Coffee+ • jQuery Mobile • Backbone • Responsive Design • Templates Saturday, September 7, 13
  • 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
  • 10. Memory Management Tips • Globals are bad • Use functions for information hiding Saturday, September 7, 13
  • 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. Information Hiding • JS lacks classes or other information • One alternative is to wrap code in anonymous functions Saturday, September 7, 13
  • 14. The fastest code is the code which is never run. Saturday, September 7, 13
  • 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. jQuery • Don’t use .live() • Use $.mobile.activePage • Use preventDefault() • Cache selector • Know when not to use jQuery Saturday, September 7, 13
  • 18. HTML • Copy HTML collections into JS arrays • Avoid accessing the DOM • Use CSS classes not styles Saturday, September 7, 13
  • 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. Templating Engines • Underscore • Handlebars • Jade • dust (LinkedIn) • http://garann.github.io/template-chooser/ Saturday, September 7, 13
  • 22. Handlebars • Create a template in a script tag • Compile template in JS • Render template with data Saturday, September 7, 13
  • 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. 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. 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. Helpers • Handlebars allows for the creation of JS helper functions • These handlers make it possible to extend Handlebars functionality Saturday, September 7, 13
  • 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. 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. 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. 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. MV* Frameworks • Angular.js, from Google • Ember.js, based on SproutCore • Backbone.js, • and many more • http://todomvc.com/ Saturday, September 7, 13
  • 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. 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. The Nickel Tour • Models • Collections • Views • Routes Saturday, September 7, 13
  • 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. Models • Backbone.Model.extend() • defaults allows for the creation of default values Saturday, September 7, 13
  • 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. 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. Routes • Backbone.Router.extend() • Normally only one route per app • Backbone.history.Start() tells BB to begin monitoring the URL Saturday, September 7, 13
  • 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. 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. QUnit • Probably the easiest one to learn • Used to test all of the jQuery projects Saturday, September 7, 13
  • 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. 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. 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
  • 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. 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. 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. 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. 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. 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
  • 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. 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. 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
  • 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. How to Minify • By Hand • Using an app Saturday, September 7, 13
  • 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. 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. Icons and Splash Pages Saturday, September 7, 13
  • 67. Icons • Classic icon (Microsoft) • Standardized • Mobile icon (Apple) Saturday, September 7, 13
  • 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. HTML5 Offline App Saturday, September 7, 13
  • 70. How to Reach Me • rockncoder@gmail.com • http://therockncoder.blogspot.com/ • https://github.com/Rockncoder/ccplus Saturday, September 7, 13