var title = "10 Tips and Tricks How to ... - jQuery Bulgaria

var title = "10 Tips and Tricks How to ... - jQuery Bulgaria

var title = 10 Tips and Tricks How to Write Better Phonegap $(this).attr(title, title); Applications.. $(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 its using the native projects its 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 (SinglePage 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 doesnt 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, theres 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 youre 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 youre designing the UI, you dont 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 dont 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-wip-us.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 --project --plugin [--plugins_dir ] [--www ] [--variable = [--variable = ...]] Debugging PhoneGap Its all just HTML/JS, so you can use your browser! Take advantage of

Chrome Developer tools/Firebug to test your apps UI. Debugging PhoneGap But what about Device APIs? Because were 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 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(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 were 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: Youre 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

Recently Viewed Presentations

  • Ontologies and ISO 11179 - Metadata Standards

    Ontologies and ISO 11179 - Metadata Standards

    ISO/IEC 11179 Part 2: Classification Schemes Metadata Registries — Part 2: Classification Schemes The revision of 11179 Part 2 is not an ISO standard because it is in draft status, a project of the ANSI/NCITS L8 committee.
  • By S.E. HintoN Mrs. Elias

    By S.E. HintoN Mrs. Elias

    About the novel Two weeks in the life of a 14 year old boy as he deals with the struggles and life of being in a local gang. Teen issues, behavior and problems are prevalent as Hinton explores the narrator...
  • Chemistry B11 Chapter 13 Esters, Amides and Carbohydrates

    Chemistry B11 Chapter 13 Esters, Amides and Carbohydrates

    triose (3C atoms) tetrose (4C atoms) pentose (5 C atoms) hexose (6 C atoms) "Aldo-" + suffix O ║ C ─ H aldose │ H─ C ─ OH │ H─ C ─ OH │ CH2OH an aldotetrose Monosaccharides - Aldose...
  • Base Plate --- Moment Connection Moment Connection Requires

    Base Plate --- Moment Connection Moment Connection Requires

    Column Splice --- Welded. Web Plate is Shop Welded. Column Splice --- Welded. After Lowering Upper Column. it is Field Welded. Web Bolts for Erection Fit-up. Moment Connection to Column Flange ---Field Welded. Web Plate is Shop Welded. to Column...
  • Whiplash Associated Disorder: The pathway from acute to ...

    Whiplash Associated Disorder: The pathway from acute to ...

    According to the World Health Organization, 80 percent of cardiovascular disease is caused by smoking, lack of exercise, an unhealthy diet, and other lifestyle factors. Statins give the illusion of protection to many people, who would be much better served,...
  • Campaign for Grade-Level Reading

    Campaign for Grade-Level Reading

    NIEER and CEELO recommended WVDE OEL join the National Campaign for Grade-Level Reading. ... The Campaign focuses on an important predictor of school success and high school graduation—grade-level reading by the end of third grade. ... such differences in the...
  • Refining Key Questions: Interactive Case Study Quiz

    Refining Key Questions: Interactive Case Study Quiz

    The frequency with which hypopnea and apnea occur varies, however, they may happen as often as once each minute. Airway obstruction results in repeated cycles of loud snoring, disruption of rapid eye movement (REM) sleep, and frequent arousals throughout the...
  • Aesop and His Fables

    Aesop and His Fables

    He had no idea what dangers he would face, but he was sure that one of them might be storms at sea. He protected his maps and charts. Columbus had a small cabin built on the Santa Maria that held...