cross-platform mobile apps with html and phonegapgotocon.com/dl/goto-amsterdam-2012/slides/... ·...
TRANSCRIPT
![Page 1: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/1.jpg)
Cross-Platform Mobile Apps withHTML and PhoneGap
Christophe Coenraets@ccoenraets
![Page 3: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/3.jpg)
The Challenge
3
Samsung BadaWindows PhoneBlackBerry MobileBlackBerry QNXAndroidApple iOS Nokia
![Page 4: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/4.jpg)
The Challenge
3
Samsung BadaWindows PhoneBlackBerry MobileBlackBerry QNXAndroidApple iOS Nokia
![Page 5: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/5.jpg)
The Challenge
3
Samsung BadaWindows PhoneBlackBerry MobileBlackBerry QNXAndroidApple iOS Nokia
Objective-C Java NDK ActionScript J2ME C# C++ C++
![Page 6: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/6.jpg)
The Challenge
3
Samsung BadaWindows PhoneBlackBerry MobileBlackBerry QNXAndroidApple iOS Nokia
Objective-C Java NDK ActionScript J2ME C# C++ C+++ +
![Page 7: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/7.jpg)
From Mobile Sites to Mobile Apps
4
![Page 8: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/8.jpg)
From Mobile Sites to Mobile Apps
4
![Page 9: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/9.jpg)
The “Gap”
5
![Page 10: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/10.jpg)
The “Gap”
§ Package HTML/JS/CSS assets as Native Application
5
![Page 11: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/11.jpg)
The “Gap”
§ Package HTML/JS/CSS assets as Native Application
§ Expose device capabilities as JavaScript APIs consistent across platforms
5
![Page 12: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/12.jpg)
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
![Page 13: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/13.jpg)
PhoneGap works with any Framework
7
![Page 14: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/14.jpg)
Access to Device Features
8
http://phonegap.com/about/features
![Page 15: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/15.jpg)
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
![Page 16: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/16.jpg)
Open Source
10
§ PhoneGap/Cordova was contributed to Apache by Adobe
§ You can get involved today!
http://incubator.apache.org/cordova/
![Page 17: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/17.jpg)
11
DEMO: What does a PhoneGap app look like?
![Page 18: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/18.jpg)
Debugging with Weinre
![Page 19: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/19.jpg)
build.phonegap.com
§ Continuous deployment§ No SDK required§ GitHub compatible§ Remote debugging
![Page 20: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/20.jpg)
How do I architect a mobile HTML application?
![Page 21: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/21.jpg)
Old School
![Page 22: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/22.jpg)
Old School
UI generated at the server-side in PHP, JSP, ASP, RoR,
CF, ...
![Page 23: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/23.jpg)
New School
<html><head> <title>My Big App</title> <script src="my-big-app.js"></script></head><body></body></html>
![Page 24: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/24.jpg)
New School
<html><head> <title>My Big App</title> <script src="my-big-app.js"></script></head><body></body></html>
Single Page ApplicationUI built dynamically at the client-side in JavaScript
![Page 25: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/25.jpg)
17
![Page 26: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/26.jpg)
17
“The secret to building large apps is “never build large apps”
Justin Meyer, author JavaScriptMVCaaa
![Page 27: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/27.jpg)
Framework Landscape
18
DOM
Architecture
UI
![Page 28: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/28.jpg)
Example: Backbone Directory
19http://github.com/ccoenraets/backbone-directory
![Page 29: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/29.jpg)
Accessing Data
20
JSONJSONP
![Page 30: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/30.jpg)
RESTful API
URL HTTP Method Resultapi/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
![Page 31: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/31.jpg)
Model
Employee = Backbone.Model.extend({
urlRoot: "api/employees"
});
emp = new Employee({firstName: 'Joe', lastName: 'Smith'});
emp.save();
22
![Page 32: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/32.jpg)
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
![Page 33: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/33.jpg)
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
![Page 34: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/34.jpg)
Templates: Before
25
![Page 35: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/35.jpg)
Templates: After
26
![Page 36: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/36.jpg)
Templates: After
26
Check out Mustache, underscore.js, handlebar.js, HAML, …
![Page 37: Cross-Platform Mobile Apps with HTML and PhoneGapgotocon.com/dl/goto-amsterdam-2012/slides/... · Cross-Platform Mobile Apps with HTML and PhoneGap Christophe Coenraets @ccoenraets](https://reader030.vdocuments.mx/reader030/viewer/2022041016/5ec8f000df50fc74fd10e81b/html5/thumbnails/37.jpg)
Resources
@ccoenraets
http://coenraets.org
http://github.com/ccoenraets