Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap

crickettachyphagiaΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 6 μήνες)

83 εμφανίσεις




Cross-Platform Mobile Apps
w
ith
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
4
Samsung
Bada
Windows Phone
BlackBerry Mobile
BlackBerry QNX
Android
Apple
iOS
Nokia
Objective-C
Java NDK
ActionScript
J2ME
C#
C++
C++
+
+


The “Gap”
§
Package
HTML/JS/CSS assets as
Native
Application
§
Expose
device capabilities
as JavaScript APIs
consistent 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
F
eatures
8
http://phonegap.com/about/
features



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



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
U
I



Example: Backbone Directory
19
http://
github.com
/
ccoenraets
/backbone-directory


Backbone.js
Routing
20


Backbone.js
Models and REST
21


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



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