Your SlideShare is downloading. ×
0
Building Mobile Apps with
PhoneGap & Backbone
28 January 2014
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 we...
Free mobile tutorials with source
code @ therockncoder.blogspot.com
Want more? Follow me, new tutorials are
announced on Twitter first:
@therockncoder
Source code for my tutorials hosted on
GitHub @
https://github.com/Rockncoder
Check out my videos:
www.youtube.com/rockncoder
Agenda
• A Quick & Dirty JavaScript Overview 	

• What is PhoneGap?	

• Building PhoneGap Apps	

• Backbone	

• Underscore
Agenda
• Models	

• Collections	

• Views 	

• The Router	

• Templates	

• Chocolate Chip
Agenda
• Lists	

• Widgets	

• Look and Feel	

• Google Maps	

• Debugging	

• Summary
Quick & Dirty
JavaScript
JavaScript Best
Practices
• Avoid sloppy JavaScript	

• Avoid the Global Space	

• Encapsulate Code into Objects	

• Use D...
Avoid Sloppy JavaScript
• Use “strict” mode	

• Always use ‘===’ & ‘!==’	

• Code in JavaScript not C#, Java, Ruby, etc.	
...
Avoid the Global Space
• Minimize use of global variables	

• Use Name-spacing	

• Use anonymous/immediate functions when
...
Use Design Patterns
• Singleton	

• Chaining	

• Revealing Module Structure
• + many more
Functions
• Functions are a first class type	

• Like other types they can be passed and
assigned freely	


• Anonymous fun...
Objects
• Objects are some what like Key/Value
dictionaries in other languages	


• The Key can be anything when wrapped i...
Events
• Events allow for excellent separation of
concerns	


• You can listen for system events or	

• Trigger and respon...
Deferred Objects
• A rather new JavaScript concept	

• Used to register multiple callbacks	

• The app uses jQuery’s versi...
What is PhoneGap?
• Created by Nitobi in 2009 at an Apple
Event	


• Nitobi was acquired by Adobe	

• Open sourced as Apac...
Other Cordova
Implementations
• appMobi	

• Convertigo	

• Icenium (Telerik)	

• ViziApps	

• Worklight (IBM)
PhoneGap
• Current release is 3.3	

• Node.js is a hard requirement since version
3.0	


• It is all command line instead ...
How it Works?
• Most device APIs include an internal web
browser	


• PhoneGap uses this internal web browser
as its app c...
Setting up your
environment
• Setup Device specific frameworks:	

• Install Xcode	

• Install Android Dev Kit	

• Install N...
Building PhoneGap
Apps
• cordova precedes all commands	

• cordova create	

• cordova
Underscore
• A utility belt library for JavaScript	

• Excellent at manipulating objects and
collections	


• About 5kb mi...
Backbone
• A MV* Framework	

• Note: There are no controllers hence no
‘C’	


• More lightweight than Angular or Ember	

•...
Models
• The base object in Backbone	

• Essentially a wrapper around a JavaScript
object	


• Use get and set command to ...
Collections
• A collection of models	

• Can associate a URL with a collection	

• Backbone native support of RESTful API	...
Views
• Backbone’s UI layer	

• Also does much of what a controller would
do in typical MVC
The Router
• The router controls application state	

• In a web site it would control what is in the
URL bar	


• PhoneGap...
Templates
• Templates render markup to the DOM in a
cookie cutter fashion	


• Especially good for render collections to a...
Chocolate Chip
• A UI Framework akin to jQuery Mobile or
even Bootstrap	


• Does a great job of impersonating iOS 7,
Andr...
Lists
• You will work a lot with lists in mobile apps	

• In CC, lists will have the look and feel of
the device	


• List...
Lists
• Lists have classes which enhance their
looks	


• Classes exists to indicate:	

• Navigation to another page	

• N...
Widgets
• CC uses a combo of its own stuff with
HTML5	


• For example the Range Slider is simply an
HTML5 input type=rang...
Look and Feel
• Switching the look and feel is easy, just
change CSS files	


• PhoneGap version 3+ automates the
process
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
Look and Feel
• PhoneGap’s merges folder 	

• one directory for each supported device	

• Its contents will be copied and ...
Location & Maps
Location
• Use HTML5 location services	

