var title = “10
Tips and Tricks How to
Write Better Phonegap Applications..
$(this).attr(“title”, title);
$(this).data({
here are these tips and tricks to avoid
snagging and became lazy on producing
some valuable apps … an more…
});
Agenda
•
•
•
•
•
•
•
•
Why PhoneGap?
Who is PhoneGap...really?
10 Tips and Tricks
PhoneGap 3.x New Features
Debugging PhoneGap
Extending PhoneGap
Final Considerations
Build PhoneGap Applications in the Cloud
Why PhoneGap?
• There are more
than 100 000 000
WEB developers!
• The web is
awesome!
•
.
Why PhoneGap?
• The realistic reason:
Cross platform
applications with
HTML/JS will be
faster and easier
What is PhoneGap ?
• PhoneGap is an open-source mobile
development framework produced by Nitobi,
purchased by Adobe Systems
• The resulting applications are hybrid, meaning
that they are neither truly native
What is PhoneGap ?
Your Code
What is PhoneGap ?
Your Code
Native Web View
What is PhoneGap ?
Your Code
Native Web View
Native APIs
What is PhoneGap ?
Your Code
Native Web View
Native APIs
Native App - .apk, .xap, etc.
What is PhoneGap ?
• PhoneGap uses the native browser on the
device to render the HTML/CSS/JS
• Keep in mind that can affect the experience It
also keeps apps nice and small
What is PhoneGap ?
• PhoneGap uses the
native project format
for each platform
• Open, emulate, and
test from within the
native development
environment!
What is PhoneGap ?
• Because it’s using
the native projects
it’s fully
extendable.
What is PhoneGap ?
• PhoneGap provides
a JavaScript library
that reaches out
into the native APIs
• That means
anything the device
is doable
What is PhoneGap ?
• PhoneGap is
completely open
source and has been
submitted to the
Apache Foundation.
http:// incubator.apache.org/callback/
What is PhoneGap ?
• The entire project is
available on Github:
https://github.com/cordova
Title Goes Here, 36pt
• Main Text / Bullets Here, Gray, 28 pt.
• Main Text / Bullets Here, Gray, 28 pt.
o Bullets Points, Line 2, 24 pt.
• Bullets Points, Line 3, 20 pt.
o Bullets Points, Line 4, 24 pt.
10 PhoneGap Tips and Tricks
#1 Test your applications
• Chrome Dev Tools:
10 PhoneGap Tips and Tricks
#1 Test your applications
• Debugging?:
o console.log
10 PhoneGap Tips and Tricks
#1 Test your applications
• Debugging?:
o try catch everything
try {
// ...
} catch(err) {
console.log(
'Error at line ' + error.line + " in " +
error.sourceURL + ' : ' + error.message
);
}
10 PhoneGap Tips and Tricks
#1 Test your applications
• Debugging?:
o Weinre from Patrick Mueller
o https://github.com/pmuellr/weinre
10 PhoneGap Tips and Tricks
#1 Test your applications
• Debugging?:
o stats.js from Mr.doob
o https://github.com/mrdoob/stats.js
10 PhoneGap Tips and Tricks
#2 HTML5 Canvas
• Don't use the canvas element when it is
possible!
10 PhoneGap Tips and Tricks
#3 Connectivity ???
• If you use
window.location = "http://mobile.site.com";
you have already failed
10 PhoneGap Tips and Tricks
#4 Consider the architecture of your PhoneGap
application
• 2 basic approaches when building PhoneGap
applications:
o SPA (Single–Page Apps) - recommended
o Milti-Page Apps
o Transition between pages
o You must include the PhoneGap JavaScript library in every
page
o There is not much differentiation between the app and a
mobile web site
10 PhoneGap Tips and Tricks
#5 JavaScript Libraries
• Pros:
o JS libraries provide familiar and easy APIs for common
tasks, greatly increasing productivity.
o JS libraries can encapsulate logic so the developer
doesn’t necessarily have to be an expert to execute a
common task.
10 PhoneGap Tips and Tricks
#5 JavaScript Libraries
• Cons:
o JS libraries often include cross-platform
logic/detection, which adds file size and additional
computational logic to perform a given action..
o JS libraries can have bugs that might be difficult to
track down.
o You must pay attention to all open source licensing
for JS libraries
10 PhoneGap Tips and Tricks
#6 Frameworks and MVC
• MVC frameworks enforce common coding
practices that separate the data (model), from
the presentation logic (view), and from the
application control/services logic (controller).
10 PhoneGap Tips and Tricks
#6 Frameworks and MVC
• There are generally 2 types of framework
structures used in PhoneGap/JS applications.
o Hardly any of these frameworks are MVC, but are of the MV*
variety (MVP, MVVM, etc).
• Full-stack frameworks
o cover every aspect of your application:
Sencha Touch, jQuery Mobile, Enyo.js
• Partial-stack frameworks
o cover individual components of the overall architecture:
Backbone.js, Angular.js, Ember.js, and Knockout.js
10 PhoneGap Tips and Tricks
#7 Media Queries
• Use as much as possible @media queries,
there’s a bunch of tutorials and materials out
there who can teach you exactly your needs.
This is a very good point for multi-device
density.
• And never forget to use images by screen dpi as
well, otherwise your App is floated with dpis not
used.
10 PhoneGap Tips and Tricks
#7 Media Queries
• Different screen sizes for PhoneGap's use in px:
o Android HD = 360 wide x 567 high
o iPhone 3G/3GS/4/4S = 320 wide x 480 high
• JavaScript (example uses JQuery):
o consoleLog( "window=" + $(document).width() + "x" +
$(document).height() );
• Media Query
o @media only screen and (min-device-width: 700px) { }
10 PhoneGap Tips and Tricks
#8.1 Cache Static Data
• Local Storage
• Database
• File
10 PhoneGap Tips and Tricks
#8.2 Cache Dynamic Data
• Present cached data first, then
• update UI when requested data arrives
10 PhoneGap Tips and Tricks
#8.3 Cache jQuery Query Selectors
• Assign selectors to avoid traversing the DOM
repeatedly
• Coding convention tip: prefix ‘$’ to selector
variables e.g ‘var $backButton’
10 PhoneGap Tips and Tricks
#9 Limit use of shadows and gradients
• Keep it simple.
10 PhoneGap Tips and Tricks
#9 Limit use of shadows and gradients
• Keep it simple.
10 PhoneGap Tips and Tricks
#10 Limit use of shadows and gradients
• Use CSS transitions with hardware acceleration
o GPU vs CPU
o CSS not JavaScript
• (CSS) transform: translate3d()
• -micro-library: https://github.com/ccoenraets/PageSlider
10 PhoneGap Tips and Tricks
• And more tips….
o Use only the device capabilities you need it, Specially if you’re in
Android and by default the ./create methods enables everything
by default, you might be scary your user if all available
capabilities are in use.
o Test your code in Chrome, Since uses the lastest webkit
approach, you will need it to emulate your content and test
media queries.
o Forget about Emulators when you’re designing the UI, you don’t
need them for creating UI and workflow. You just need to fire up
a Emulator when you need to test device capabilities like
Camera, Mic.
PhoneGap 3.x New Features
• PhoneGap 3.0 is released in July 2013
• Version 3.1 is released in October
• PhoneGap 3.2 – in November 2013
PhoneGap 3.x New Features
• There are the following major new features in
PhoneGap 3.x:
o New plugin architecture. Developers include the APIs
they need and plugins can be automatically installed
and removed.
o Native platform CLI tooling. If you don’t have a native
platform SDK installed, CLI tools now integrate with
PhoneGap/Build.
o New platforms - Earlier this year - iOS6 (with work on
iOS7 happening now!), WP8, and BlackBerry 10.
Firefox OS and Ubuntu are coming soon.
PhoneGap 3.x New Features
• 2 new APIs -– InAppBrowser (formerly known as
the ChildBrowser plugin) and Globalization API.
PhoneGap 3.x New Features
• The Node.js Command-line Interface for
PhoneGap
o The new CLI tool removes the hassles of downloading Platform
Specifix compressed zip files and then building the packages
from different platform specific commands. In Phonegap 3.0
o You can create a build locally directly from the command line.
Phonegap CLI also provides you the feature of creating a remote
build using your Phonegap Build account
PhoneGap 3.x New Features
• Command-line Interface for PhoneGap
o The new CLI tool removes the hassles of downloading Platform
Specifix compressed zip files and then building the packages
from different platform specific commands. In Phonegap 3.0
o You can create a build locally directly from the command line.
Phonegap CLI also provides you the feature of creating a remote
build using your Phonegap Build account
PhoneGap 3.x New Features
• The Node.js Command-line Interface for
PhoneGap
o The documentation recommends installing the CLI globally by
running: > npm install -g phonegap
o Create the App
phonegap create hello com.example.hello HelloWorld
o Upgrade project:
cordova platform update android
PhoneGap 3.x New Features
• New Plugin Architecture
o In earlier versions 1.x to 2.x, Cordova API for all device
functionality was included in the Cordova App by default which
made the app build package very heavy.
o Phonegap 3.0, developers have redone the architecture as a
plugin based architecture where you have to include the APIs
needed by your app only.
•
PhoneGap 3.x New Features
• New Plugin Architecture
o For Example: If you are just using the Geolocation API & not the
camera, you have to include the Geolocation Plugin only.
. $ cordova plugin add https://git-wipus.apache.org/repos/asf/cordova-plugin-device.git
o To install Plugman & use it to add core plugins use the following
code:
npm install -g plugman
o $ plugman --platform <ios|android|blackberry10|wp7|wp8> -project --plugin <name|url|path> [--plugins_dir ] [--www ] [-variable = [--variable = ...]]
Debugging PhoneGap
• It’s all just HTML/JS, so
you can use your
browser!
• Take advantage of
Chrome Developer
tools/Firebug to test
your app’s UI.
Debugging PhoneGap
But what about Device APIs?
Because we’re in the web view, there is no way to
do line-by-line debugging
Debugging PhoneGap
Luckily we have
Weinre, which lets us
debug and manipulate
the DOM from our
PCs.
Debugging PhoneGap
• But, a much easier way:
• http://debug.phonegap.com/
Extending PhoneGap
• For added functionality
PhoneGap provides a
plug-in mechanism.
• Includes OS-specific
code/libraries and the JS
to use it in PhoneGap
• Some of the helpful
ones: PayPal, Facebook,
Push
• Notification
o.
Extending PhoneGap
Available at
o https://github.com/phonegap/phonegap-plugins
Extending PhoneGap
• Creating PhoneGap Plugins for Windows Phone
• Sometimes you need a specific unsupported device
functionality or you could implement a specific feature
better and easier using a native code.
Extending PhoneGap
• Creating PhoneGap Plugins for Windows Phone
o Add a new functionality “Share Status” to sample PhoneGap application.
o All you need to do in order to this launchers in your application is:
o Create an instance of ShareStatusTask,
o Set desired propertied: Status.
o Call Show():
Extending PhoneGap
• Creating PhoneGap Plugins for Windows Phone
As a result you will
see the standard
Windows Phone
“Post Message”
dialog where you can
edit and post your
message.
Extending PhoneGap
• Creating PhoneGap Plugins for Windows Phone
PhoneGap plugin
method
“postMessage”
returns a result of
the method
execution (Your
status is posted
successfully )
Extending PhoneGap
• Creating PhoneGap Plugins for Windows Phone
PhoneGap plugin
method
“postMessage”
returns a result of
the method
execution (Your
status is posted
successfully )
Extending PhoneGap
• Creating PhoneGap Plugins for Windows Phone
o C# code
public class ShareStatus : BaseCommand
{
[DataContract]
public class ShareStatusParameters
{
[DataMember]
public string status { get; set; }
}
public void postStatus(string args)
{
ShareStatusParameters statusParam = JsonHelper.Deserialize<ShareStatusParameters>(args);
ShareStatusTask shareStatusTask = new ShareStatusTask();
shareStatusTask.Status = statusParam.status;
this.DispatchCommandResult(new PluginResult(PluginResult.Status.OK, statusParam.status));
shareStatusTask.Show();
}
}
Extending PhoneGap
• Creating PhoneGap Plugins for Windows Phone
o JS code
function postStatus() {
cordova.exec(
function (res) {
var postedStatus = res + ' is posted!';
alert(res);
document.getElementById('res').innerHTML = postedStatus;
},
function (e) {
console.log("Error occurred: " + e);
document.getElementById('res').innerHTML = "Error occurred: " + e;
},
"ShareStatus", "postStatus",
{ status: document.getElementById('status').value });
Final Considerations
• Remember that we’re on different platforms
Versus
Final Considerations
• Couple of tips:
• Always test features first (if !supported)
• For UI-specifics, you can use the device class to
get device info
Build PhoneGap Apps in the Cloud
• One more thing:
o build.phonegap.com
Build PhoneGap Apps in the Cloud
• The Problem:
• You’re building a cross-platform app, but dealing
with a lot of native projects
Build PhoneGap Apps in the Cloud
• The Solution:
Build PhoneGap Apps in the Cloud
• Build includes git
support so you can
use git and host
projects on
PhoneGap or build a
project from Github.
Build PhoneGap Apps in the Cloud
• Sample project in Github:
o https://github.com/mmateev/TwitterCordovaApp/
Thanks to our Sponsors:
Diamond Sponsor:
Gold Sponsors:
Silver Sponsors:
Technological Partners:
Bronze Partners:
Swag Sponsors:
Media Partners:
10 Tips and Tricks How to Write Better
Phonegap Applications
Q&A