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.
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. Who are you?
I am assuming you are familiar with web programming
and have some knowledge of JavaScript.
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
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. 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. 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/
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. 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. 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. 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)
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
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. Order from chaos
• Backbone is a MV* framework
• M - models
• V - views
• * - other stuff like collections and router
• but no controller
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. Views
• Render data the page
• We use templates not string
• Backbones has templating engine built in
• but we Handlebars.js
24. The router
• URL based routes
• Not for bookmarking but for state
maintenance
• One router per app
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. 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. 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. 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. 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