SLIDE 1
Cross-Platform Mobile Apps with HTML and PhoneGap Christophe - - PowerPoint PPT Presentation
Cross-Platform Mobile Apps with HTML and PhoneGap Christophe - - PowerPoint PPT Presentation
Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets Resources @ccoenraets http://coenraets.org http://github.com/ccoenraets ccoenrae@adobe.com The Challenge Apple iOS Android BlackBerry QNX BlackBerry
SLIDE 2
SLIDE 3
The Challenge
3
Samsung Bada Windows Phone BlackBerry Mobile BlackBerry QNX Android Apple iOS Nokia
SLIDE 4
The Challenge
3
Samsung Bada Windows Phone BlackBerry Mobile BlackBerry QNX Android Apple iOS Nokia
SLIDE 5
The Challenge
3
Samsung Bada Windows Phone BlackBerry Mobile BlackBerry QNX Android Apple iOS Nokia
Objective-C Java NDK ActionScript J2ME C# C++ C++
SLIDE 6
The Challenge
3
Samsung Bada Windows Phone BlackBerry Mobile BlackBerry QNX Android Apple iOS Nokia
Objective-C Java NDK ActionScript J2ME C# C++ C++
+ +
SLIDE 7
From Mobile Sites to Mobile Apps
4
SLIDE 8
From Mobile Sites to Mobile Apps
4
SLIDE 9
The “Gap”
5
SLIDE 10
The “Gap”
§ Package HTML/JS/CSS assets as Native
Application
5
SLIDE 11
The “Gap”
§ Package HTML/JS/CSS assets as Native
Application
§ Expose device capabilities as JavaScript
APIs consistent across platforms
5
SLIDE 12
PhoneGap
§ PhoneGap is a “wrapper” and a “bridge” § PhoneGap is NOT:
§ A full-stack JavaScript framework § An architectural framework § A UI framework § A runtime
6
SLIDE 13
PhoneGap works with any Framework
7
SLIDE 14
Access to Device Features
8
http://phonegap.com/about/features
SLIDE 15
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 16
Open Source
10
§ PhoneGap/Cordova was contributed to Apache by Adobe § You can get involved today!
http://incubator.apache.org/cordova/
SLIDE 17
11
DEMO: What does a PhoneGap app look like?
SLIDE 18
Debugging with Weinre
SLIDE 19
build.phonegap.com
§ Continuous deployment § No SDK required § GitHub compatible § Remote debugging
SLIDE 20
How do I architect a mobile HTML application?
SLIDE 21
Old School
SLIDE 22
Old School
UI generated at the server- side in PHP, JSP, ASP, RoR, CF, ...
SLIDE 23
New School
<html> <head> <title>My Big App</title> <script src="my-big-app.js"></script> </head> <body></body> </html>
SLIDE 24
New School
<html> <head> <title>My Big App</title> <script src="my-big-app.js"></script> </head> <body></body> </html>
Single Page Application UI built dynamically at the client-side in JavaScript
SLIDE 25
17
SLIDE 26
17
“The secret to building large apps is “never build large apps”
Justin Meyer, author JavaScriptMVCaaa
SLIDE 27
Framework Landscape
18
DOM Architecture UI
SLIDE 28
Example: Backbone Directory
19
http://github.com/ccoenraets/backbone- directory
SLIDE 29
Accessing Data
20
JSON JSONP
SLIDE 30
RESTful API
URL HTTP Method Result api/employees GET Get all employees api/employees/1 GET Get employee #1 api/employees/1/ reports GET Get reports of employee #1 api/employees POST Add employee api/employees/1 PUT Modify employee api/employees/1 DELETE Delete employee
21
SLIDE 31
Model
Employee = Backbone.Model.extend({ urlRoot: "api/employees" }); emp = new Employee({firstName: 'Joe', lastName: 'Smith'}); emp.save();
22
SLIDE 32
View
EmployeeView = Backbone.View.extend({ template: _.template($('#employee-tpl').html()), initialize: function () { this.render(); }, events: { "click .save": "save" }, render: function () { $(this.el).html(this.template(this.model.toJSON())); }, save: function () { this.model.save({firstName: $('#firstName').val()}); } });
23
SLIDE 33
Router
Router = Backbone.Router.extend({ routes: { "" : "list", "employees/:id" : "details” }, list: function() { $('#list').html('<div>Employee List</div>'); }, details: function(id) { $('#details').html('<div>Employee Details</div>'); } });
24
SLIDE 34
Templates: Before
25
SLIDE 35
Templates: After
26
SLIDE 36
Templates: After
26
Check out Mustache, underscore.js, handlebar.js, HAML, …
SLIDE 37