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