© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Architecting a PhoneGap ApplicationChristophe Coenraets @ccoenraets
1
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 2
Christophe Coenraets@ccoenraetsh"p://coenraets.org
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Agenda
10 architectural principles
3
Hybrid Native
Skills HTML, JS, CSS Obj C, Java, C/C++
Cross Platform Yes No
Device APIs Yes Yes
Distribution App Store App Store
Updates App Store + Instant App Store
Performance Fast Faster
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Data Access
$.ajax({url: "/api/employee/3"}).done(function(employee) {//Do something with employee
});
8
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Abstract Data Access
dataAdapter.findById(3).done(function(employee) {//Do something with employee
});
10
! Common API! Asynchronous
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Pluggable Data Adapters
11
App
Data Interface
In-Memory LocalStorage WebSQL Ajax/JSON
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Bene!ts
! Experience !rst!
! Fast iterative prototyping
! Testable
12
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
#2Keep your application "browser runnable"
13
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Keep Your Application Browser Runnable
! Default JavaScript alert gives away the fact that your application is not native
! PhoneGap API:
navigator.notification.alert(message, alertCallback, [title], [buttonName])
... but that doesn’t work in your browser
! Solution: Build an abstraction layer!Display JavaScript alert when running in the browser!Display Native alert when running on device
14
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Noti!cation Interface
15
App
Noti!cation Interface
JavaScript Native
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
New School
<html>
<head>
<title>Huge App</title>
<script src="my-app.js"></script>
</head>
<body></body>
</html>
18
Multi-Page Single Page
# Pages Many One
UI Generation Tier Server Client
Languages Java, .NET, PHP, RoR, ... JavaScript
O!ine Support Limited Yes
Page Transitions Browser Developer
Performance Laggy Fast
App Assets Loaded Many Times One Time
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
#3Use Single Page Architecture
20
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Use Single Page Architecture
Bene"ts! Fast! Works o#ine ! Control over experience
Caveats! More Complex! Memory management! Modular Strategy
21
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Building HTML with JavaScript
var html = '<div class="header">' + '<a href="#" class="button-left">List</a>' + '<h1>Employee</h1>’ +'</div>' +'<div class="details">' + '<img src="pics/' + e.firstName + '_' + e.lastName + '.jpg"/>' + '<h1>' + e.firstName + ' ' + e.lastName + '</h1>' + '<h2>' + e.title + '</h2>' + '<ul class="list">' + '<li><a href="tel:' + e.officePhone + '">Call Office<br/>'
+ e.officePhone + '</a></li>' + '<li><a href="tel:' + e.cellPhone + '">Call Cell<br/>'
+ e.cellPhone + '</a></li>' + '<li><a href="sms:' + e.cellPhone + '">SMS<br/>'
+ e.cellPhone + '</a></li>' + '</ul>' +'</div>';
22
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Templates
<div class="header"> <a href="#" class="button-left">List</a> <h1>Employee</h1></div><div class="details"> <img src="pics/{{firstName}}_{{lastName}}.jpg"/> <h1>{{firstName}} {{lastName}}</h1> <h2>{{title}}</h2> <ul class="list"> <li><a href="tel:{{officePhone}}">Call Office<br/>{{officePhone}}</a></li> <li><a href="tel:{{cellPhone}}">Call Cell<br/>{{cellPhone}}</a></li> <li><a href="sms:{{cellPhone}}">SMS<br/>{{cellPhone}}</a></li> </ul></div>
23
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Templates
Bene"ts! Maintainable! Toolable! Separation of concerns
Examples! Mustache.js! Handlebars.js! Underscore.js
25
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Loading Templates
1. <script type="text/template"></script>
<script id="home-tpl" type="text/x-handlebars-template">
<span id="firstName">{{firstName}}</span>
<span id="lastName">{{lastName}}</span>
<span id="phone">{{phone}}</span>
</script>
2. Template loader
3. Require.js text module
4. Build (Grunt.js)
26
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
#5Provide Structure to Your Application
Using a MV* Architecture
28
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Model
var Employee = function() {
this.url = "/employee";
this.validate = function() {
};
});
29
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
View
var EmployeeView = function () {
this.initialize = function () {
};
this.render = function() {
};
}
30
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Controller
var JSONPAdapter = function(url) {
this.findById = function(id) { return $.ajax({url: url + "/" + id, dataType: "jsonp"}); }
this.findByName = function(searchKey) { return $.ajax({url: url + "?name=" + searchKey, dataType: "jsonp"}); }
}
31
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Topcoat Resources
h"p://topcoat.io
h"ps://github.com/topcoat/topcoat
35
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
#8Abstract Device Features
37
Interaction Mouse Touch
Noti"cation JavaScript Native
Storage online o#ine
Sensors unavailable available
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
#9Hide HTMLish Behaviors
39
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hide HTMLish Behaviors
!alert()
! -webkit-touch-callout: none;
! -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
40
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
#10Architect for Performance
41
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Architect for Performance
! Don't generate UI on the server! Don't wait for data to display the UI! Cache everything (data, selectors, precompiled templates, ...)! Use Hardware acceleration! Avoid click event's 300ms delay! Use CSS sprite sheets! Limit shadows and gradients! Avoid re!ows! Do you need that framework?! Test
42
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Summary
1. Abstract data access2. Keep Application browser runnable3. Use single page application4. Use templates5. Use MV* architecture6. Consider a framework7. Implement routing8. Abstract device features9. Hide HTMLish behaviors10. Architect for performance
43