Presentation is loading. Please wait.

Presentation is loading. Please wait.

10 Tips and Tricks How to Write Better Phonegap Applications.. var title = “ 10 Tips and Tricks How to Write Better Phonegap Applications.. $(this).attr(“title”,

Similar presentations


Presentation on theme: "10 Tips and Tricks How to Write Better Phonegap Applications.. var title = “ 10 Tips and Tricks How to Write Better Phonegap Applications.. $(this).attr(“title”,"— Presentation transcript:

1 10 Tips and Tricks How to Write Better 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… });

2 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

3 Why PhoneGap? There are more than 100 000 000 WEB developers! The web is awesome!.

4 Why PhoneGap? The realistic reason: Cross platform applications with HTML/JS will be faster and easier

5 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

6 What is PhoneGap ? Your Code

7 What is PhoneGap ? Native Web View Your Code

8 What is PhoneGap ? Native APIs Native Web View Your Code

9 What is PhoneGap ? Native App -.apk,.xap, etc. Native APIs Native Web View Your Code

10 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

11 What is PhoneGap ? PhoneGap uses the native project format for each platform Open, emulate, and test from within the native development environment!

12 What is PhoneGap ? Because it’s using the native projects it’s fully extendable.

13 What is PhoneGap ? PhoneGap provides a JavaScript library that reaches out into the native APIs That means anything the device is doable

14 What is PhoneGap ? PhoneGap is completely open source and has been submitted to the Apache Foundation. http:// incubator.apache.org/callback/

15 What is PhoneGap ? The entire project is available on Github: https://github.com/cordova

16 Title Goes Here, 36pt 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.

17 10 PhoneGap Tips and Tricks #1 Test your applications Chrome Dev Tools:

18 10 PhoneGap Tips and Tricks #1 Test your applications Debugging?: o console.log

19 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 ); }

20 10 PhoneGap Tips and Tricks #1 Test your applications Debugging?: o Weinre from Patrick Mueller o https://github.com/pmuellr/weinre

21 10 PhoneGap Tips and Tricks #1 Test your applications Debugging?: o stats.js from Mr.doob o https://github.com/mrdoob/stats.js https://github.com/mrdoob/stats.js

22 10 PhoneGap Tips and Tricks #2 HTML5 Canvas Don't use the canvas element when it is possible!

23 10 PhoneGap Tips and Tricks #3 Connectivity ??? If you use window.location = "http://mobile.site.com"; you have already failed

24 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

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

26 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

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

28 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

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

30 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) { }

31 10 PhoneGap Tips and Tricks #8.1 Cache Static Data Local Storage Database File

32 10 PhoneGap Tips and Tricks #8.2 Cache Dynamic Data Present cached data first, then update UI when requested data arrives

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

34 10 PhoneGap Tips and Tricks #9 Limit use of shadows and gradients Keep it simple.

35 10 PhoneGap Tips and Tricks #9 Limit use of shadows and gradients Keep it simple.

36 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

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

38 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

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

40 PhoneGap 3.x New Features 2 new APIs -– InAppBrowser (formerly known as the ChildBrowser plugin) and Globalization API.

41 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

42 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

43 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

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

45 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.githttps://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 =...]]

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

47 Debugging PhoneGap But what about Device APIs? Because we’re in the web view, there is no way to do line-by-line debugging

48 Debugging PhoneGap Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.

49 Debugging PhoneGap But, a much easier way: http://debug.phonegap.com/

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

51 Extending PhoneGap Available at o https://github.com/phonegap/phonegap-plugins https://github.com/phonegap/phonegap-plugins

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

53 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():

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

55 Extending PhoneGap Creating PhoneGap Plugins for Windows Phone PhoneGap plugin method “postMessage” returns a result of the method execution (Your status is posted successfully )

56 Extending PhoneGap Creating PhoneGap Plugins for Windows Phone PhoneGap plugin method “postMessage” returns a result of the method execution (Your status is posted successfully )

57 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(); }

58 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 });

59 Final Considerations Remember that we’re on different platforms Versus

60 Final Considerations Couple of tips: Always test features first (if !supported) For UI-specifics, you can use the device class to get device info

61 Build PhoneGap Apps in the Cloud One more thing: o build.phonegap.com

62 Build PhoneGap Apps in the Cloud The Problem: You’re building a cross-platform app, but dealing with a lot of native projects

63 Build PhoneGap Apps in the Cloud The Solution:

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

65 Build PhoneGap Apps in the Cloud Sample project in Github: o https://github.com/mmateev/TwitterCordovaApp/

66 Thanks to our Sponsors: Diamond Sponsor: Gold Sponsors: Swag Sponsors:Media Partners: Technological Partners: Silver Sponsors: Bronze Partners:

67 10 Tips and Tricks How to Write Better Phonegap Applications Q & A


Download ppt "10 Tips and Tricks How to Write Better Phonegap Applications.. var title = “ 10 Tips and Tricks How to Write Better Phonegap Applications.. $(this).attr(“title”,"

Similar presentations


Ads by Google