SLIDE 1
Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap
Christophe Coenraets @ccoenraets
Resources
@ccoenraets http://coenraets.org http://github.com/ccoenraets ccoenrae@adobe.com
Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap - - PowerPoint PPT Presentation
Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap - - PowerPoint PPT Presentation
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 +
SLIDE 2
SLIDE 3
What?
3
SLIDE 4
Mobile Application Development Challenge
4
Samsung Bada Windows Phone BlackBerry Mobile BlackBerry QNX Android Apple iOS Nokia
Objective-C Java NDK ActionScript J2ME C# C++ C++
+ +
SLIDE 5
The “Gap”
§ Package HTML/JS/CSS assets as Native
Application
§ Expose device capabilities as JavaScript APIs
consistent across platforms
5
SLIDE 6
The “Gap”
§ PhoneGap is a “wrapper” and a “bridge” § PhoneGap is NOT:
§ A full-stack JavaScript framework § An architectural framework § A UI framework
6
SLIDE 7
PhoneGap works with any Framework
7
SLIDE 8
Access to Device Features
8
http://phonegap.com/about/features
SLIDE 9
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
SLIDE 10
10
DEMO: What does a PhoneGap app look like?
SLIDE 11
Open Source
11
§ PhoneGap/Cordova was contributed to Apache by Adobe § You can get involved today!
http://incubator.apache.org/cordova/
SLIDE 12
build.phonegap.com
§ Continuous deployment § No SDK required § GitHub compatible § Remote debugging
SLIDE 13
Debugging with Weinre
SLIDE 14
How?
14
SLIDE 15
Before
SLIDE 16
After: “Single Page App”
<html> <head> <title>My Huge App</title> <script src="my-huge-app.js"></script> </head> </body><body> </html>
SLIDE 17
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
SLIDE 18
Choosing a stack
18
DOM Architecture U I
SLIDE 19
Example: Backbone Directory
19
http://github.com/ccoenraets/backbone-directory
SLIDE 20
Backbone.js Routing
20
SLIDE 21
Backbone.js Models and REST
21
SLIDE 22
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
SLIDE 23
Backbone.js Views
23
SLIDE 24
Templates: Before
24
SLIDE 25
Templates: After
§ Check out Mustache.js, Underscore.js, Handlebar.js, etc
25
SLIDE 26
Resources
@ccoenraets http://coenraets.org http://github.com/ccoenraets ccoenrae@adobe.com