Transcript PhoneGap Applications

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
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
10 PhoneGap Tips and Tricks
#1 Test your applications
Debugging?
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
#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
#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 latest 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
• The Node.js
Command-line Interface for PhoneGap
o The new CLI tool removes the hassles of downloading Platform
Specific compressed zip files and then building the packages
from different platform specific commands.
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.
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.
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
• Can only build and store one project at a time
with the FREE account.
Build PhoneGap Apps in the Cloud
How it works:
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/
That’s all Folks!