10 tips and tricks how to write better phonegap applications.. var title = “ 10 tips and tricks...

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 ?

Native Web View

Your Code

What is PhoneGap ?

Native APIs

Native Web View

Your Code

What is PhoneGap ?

Native App - .apk, .xap, etc.

Native APIs

Native Web View

Your Code

What is PhoneGap ?

• PhoneGap uses the native browser on thedevice 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:


#1 Test your applications• Debugging?:

o console.log



o try catch everythingtry { // ...} catch(err) { console.log( 'Error at line ' + error.line + " in " + error.sourceURL + ' : ' + error.message ); }



o Weinre from Patrick Muellero https://github.com/pmuellr/weinre



o stats.js from Mr.doob

o https://github.com/mrdoob/stats.js

https://github.com/mrdoob/stats.js




#2 HTML5 Canvas

• Don't use the canvas element when it is possible!


#3 Connectivity ???

• If you use

window.location = "http://mobile.site.com";

you have already failed


#4 Consider the architecture of your PhoneGap application• 2 basic approaches when building

PhoneGap applications: o SPA (Single–Page Apps) - recommendedo Milti-Page Apps

o Transition between pageso You must include the PhoneGap JavaScript library in

every pageo There is not much differentiation between the app

and a mobile web site


#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.


#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


#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).


#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 frameworkso cover every aspect of your application:

Sencha Touch, jQuery Mobile, Enyo.js

• Partial-stack frameworkso cover individual components of the overall architecture:

Backbone.js, Angular.js, Ember.js, and Knockout.js


#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.


#7 Media Queries• Different screen sizes for PhoneGap's use

in px: o Android HD = 360 wide x 567 higho iPhone 3G/3GS/4/4S = 320 wide x 480 high

• JavaScript (example uses JQuery):o consoleLog( "window=" + $(document).width() + "x" +

$(document).height() );

• Media Queryo @media only screen and (min-device-width: 700px) { }


#8.1 Cache Static Data

• Local Storage

• Database

• File


#8.2 Cache Dynamic Data

• Present cached data first, then• update UI when requested data arrives


#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’


#9 Limit use of shadows and gradients

• Keep it simple.


#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


• 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


• 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.


• 2 new APIs -– InAppBrowser (formerly known as the ChildBrowser plugin) and Globalization API.


• 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


• 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


• The Node.js Command-line Interface for PhoneGapo The documentation recommends installing the CLI

globally by running: > npm install -g phonegapo Create the App

phonegap create hello com.example.hello HelloWorldo Upgrade project:

cordova platform update android


• New Plugin Architectureo 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.

•


• New Plugin Architectureo 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-wip-us.apache.org/repos/asf/cordova-plugin-device.gito 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 = ...]]

https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

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 haveWeinre, which lets usdebug and manipulatethe DOM from ourPCs.

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

• Notificationo .

Extending PhoneGap

Available at

o https://github.com/phonegap/phonegap-plugins

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


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


As a result you will see the standard Windows Phone “Post Message” dialog where you can edit and post your message.

Extending PhoneGap


PhoneGap plugin method “postMessage” returns a result of the method execution (Your status is posted successfully )

Extending PhoneGap

• Creating PhoneGap Plugins for Windows Phoneo 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 Phoneo 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


• The Problem:

• You’re building a cross-platform app, but dealing with a lot of native projects


• The Solution:


• Build includes git support so you can use git and host projects on PhoneGap or build a project from Github.


• Sample project in Github: o https://github.com/mmateev/TwitterCordovaApp/

Thanks to our Sponsors:

Diamond Sponsor:

Gold Sponsors:

Swag Sponsors: Media Partners:

Technological Partners:

Silver Sponsors:

Bronze Partners:

10 Tips and Tricks How to Write

Better Phonegap Applications

Q & A

10 tips and tricks how to write better phonegap applications.. var title = “ 10 tips and tricks...

Documents