Designing & Architecting
for PhoneGap & the Mobile Web

What is PhoneGap?

Mobile Apps with HTML, CSS & JS

How does PhoneGap work?

Build your UI with HTML, CSS & JavaScript

Access native functionality through PhoneGap

Package your app for distribution

Keep in Mind

  • Develop for the USER
  • Develop for maintainability & reuse

Old School Web Architecture

New School: Single Page Architecture


<html>
<head>
    <title>Huge App</title>
    <script src="my-app.js"></script>
</head>
<body></body>
</html>
  • Create UI in JavaScript
  • Add/remove from DOM as needed
Multi-Page Single-Page
UI Generation Tier Server-Side Client-Side
Language Java, .NET, PHP, RoR JavaScript
Offline Support Limited Yes
Page Transitions Browser Developer
Performance Laggy Fast

Templates

moustache.js, underscore.js, handlebars.js
<ul>
    {{users}}
        <li id="{{id}}">{{name}}</li>
    {{/users}}
</ul>

+

var users = [
        {id:1, name="John Doe"},
        {id:2, name="Jane Doe"},
        {id:3, name="Joe Smith"},
    ];
<ul>
        <li id="1">John Doe</li>
        <li id="1">Jane Doe</li>
        <li id="3">Joe Smith</li>
</ul>

OR

  • John Doe
  • Jane Doe
  • Joe Smith

Code Structure

  • Model
  • View
  • Controller

Consder a Framework

Optimize Data Transfer

consider lazy loading data

Abstract Components

Device Notifications

Data Storage

Handle Touch Correctly


body {
    /* prevent callout to copy image, etc when tap to hold */
    -webkit-touch-callout: none;            

    /* prevent webkit from resizing text to fit */
    -webkit-text-size-adjust: none;             

    /* prevent copy paste, to allow, change 'none' to 'text' */
    -webkit-user-select: none;                  
}

Touch Vs Click




fastclick.js
Use Hardware Accelleration
.page {
    transform:translate3d(0,0,0);
}

.left {
    transform:translate3d(-100%,0,0);
}

.transition {
    transition-duration: .25ms;
}
and use it responsibly!

Optimize for Performance!

Slow


$("#header a.back").on("click", clickHandler);
$("#header a.back").css("color", "white");
$("#header a.back").css("text-decoration", "none");
$("#header a.back").attr("href", "#");

Fast


var $backButton = $("#header a.back");
$backButton.on("click", clickHandler);
$backButton.css("color", "white");
$backButton.css("text-decoration", "none");
$backButton.attr("href", "#");

Slow


<li><img src="img/icon_home.png"/>Call Home</li>
<li><img src="img/icon_office.png"/>Call Office</li>
<li><img src="img/icon_cell.png"/>Call Cell</li>
<li><img src="img/icon_email.png"/>Email</li>
<li><img src="img/icon_sms.png"/>Text</li>
<li><img src="img/icon_map.png"/>Map</li>
<li><img src="img/icon_contact.png"/>Add Contact</li>

Fast

Slow

// Get data
$.ajax({url: "product/101"}).done(function(product) {
    // Display view
    displayView(product);
});

Fast

// Display view
displayView();
// Get data
$.ajax({url: "product/101"}).done(function(product) {
    // Update view
});

Slow


$('body').append('<ul id="list"></ul>');
for (var i = 1; i < 100; i++) {
    $('#list').append('<li>' + i + '</li>');
}

Fast


var list = '<ul>';
for (var i = 1; i < 100; i++) {
    list += '<li>' + i + '</li>';
}
list += '</ul>';
$('body').append(list);

Summary

  • Single Page Architecture
  • Use Templates
  • Structure Your Code
  • Optimize Data Transfer
  • Abstract Components
  • Optimize for Touch
  • Use Hardware Acceleration
  • Optimize For Performance

Andrew Trice

Technical Evangelist
Adobe Systems