Architecting Phonegap Apps - Christophe Coenraetscoenraets.org/slides/MAX2013_Architecting_Phonegap_Apps.pdfUse Single Page Architecture Bene"ts!Fast!Works o#ine !Control over experience

© 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


Agenda

10 architectural principles

3

Web App

PhoneGap is a Wrapper

PhoneGap is a Bridge

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


Data Access

$.ajax({url: "/api/employee/3"}).done(function(employee) {//Do something with employee

});

8


#1Abstract Data Access

9


Abstract Data Access

dataAdapter.findById(3).done(function(employee) {//Do something with employee

});

10

! Common API! Asynchronous


Pluggable Data Adapters

11

App

Data Interface

In-Memory LocalStorage WebSQL Ajax/JSON


Bene!ts

! Experience !rst!

! Fast iterative prototyping

! Testable

12


#2Keep your application "browser runnable"

13


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


Noti!cation Interface

15

App

Noti!cation Interface

JavaScript Native

Architecting Web Apps


Old School

17


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


#3Use Single Page Architecture

20


Use Single Page Architecture

Bene"ts! Fast! Works o#ine ! Control over experience

Caveats! More Complex! Memory management! Modular Strategy

21


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


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


#4Use Templates

24


Templates

Bene"ts! Maintainable! Toolable! Separation of concerns

Examples! Mustache.js! Handlebars.js! Underscore.js

25


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


#5Provide Structure to Your Application

Using a MV* Architecture

28


Model

var Employee = function() {

this.url = "/employee";

this.validate = function() {

};

});

29


View

var EmployeeView = function () {

this.initialize = function () {

};

this.render = function() {

};

}

30


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


#6Consider Frameworks

32

Framework Landscape

DOM

Architecture

UI

Full stack Custom stack


Topcoat

34


Topcoat Resources

h"p://topcoat.io

h"ps://github.com/topcoat/topcoat

35


#7Routing

36


#8Abstract Device Features

37

Interaction Mouse Touch

Noti"cation JavaScript Native

Storage online o#ine

Sensors unavailable available


#9Hide HTMLish Behaviors

39


Hide HTMLish Behaviors

!alert()

! -webkit-touch-callout: none;

! -webkit-tap-highlight-color:rgba(0, 0, 0, 0);

40


#10Architect for Performance

41


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


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


Documents

Architecting Phonegap Apps - Christophe Coenraetscoenraets.org/slides/MAX2013_Architecting_Phonegap_Apps.pdfUse Single Page Architecture Bene"ts!Fast!Works o#ine !Control over experience