Building Cross-Platform Mobile Apps
2 likes1,048 views
This document provides an overview of building cross-platform mobile apps using PhoneGap and JavaScript, highlighting best practices, core concepts, and development processes. It discusses the evolution of PhoneGap, plugin usage, debugging techniques, and frameworks like Backbone and Chocolate Chip UI. The agenda indicates a focus on practical app building with emphasis on JavaScript efficiency and cross-platform compatibility.
Building Cross-Platform Mobile Apps
- 1. Building Cross-Platform Mobile Apps Mobile Dev+Test 14 April 2015 - San Diego CA
- 2. Troy Miles Over 35 years of programming experience Blog: http://therockncoder.blogspot.com/ Twitter: @therockncoder Email: rockncoder@gmail.com GitHub: https://github.com/Rockncoder
- 3. Agenda A Quick & Dirty JavaScript Overview What is PhoneGap? Building PhoneGap Apps Debugging Plugins
- 5. Agenda Templates Chocolate Chip Lists Look and Feel Summary
- 6. The End of HTML5 as a Platform? Facebook mobile apps on iOS and Android were originally using HTML5 Users complained about speed and style In 2012, Facebook switch to native apps The pundits announced the end of HTML5 as a mobile platform and the end of PhoneGap too
- 7. JavaScript Best Practices Avoid sloppy JavaScript Avoid the Global Space Encapsulate Code into Objects Use Design Patterns
- 8. Avoid Sloppy JavaScript Use “strict” mode Always use ‘===’ & ‘!==’ Code in JavaScript not C#, Java, Ruby, etc. Use JSLint or JSHint
- 9. Avoid the Global Space Minimize use of global variables Use Name-spacing Use anonymous/immediate functions when appropriate
- 10. Functions Functions are a first class type Like other types they can be passed and assigned freely Anonymous functions are used frequently
- 11. Objects Objects are some what like Key/Value dictionaries in other languages The Key can be anything when wrapped in quotes The Value can be any type including a function
- 12. Events Events allow for excellent separation of concerns You can listen for system events or Trigger and respond to your own Many external libraries will communicate via events
- 13. Promises A rather new JavaScript concept Used to handle asynchronous callbacks The app uses jQuery’s version
- 14. PhoneGap/Cordova History 2009: 1st developed at an iPhoneDevCamp event 2009: Developers form a company, Nitobi 2011: Adobe acquires Nitobi 2011: Adobe open sources PhoneGap project to Apache 2012: Apache gives the project the name Cordova
- 15. Cordova Forks Adobe PhoneGap IBM Worklight Telerik Platform Intel XDK BlackBerry WebWorks The Ionic Framework
- 16. Target Platforms Amazon FireOS Google Android BlackBerry 10 Firefox OS Apple iOS Ubuntu Linux Microsoft Windows Phone 8
- 17. Development Platforms OS X All except Windows Phone / Windows Windows All except iOS Linux All except Windows Phone and iOS
- 18. PhoneGap Current release is 4.2 Node.js is a hard requirement since version 3.0 It is all command line instead of IDE Recommend not upgrading your app to a new version right away
- 19. How PhoneGap works? Most device APIs include an internal web browser PhoneGap uses this internal web browser as its app canvas It adds more features to the navigator via software which bridges the gap between the internal web and the device
- 20. The Hard Things Installation Knowing the difference between PhoneGap & Cordova Deciding what to do past hello, world
- 21. Node Package Manager npm is very popular in the open source community cross-platform coding standard storage site + discovery mechanism delivery mechanism used by phonegap/cordova
- 22. Let’s build an app, part 1a
- 23. Hello, world cordova create hello com.rnc.hello Hello cd hello cordova platform add browser --usegit cordova run browser
- 24. hooks Allows you to execute code at defined points in the Cordova application build process Example minify your JavaScript
- 25. platforms One directory for each device framework you support Because of the complexity involved in getting individual machines setup, we will demonstrate this but not actually work through it as an excercise
- 26. plugins Modular pieces of native code which give your app increased functionality Familiar Plugins console device dialogs inappbrowser
- 27. www Your app's root directory laid out as a set of sub-directories css img js index.html
- 28. config.xml Defines a widget Must be in root directory Actually defined by the W3C http://www.w3.org/TR/widgets/#configuration- document-0
- 29. Let’s build an app, part 1b
- 30. Adding a plugin Two important pieces of information how to install a plugin how to make it work http://plugins.cordova.io/#/package/ org.apache.cordova.camera cordova plugin add org.apache.cordova.camera
- 31. navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL}); function onSuccess(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData;} function onFail(message) { alert('Failed because: ' + message);}
- 32. Debugging Using the browser while developing Chrome remote for Android devices Safari remote for iOS devices Windows Phone winre
- 33. UI Options Roll Your Own jQuery / jQuery UI jQuery Mobile Bootstrap Chocolate Chip UI
- 34. Framework Options Roll Your Own AngularJS Knockout BackboneJS
- 35. Underscore A utility belt library for JavaScript Excellent at manipulating objects and collections About 6kb minified and compressed Required for Backbone apps
- 36. Backbone A MV* Framework Note: There are no controllers hence no ‘C’ More lightweight than Angular, Ember, or Knockout Requires jQuery and Underscore
- 37. Models The base object in Backbone Essentially a wrapper around a JavaScript object Use get and set command to access properties
- 38. Collections A collection of models Can associate a URL with a collection Backbone native support of RESTful API Can also use third party API
- 39. Views Backbone’s UI layer Also does much of what a controller would do in typical MVC
- 40. The Router The router controls application state In a web site it would control what is in the URL bar PhoneGap apps may lack a visible URL bar, but it still exists
- 41. Templates Templates render markup to the DOM in a cookie cutter fashion Especially good for render collections to a view Make it easier to create single page apps
- 42. Chocolate Chip UI A UI Framework akin to jQuery Mobile or even Bootstrap Does a great job of impersonating iOS, Android, and Windows Phone 8
- 43. Lists You will work a lot with lists in mobile apps In CC, lists will have the look and feel of the device Lists typically will need a bit of code to make them fully functional
- 44. Lists Lists have classes which enhance their looks Classes exists to indicate: Navigation to another page Navigation to a details page
- 45. Widgets CC uses a combo of its own stuff with HTML5 For example the Range Slider is simply an HTML5 input type=range But a switch is a combination of HTML, CSS3, and JavaScript
- 46. Look & Feel Switching the look and feel is easy, just change CSS files PhoneGap version 3+ automates the process
- 47. Look & Feel iOS: chui-ios-3.8.4.min.css Android 4+: chui-android-3.8.4.min.css Windows Phone 8: chui-win-3.8.4.min.css
- 48. Look & Feel PhoneGap’s merges folder one directory for each supported device Its contents will be copied and overwrite during the build command Name all of the css files identically Place in each appropriate folder
- 49. Let’s build an app, part 2
- 50. pg-twitter cordova create pg-twitter com.rnc.pgtwitter pg-twitter cd pg-twitter cordova platform add browser --usegit cordova run browser
- 51. merges directory Must be created by hand named after support platforms contents of the merge directory will be written to the www during build files/directories with the same name will be overwritten
- 52. Two Things Really Quick PhoneGap Build PhoneGap Developer App
- 56. Summary Speed of development Ease of development Cross-platform by design
- 57. Please rate this talk! http://spkr8.com/t/44241