O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Building Mobile Apps
with PhoneGap and
Backbone
10 November 2013
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 ...
Who are you?
I am assuming you are familiar with web programming
and have some knowledge of JavaScript.
The End of HTML5 as a
Platform?
• Facebook mobile apps on iOS and Android
were originally using HTML5	


• Users complaine...
The Pieces
• PhoneGap	

• Backbone.js	

• jQuery Mobile
PhoneGap
“PhoneGap is an open source solution for
building cross-platform mobile apps with
standards-based Web technologie...
Backbone.js
“Backbone.js gives structure to web
applications by providing models with keyvalue binding and custom events, ...
jQuery Mobile
“A unified, HTML5-based user interface
system for all popular mobile device
platforms, built on the rock-soli...
PhoneGap
PhoneGap vs. Cordova
• Adobe owns the name PhoneGap	

• They open-sourced the project to the
Apache Foundation as Cordova	...
PhoneGap is not...
• a turnkey system for turning websites into
mobile apps	


• a way for non-developers to make mobile
a...
PhoneGap is not the
web

• The HTML, CSS, and JavaScript files are all
on the device	


• PhoneGap apps use the web mainly ...
Commands
• cordova create - create your app’s folder	

• cordova platform add - add a device	

• cordova build - creates t...
Source Code
• www - base source code	

• plugins - PhoneGap plugins	

• merges - device specific differences	

• platforms ...
PhoneGap wrapper
• Initializes itself	

• Creates a full screen browser view	

• Loads/executes the index.html file	

• Pro...
Backbone.js
JavaScript Sucks
• Has objects but no classes	

• No information hiding facilities 	

• No structure	

• jQuery made thing...
Order from chaos
• Backbone is a MV* framework	

• M - models	

• V - views	

• * - other stuff like collections and route...
Backbone Pieces
• models	

• collections 	

• views	

• router
Models
• The basic data object	

• Very flexible 	

• Built in functions
Collections
• Collections of model objects	

• Events for changes	

• Accepts a URL for RESTful API
3rd Party Collection
• Often you need data from a 3rd party	

• Backbone makes this simple	

• In many cases you can only ...
Views
• Render data the page	

• We use templates not string 	

• Backbones has templating engine built in	

• but we Hand...
The router
• URL based routes	

• Not for bookmarking but for state
maintenance	


• One router per app
jQuery Mobile
No UI Framework
• PhoneGap uses HTML/CSS for UI	

• Makes building app difficult	

• jQuery Mobile is one possible solution...
A UI Framework
• jQuery Mobile is a misunderstood project	

• Built on top of jQuery 	

• Like jQuery UI, but for mobile	
...
The Router Problem
• Backbone is being used to handle routing	

• jQuery Mobile by default handles routing	

• This is a p...
The Ready Problem
• A PhoneGap app shouldn’t start until the
“deviceready” event is received	


• A jQuery Mobile app shou...
Look & Feel
• jQuery Mobile looks iOS 6-ish	

• Not everyone likes that look	

• You can customize via ThemeRoller	

• Or ...
Resources
Próximos SlideShares
Carregando em…5
×

Building Mobile Apps with PhoneGap and Backbone

9.662 visualizações

Publicada em

Mobile is the future, but it is a lot of work to support all of the different device architectures out there. Is there an easier way? YES! PhoneGap, when combined with Backbone, it becomes a cool way to build apps which can run on nearly every popular mobile platform.

Publicada em: Tecnologia, Educação
  • Login to see the comments

Building Mobile Apps with PhoneGap and Backbone

  1. 1. Building Mobile Apps with PhoneGap and Backbone 10 November 2013
  2. 2. 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: rockncoder@gmail.com
  3. 3. Who are you? I am assuming you are familiar with web programming and have some knowledge of JavaScript.
  4. 4. 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
  5. 5. The Pieces • PhoneGap • Backbone.js • jQuery Mobile
  6. 6. 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/
  7. 7. Backbone.js “Backbone.js gives structure to web applications by providing models with keyvalue 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/

  8. 8. 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/

  9. 9. PhoneGap
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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)
  14. 14. Source Code • www - base source code • plugins - PhoneGap plugins • merges - device specific differences • platforms - generated device specific files
  15. 15. 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
  16. 16. Backbone.js
  17. 17. JavaScript Sucks • Has objects but no classes • No information hiding facilities • No structure • jQuery made things worse, not better • Backbone brings order to chaos
  18. 18. Order from chaos • Backbone is a MV* framework • M - models • V - views • * - other stuff like collections and router • but no controller
  19. 19. Backbone Pieces • models • collections • views • router
  20. 20. Models • The basic data object • Very flexible • Built in functions
  21. 21. Collections • Collections of model objects • Events for changes • Accepts a URL for RESTful API
  22. 22. 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
  23. 23. Views • Render data the page • We use templates not string • Backbones has templating engine built in • but we Handlebars.js
  24. 24. The router • URL based routes • Not for bookmarking but for state maintenance • One router per app
  25. 25. jQuery Mobile
  26. 26. No UI Framework • PhoneGap uses HTML/CSS for UI • Makes building app difficult • jQuery Mobile is one possible solution • jqMobi, Sencha, iUI, etc.
  27. 27. A UI Framework • jQuery Mobile is a misunderstood project • Built on top of jQuery • Like jQuery UI, but for mobile • Mobile/touch friendly website
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. Resources

×