cross-platform mobile apps with html, javascript, and phonegap · § phonegap/cordova was...
TRANSCRIPT
![Page 1: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/1.jpg)
Cross-Platform Mobile Apps withHTML, JavaScript, and PhoneGap Christophe Coenraets@ccoenraets
![Page 3: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/3.jpg)
What?
3
![Page 4: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/4.jpg)
Mobile Application Development Challenge
4
Samsung BadaWindows PhoneBlackBerry MobileBlackBerry QNXAndroidApple iOS Nokia
Objective-C Java NDK ActionScript J2ME C# C++ C+++ +
![Page 5: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/5.jpg)
The “Gap”
§ Package HTML/JS/CSS assets as NativeApplication
§ Expose device capabilities as JavaScript APIsconsistent across platforms
5
![Page 6: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/6.jpg)
The “Gap”
§ PhoneGap is a “wrapper” and a “bridge”
§ PhoneGap is NOT:§ A full-stack JavaScript framework
§ An architectural framework
§ A UI framework
6
![Page 7: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/7.jpg)
PhoneGap works with any Framework
7
![Page 8: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/8.jpg)
Access to Device Features
8
http://phonegap.com/about/features
![Page 9: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/9.jpg)
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
![Page 10: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/10.jpg)
10
DEMO: What does a PhoneGap app look like?
![Page 11: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/11.jpg)
Open Source
11
§ PhoneGap/Cordova was contributed to Apache by Adobe
§ You can get involved today!
http://incubator.apache.org/cordova/
![Page 12: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/12.jpg)
build.phonegap.com
§ Continuous deployment
§ No SDK required
§ GitHub compatible
§ Remote debugging
![Page 13: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/13.jpg)
Debugging with Weinre
![Page 14: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/14.jpg)
How?
14
![Page 15: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/15.jpg)
Before
![Page 16: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/16.jpg)
After: “Single Page App”
<html><head> <title>My Huge App</title> <script src="my-huge-app.js"></script></head></body><body></html>
![Page 17: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/17.jpg)
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
![Page 18: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/18.jpg)
Choosing a stack
18
DOM
Architecture
UI
![Page 19: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/19.jpg)
Example: Backbone Directory
19http://github.com/ccoenraets/backbone-directory
![Page 20: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/20.jpg)
Backbone.js Routing
20
![Page 21: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/21.jpg)
Backbone.js Models and REST
21
![Page 22: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/22.jpg)
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
![Page 23: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/23.jpg)
Backbone.js Views
23
![Page 24: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/24.jpg)
Templates: Before
24
![Page 25: Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap · § PhoneGap/Cordova was contributed to Apache by Adobe ... Employee Directory RESTful API HTTP Method URL GET api/employees](https://reader036.vdocuments.mx/reader036/viewer/2022063007/5fba7f368bf6a259206ea859/html5/thumbnails/25.jpg)
Templates: After
§ Check out Mustache.js, Underscore.js, Handlebar.js, etc
25