View
227
Download
3
Category
Preview:
Citation preview
Cross-Platform Mobile Apps withHTML, JavaScript, and PhoneGap Christophe Coenraets@ccoenraets
Resources
@ccoenraets
http://coenraets.org
http://github.com/ccoenraets
ccoenrae@adobe.com
What?
3
Mobile Application Development Challenge
4
Samsung BadaWindows PhoneBlackBerry MobileBlackBerry QNXAndroidApple iOS Nokia
Objective-C Java NDK ActionScript J2ME C# C++ C+++ +
The “Gap”
§ Package HTML/JS/CSS assets as NativeApplication
§ Expose device capabilities as JavaScript APIsconsistent 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
8
http://phonegap.com/about/features
What if you need more?
§ PhoneGap is extensible with Plugins model that enables you to write your ownnative logic to access via JavaScript
§ All phonegap APIs are plugins
§ There are lots of open source plugins athttps://github.com/phonegap/phonegap-plugins
9
10
DEMO: What does a PhoneGap app look like?
Open Source
11
§ PhoneGap/Cordova was contributed to Apache by Adobe
§ You can get involved today!
http://incubator.apache.org/cordova/
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
18
DOM
Architecture
UI
Example: Backbone Directory
19http://github.com/ccoenraets/backbone-directory
Backbone.js Routing
20
Backbone.js Models and REST
21
Employee Directory RESTful API
HTTP Method URLGET api/employeesGET api/employees/1GET api/employees/1/reportsPOST api/employeesPUT api/employees/1DELETE 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
Recommended