Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets @ccoenraets
Resources @ccoenraets http://coenraets.org http://github.com/ccoenraets ccoenrae@adobe.com
What? 3
Mobile Application Development Challenge + + Objective-C Java NDK ActionScript J2ME C# C++ C++ Apple iOS Android BlackBerry QNX BlackBerry Mobile Windows Phone Nokia Samsung Bada 4
The “Gap” § Package HTML/JS/CSS assets as Native Application § Expose device capabilities as JavaScript APIs consistent across platforms 5
The “Gap” § PhoneGap is a “wrapper” and a “bridge” § PhoneGap is NOT : § A full-stack JavaScript framework § An architectural framework § A UI framework 6
PhoneGap works with any Framework 7
Access to Device Features http://phonegap.com/about/features 8
What if you need more? § PhoneGap is extensible with Plugins model that enables you to write your own native logic to access via JavaScript § All phonegap APIs are plugins § There are lots of open source plugins at https://github.com/phonegap/phonegap-plugins 9
DEMO: What does a PhoneGap app look like? 10
Open Source § PhoneGap/Cordova was contributed to Apache by Adobe § You can get involved today! http://incubator.apache.org/cordova/ 11
build.phonegap.com § Continuous deployment § No SDK required § GitHub compatible § Remote debugging
Debugging with Weinre
How? 14
Before
After: “Single Page App” <html> <head> <title>My Huge App</title> <script src="my-huge-app.js"></script> </head> </body><body> </html>
Characteristics of a Single Page App § Views are built dynamically § Templates to the rescue § History handled by # or push state § Data obtained through RESTful JSON, JSONP services § Structure / Patterns needed to handle complexity 17
Choosing a stack U I Architecture DOM 18
Example: Backbone Directory http://github.com/ccoenraets/backbone-directory 19
Backbone.js Routing 20
Backbone.js Models and REST 21
Employee Directory RESTful API HTTP Method URL GET api/employees GET api/employees/1 GET api/employees/1/reports POST api/employees PUT api/employees/1 DELETE api/employees/1 22
Backbone.js Views 23
Templates: Before 24
Templates: After § Check out Mustache.js, Underscore.js, Handlebar.js, etc 25
Resources @ccoenraets http://coenraets.org http://github.com/ccoenraets ccoenrae@adobe.com
Recommend
More recommend
