Building Mobile Apps with PhoneGap and Backbone
-
date post
18-Oct-2014 -
Category
Technology
-
view
5.741 -
download
1
description
Transcript of Building Mobile Apps with PhoneGap and Backbone
![Page 1: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/1.jpg)
Building Mobile Apps with PhoneGap and
Backbone10 November 2013
![Page 2: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/2.jpg)
Who am I?Hi, I am Troy. I have fun as a full stack programmer. I develop using ASP.NET MVC or Node.js on the backend and the web or mobile up front. !
I can be reached at: [email protected]
![Page 3: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/3.jpg)
Who are you?I am assuming you are familiar with web programming and have some knowledge of JavaScript.
![Page 4: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/4.jpg)
The End of HTML5 as a Platform?
• Facebook mobile apps on iOS and Android were originally using HTML5
• Users complained about performance
• In 2012, Facebook switch to native apps
• The pundits announced the end of HTML5 as a mobile platform
![Page 5: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/5.jpg)
The Pieces
• PhoneGap
• Backbone.js
• jQuery Mobile
![Page 6: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/6.jpg)
PhoneGap“PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.” http://phonegap.com/about/faq/
![Page 7: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/7.jpg)
Backbone.js“Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.”http://documentcloud.github.io/backbone/
![Page 8: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/8.jpg)
jQuery Mobile “A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”http://jquerymobile.com/
![Page 9: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/9.jpg)
PhoneGap
![Page 10: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/10.jpg)
PhoneGap vs. Cordova
• Adobe owns the name PhoneGap
• They open-sourced the project to the Apache Foundation as Cordova
• For most cases Cordova is pronounced PhoneGap
![Page 11: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/11.jpg)
PhoneGap is not...
• a turnkey system for turning websites into mobile apps
• a way for non-developers to make mobile apps
• a way to bypass any mobile app store
• easy
![Page 12: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/12.jpg)
PhoneGap is not the web
• The HTML, CSS, and JavaScript files are all on the device
• PhoneGap apps use the web mainly to upload/download data
![Page 13: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/13.jpg)
Commands
• cordova create - create your app’s folder
• cordova platform add - add a device
• cordova build - creates the project folders
• cordova run - compile & deploy (Android only)
![Page 14: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/14.jpg)
Source Code
• www - base source code
• plugins - PhoneGap plugins
• merges - device specific differences
• platforms - generated device specific files
![Page 15: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/15.jpg)
PhoneGap wrapper
• Initializes itself
• Creates a full screen browser view
• Loads/executes the index.html file
• Provides a “deviceready” event to HTML
• Provides a way for HTML to bridge gap separating it from the device side
![Page 16: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/16.jpg)
Backbone.js
![Page 17: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/17.jpg)
JavaScript Sucks
• Has objects but no classes
• No information hiding facilities
• No structure
• jQuery made things worse, not better
• Backbone brings order to chaos
![Page 18: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/18.jpg)
Order from chaos
• Backbone is a MV* framework
• M - models
• V - views
• * - other stuff like collections and router
• but no controller
![Page 19: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/19.jpg)
Backbone Pieces
• models
• collections
• views
• router
![Page 20: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/20.jpg)
Models
• The basic data object
• Very flexible
• Built in functions
![Page 21: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/21.jpg)
Collections
• Collections of model objects
• Events for changes
• Accepts a URL for RESTful API
![Page 22: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/22.jpg)
3rd Party Collection
• Often you need data from a 3rd party
• Backbone makes this simple
• In many cases you can only implement the GET verb
• Use the parse() method to intercept the call and clean the data
![Page 23: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/23.jpg)
Views
• Render data the page
• We use templates not string
• Backbones has templating engine built in
• but we Handlebars.js
![Page 24: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/24.jpg)
The router
• URL based routes
• Not for bookmarking but for state maintenance
• One router per app
![Page 25: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/25.jpg)
jQuery Mobile
![Page 26: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/26.jpg)
No UI Framework
• PhoneGap uses HTML/CSS for UI
• Makes building app difficult
• jQuery Mobile is one possible solution
• jqMobi, Sencha, iUI, etc.
![Page 27: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/27.jpg)
A UI Framework
• jQuery Mobile is a misunderstood project
• Built on top of jQuery
• Like jQuery UI, but for mobile
• Mobile/touch friendly website
![Page 28: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/28.jpg)
The Router Problem
• Backbone is being used to handle routing
• jQuery Mobile by default handles routing
• This is a problem
• To solve, we turn off JQM’s router
![Page 29: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/29.jpg)
The Ready Problem
• A PhoneGap app shouldn’t start until the “deviceready” event is received
• A jQuery Mobile app shouldn’t start until the “pageinit” event is received
• A PhoneGap/jQuery Mobile app needs to wait for both
![Page 30: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/30.jpg)
Look & Feel
• jQuery Mobile looks iOS 6-ish
• Not everyone likes that look
• You can customize via ThemeRoller
• Or use a canned look & feel
• The merges directory is best spot to device specific files
![Page 31: Building Mobile Apps with PhoneGap and Backbone](https://reader034.fdocuments.net/reader034/viewer/2022051608/54425621b1af9f310a8b4607/html5/thumbnails/31.jpg)
Resources