Building mobile apps with PhoneGap and Backbone
6 likes3,572 views
HTML5 at one point held the promise of being the unifying platform for desktop and mobile devices. Then big name companies turned their backs on the platform in droves. But don't don't despair, HTML5 isn't dead, in fact it is still a great choice for many mobile applications. In this session, we will build a simple to understand but easy to enhance mobile app. We will use PhoneGap version 3.x, HTML5, CSS3, and JavaScript. While will be working on a Mac since it is required for iOS, users of other platforms should be able to follow along. The techniques show should also work with Windows Phone 8, Blackberry and other support PhoneGap platforms.
More Related Content
What's hot (20)
Viewers also liked (13)
Similar to Building mobile apps with PhoneGap and Backbone (20)
More from Troy Miles (20)
Recently uploaded (20)
Building mobile apps with PhoneGap and Backbone
- 1. Building Mobile Apps with PhoneGap & Backbone 28 January 2014
- 2. Who am I? Hi, I’m Troy. I have been developing software for over 30 years. For the last 12 years I have been focused on web, mobile web, and mobile development. I currently work at Kelley Blue Book as a senior software engineer. My opinions are my own. ! I can be reached [email protected]
- 3. Free mobile tutorials with source code @ therockncoder.blogspot.com
- 4. Want more? Follow me, new tutorials are announced on Twitter first: @therockncoder
- 5. Source code for my tutorials hosted on GitHub @ https://github.com/Rockncoder
- 6. Check out my videos: www.youtube.com/rockncoder
- 7. Agenda • A Quick & Dirty JavaScript Overview • What is PhoneGap? • Building PhoneGap Apps • Backbone • Underscore
- 8. Agenda • Models • Collections • Views • The Router • Templates • Chocolate Chip
- 9. Agenda • Lists • Widgets • Look and Feel • Google Maps • Debugging • Summary
- 11. JavaScript Best Practices • Avoid sloppy JavaScript • Avoid the Global Space • Encapsulate Code into Objects • Use Design Patterns
- 12. Avoid Sloppy JavaScript • Use “strict” mode • Always use ‘===’ & ‘!==’ • Code in JavaScript not C#, Java, Ruby, etc. • Use JSLint or JSHint
- 13. Avoid the Global Space • Minimize use of global variables • Use Name-spacing • Use anonymous/immediate functions when appropriate
- 14. Use Design Patterns • Singleton • Chaining • Revealing Module Structure • + many more
- 15. Functions • Functions are a first class type • Like other types they can be passed and assigned freely • Anonymous functions are used frequently
- 16. 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
- 17. 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
- 18. Deferred Objects • A rather new JavaScript concept • Used to register multiple callbacks • The app uses jQuery’s version
- 19. What is PhoneGap? • Created by Nitobi in 2009 at an Apple Event • Nitobi was acquired by Adobe • Open sourced as Apache Cordova • PhoneGap is only one implementation
- 20. Other Cordova Implementations • appMobi • Convertigo • Icenium (Telerik) • ViziApps • Worklight (IBM)
- 21. PhoneGap • Current release is 3.3 • 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
- 22. How it 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
- 23. Setting up your environment • Setup Device specific frameworks: • Install Xcode • Install Android Dev Kit • Install Node.js • Download Cordova CLI
- 24. Building PhoneGap Apps • cordova precedes all commands • cordova create • cordova
- 25. Underscore • A utility belt library for JavaScript • Excellent at manipulating objects and collections • About 5kb minified and compressed • Required for Backbone apps
- 26. Backbone • A MV* Framework • Note: There are no controllers hence no ‘C’ • More lightweight than Angular or Ember • Requires jQuery and Underscore
- 27. Models • The base object in Backbone • Essentially a wrapper around a JavaScript object • Use get and set command to access properties
- 28. Collections • A collection of models • Can associate a URL with a collection • Backbone native support of RESTful API • Can also use third party API
- 29. Views • Backbone’s UI layer • Also does much of what a controller would do in typical MVC
- 30. 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
- 31. 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
- 32. Chocolate Chip • A UI Framework akin to jQuery Mobile or even Bootstrap • Does a great job of impersonating iOS 7, Android 4+, and Windows Phone 8
- 33. 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
- 34. Lists • Lists have classes which enhance their looks • Classes exists to indicate: • Navigation to another page • Navigation to a details page
- 35. 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
- 36. Look and Feel • Switching the look and feel is easy, just change CSS files • PhoneGap version 3+ automates the process
- 37. Look and Feel • iOS 7: chui-ios-3.5.0.css • Android 4+: chui-android-3.5.0.css • Windows Phone 8: chui-win-3.5.0.css
- 38. Look and 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
- 39. Location & Maps
- 40. Location • Use HTML5 location services • Both location watching and current location used in the app • Recommend giving users an alternative if they prefer not sharing their location
- 41. Google Maps • Google Maps works on both iPhone and Android without code change • Google also provides reverse geocoding API • Reverse geocoding turns some part of an address into a lat/long
- 42. Debugging • No getting around it debugging PhoneGap apps suck • Best work around I have is console.log and using a browser • Some like the Ripple emulator
- 43. What We Learned • Some JavaScript Best Practice • How to use PhoneGap and Backbone to make mobile apps • How to use one codebase to support multiple devices • How to go from web to app
- 44. Links • http://jquery.com/ • http://documentcloud.github.io/backbone/ • http://www.chocolatechip-ui.com/ • https://developers.google.com/maps/ • http://blog.mediumequalsmessage.com/ promise-deferred-objects-in-javascript-pt1theory-and-semantics
- 45. The Rock n Coder • http://therockncoder.blogspot.com • http://www.youtube.com/user/rockncoder • https://github.com/Rockncoder • http://www.slideshare.net/rockncoder