• Both location watching and current
location used in the app	


• Recommend givi...
Google Maps
• Google Maps works on both iPhone and
Android without code change	


• Google also provides reverse geocoding...
Debugging	

• No getting around it debugging PhoneGap
apps suck	


• Best work around I have is console.log and
using a br...
What We Learned
• Some JavaScript Best Practice	

• How to use PhoneGap and Backbone to
make mobile apps	


• How to use o...
Links
• http://jquery.com/ 	

• http://documentcloud.github.io/backbone/	

• http://www.chocolatechip-ui.com/	

• https://...
The Rock n Coder
• http://therockncoder.blogspot.com	

• http://www.youtube.com/user/rockncoder	

• https://github.com/Roc...
Upcoming SlideShare
Loading in...5
×

Building mobile apps with PhoneGap and Backbone

2,432

Published on

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.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,432
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
50
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Building mobile apps with PhoneGap and Backbone"

  1. 1. Building Mobile Apps with PhoneGap & Backbone 28 January 2014
  2. 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 rockncoder@gmail.com
  3. 3. Free mobile tutorials with source code @ therockncoder.blogspot.com
  4. 4. Want more? Follow me, new tutorials are announced on Twitter first: @therockncoder
  5. 5. Source code for my tutorials hosted on GitHub @ https://github.com/Rockncoder
  6. 6. Check out my videos: www.youtube.com/rockncoder
  7. 7. Agenda • A Quick & Dirty JavaScript Overview • What is PhoneGap? • Building PhoneGap Apps • Backbone • Underscore
  8. 8. Agenda • Models • Collections • Views • The Router • Templates • Chocolate Chip
  9. 9. Agenda • Lists • Widgets • Look and Feel • Google Maps • Debugging • Summary
  10. 10. Quick & Dirty JavaScript
  11. 11. JavaScript Best Practices • Avoid sloppy JavaScript • Avoid the Global Space • Encapsulate Code into Objects • Use Design Patterns
  12. 12. Avoid Sloppy JavaScript • Use “strict” mode • Always use ‘===’ & ‘!==’ • Code in JavaScript not C#, Java, Ruby, etc. • Use JSLint or JSHint
  13. 13. Avoid the Global Space • Minimize use of global variables • Use Name-spacing • Use anonymous/immediate functions when appropriate
  14. 14. Use Design Patterns • Singleton • Chaining • Revealing Module Structure • + many more
  15. 15. Functions • Functions are a first class type • Like other types they can be passed and assigned freely • Anonymous functions are used frequently
  16. 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. 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. 18. Deferred Objects • A rather new JavaScript concept • Used to register multiple callbacks • The app uses jQuery’s version
  19. 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. 20. Other Cordova Implementations • appMobi • Convertigo • Icenium (Telerik) • ViziApps • Worklight (IBM)
  21. 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. 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. 23. Setting up your environment • Setup Device specific frameworks: • Install Xcode • Install Android Dev Kit • Install Node.js • Download Cordova CLI
  24. 24. Building PhoneGap Apps • cordova precedes all commands • cordova create • cordova
  25. 25. Underscore • A utility belt library for JavaScript • Excellent at manipulating objects and collections • About 5kb minified and compressed • Required for Backbone apps
  26. 26. Backbone • A MV* Framework • Note: There are no controllers hence no ‘C’ • More lightweight than Angular or Ember • Requires jQuery and Underscore
  27. 27. Models • The base object in Backbone • Essentially a wrapper around a JavaScript object • Use get and set command to access properties
  28. 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. 29. Views • Backbone’s UI layer • Also does much of what a controller would do in typical MVC
  30. 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. 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. 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. 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. 34. Lists • Lists have classes which enhance their looks • Classes exists to indicate: • Navigation to another page • Navigation to a details page
  35. 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. 36. Look and Feel • Switching the look and feel is easy, just change CSS files • PhoneGap version 3+ automates the process
  37. 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. 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. 39. Location & Maps
  40. 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. 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. 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. 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. 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. 45. The Rock n Coder • http://therockncoder.blogspot.com • http://www.youtube.com/user/rockncoder • https://github.com/Rockncoder • http://www.slideshare.net/rockncoder
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×