SlideShare a Scribd company logo
§
Making High
Performance
PhoneGap Apps
How we made people think that
Snowbuddy was a native app
§
§
ABOUT US
§
We 3 js
Calvin Harris
18 Months App
Top 5 iOS Music App on the App Store
26% CTR to buy the album, pre-orders helped the album
debut at #1 in the Dance charts
Featured by both Apple & Google and coined “a piece of
art from a Digital Rights Management point of view”
We decided to give Calvin’s album
away for free, but with a twist.
You had to be dancing to listen to
the music.
mobile OF THE DAY
Finalist
§
NOW What’s 

That Song
Over 1 Million games played after less than 2 weeks
Over 300,000 users after less than 3 weeks
#2 iOS App across all apps (iPhone & iPad)
Featured by Facebook & Parse
An iPhone & iPad song 

quiz game for NOW 

That’s What I Call Music
§
Standing 

Novation
Exhibited at The Tate Modern, June 2014
Exhibited in The Barbican, August 2013
Hack the Barbican South Place Hotel Award Winner
An interactive physical digital 

art installation. A serene moment 

in a vibrant digital space.
§
UEFA Champions 

League
Custom made screens built around 

a giant statue in the centre of Lisbon
displaying content from fans from all
over the world and visualizing team
support, lineups and game information.
§
Social content and data
visualizations for the UEFA
Champions League Final.
§
Samsung
Shoreditch

Studio
“An awesome digital representation of a classic record store”
“Combining music and tech in the simplest possible way”
NFC triggered digital turntable.
Walk in, tap a record sleeve, 

play a song… simple.
§
snowbuddy
40,000+ users
Best new app
“Best apps
of 2014”
§
§
“Did you use swift or
objective-c?”
§
What we used
§
It’s Easy to
write bad javascript
§
7 tips for high
performance
phonegap apps
01 Use a JS Framework
02 Avoid Janky Animations
03 The Dreaded Tap Delay
04 Offline Syncing
05 Background Tasks
06 Avoid Memory Leaks
07 Use CrossWalk
§
Disclaimer
“The one true way”
§
Use a JS Framework
01
§
don’t reinvent
the wheel
§
A problem shared
is a problem solved
§
avoid Janky
animations
02
§
“Use css transitions”
§
.el {
top:0;
transition:200ms top;
}
.el.animated {
top:20px;
}
§
.el {
top:0;
transition:200ms top;
}
.el.animated {
top:20px;
}
§
.el {
top:0;
transition:200ms transform;
}
.el.animated {
transform:translate3d(0, 20px, 0);
}
§
The Dreaded
tap delay
03
§
300ms delay is *
ontap
ontouchstart
ontouchend
onclick
§
§
FastClick.attach(document.body);
github.com/ftlabs/fastclick
Fastclick
§
offline storage
04
§
localstorage
has its issues
§
let’s try the
local file system!
§
pouchdb
it’s awesome
pouchdb.com
var db = new PouchDB(
'myDB',
{
adapter: 'websql'
}
);
§
pouchdb
db.put({
_id: 'wmas',
awesome: true
});
§
pouchdb
db.get('wmas').then(function (doc) {
// handle doc
}).catch(function (err) {
console.log(err);
});
§
pouchdb
§
background tasks
05
§
updating the UI
when the app is in
the background
§
updating the UI
when the app is in
the background
document.addEventListener(
'pause',
onPause,
false
);
document.addEventListener(
'resume',
onResume,
false
);
§
§
Avoid memory leaks
06
§
Code reuse
=
element reuse
§
fully Remove media
from memory
img.src = 'spacer.gif';
video.src = '';
§
timeouts
and
intervals
§
timeouts
and
intervals
§
Test
Evaluate
Debug
§
safari dev tools ->
timelines
§
Chrome DEv tools ->
profiles
§
instruments ->
allocations
§
use crosswalk
07
§
§
crosswalk
it’s awesome
cordova plugin add
https://github.com/MobileChromeApps/cordova-plugin-crosswalk-webview.git
§
conclusion
§
It’s Easy to
write bad javascript
§
It’s fun to
write good javascript
§
THANKS
any questions?
@sydlawrence
sydlawrence@wemakeawesomesh.it

More Related Content

Similar to High Performance PhoneGap Apps

Gaming Update October '11
Gaming Update October '11Gaming Update October '11
Gaming Update October '11
Advance A/S
 
9.5 Group 3
9.5 Group 39.5 Group 3
9.5 Group 3
scorkery
 
The creative internet: 106 things
The creative internet: 106 things The creative internet: 106 things
The creative internet: 106 things
Shane Smith
 
C2C Rough Draft 2
C2C Rough Draft 2C2C Rough Draft 2
C2C Rough Draft 2
katelynkcox
 
Portfolio of Nikolaj Fremming, Creative Director & Hyper Island teacher
Portfolio of Nikolaj Fremming, Creative Director & Hyper Island teacherPortfolio of Nikolaj Fremming, Creative Director & Hyper Island teacher
Portfolio of Nikolaj Fremming, Creative Director & Hyper Island teacher
Nikolaj Fremming
 
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략
Seo Jinho
 
Xbox App Dev 5. Design for TV
Xbox App Dev 5. Design for TVXbox App Dev 5. Design for TV
Xbox App Dev 5. Design for TV
Windows Developer
 
Digital Content: How by Google Business Group Khulna
Digital Content: How by Google Business Group KhulnaDigital Content: How by Google Business Group Khulna
Digital Content: How by Google Business Group Khulna
Khan Tanjeel Ahmed
 
C2C slides
C2C slidesC2C slides
C2C slides
katelynkcox
 
Planning Chat for Scale by Predicting a Two-Way Conversation
Planning Chat for Scale by Predicting a Two-Way ConversationPlanning Chat for Scale by Predicting a Two-Way Conversation
Planning Chat for Scale by Predicting a Two-Way Conversation
Online News Association
 
iTunes Ecology; a Media Futures case study
iTunes Ecology; a Media Futures case studyiTunes Ecology; a Media Futures case study
iTunes Ecology; a Media Futures case study
digital wellbeing labs
 
Dahlheim & Sjöqvist Selected Cases
Dahlheim & Sjöqvist Selected CasesDahlheim & Sjöqvist Selected Cases
Dahlheim & Sjöqvist Selected Cases
Pelle Sjöqvist
 
Holler Book
Holler BookHoller Book
Holler Book
Michael Hill
 
Havas Sports & Entertainment Germany Review of 2011 and 2012 predictions
Havas Sports & Entertainment Germany Review of 2011 and 2012 predictionsHavas Sports & Entertainment Germany Review of 2011 and 2012 predictions
Havas Sports & Entertainment Germany Review of 2011 and 2012 predictions
Havas Sports & Entertainment
 
Ignition five 07.11.11 (2)
Ignition five 07.11.11 (2)Ignition five 07.11.11 (2)
Ignition five 07.11.11 (2)
Omd Ireland Ignition Department
 
Disrupting disruption
Disrupting disruptionDisrupting disruption
Disrupting disruption
Martin Lee
 
Disrupting Disruption
Disrupting DisruptionDisrupting Disruption
Disrupting Disruption
Martin Lee
 
[2C3]Developing context-aware applications
[2C3]Developing context-aware applications[2C3]Developing context-aware applications
[2C3]Developing context-aware applications
NAVER D2
 
The near future of real web applications
The near future of real web applicationsThe near future of real web applications
The near future of real web applications
X.commerce
 
The Pixel Lab 2014_Loc Dao_Lessons Learned In Interactive Documentary
The Pixel Lab 2014_Loc Dao_Lessons Learned In Interactive DocumentaryThe Pixel Lab 2014_Loc Dao_Lessons Learned In Interactive Documentary
The Pixel Lab 2014_Loc Dao_Lessons Learned In Interactive Documentary
power to the pixel
 

Similar to High Performance PhoneGap Apps (20)

Gaming Update October '11
Gaming Update October '11Gaming Update October '11
Gaming Update October '11
 
9.5 Group 3
9.5 Group 39.5 Group 3
9.5 Group 3
 
The creative internet: 106 things
The creative internet: 106 things The creative internet: 106 things
The creative internet: 106 things
 
C2C Rough Draft 2
C2C Rough Draft 2C2C Rough Draft 2
C2C Rough Draft 2
 
Portfolio of Nikolaj Fremming, Creative Director & Hyper Island teacher
Portfolio of Nikolaj Fremming, Creative Director & Hyper Island teacherPortfolio of Nikolaj Fremming, Creative Director & Hyper Island teacher
Portfolio of Nikolaj Fremming, Creative Director & Hyper Island teacher
 
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략
 
Xbox App Dev 5. Design for TV
Xbox App Dev 5. Design for TVXbox App Dev 5. Design for TV
Xbox App Dev 5. Design for TV
 
Digital Content: How by Google Business Group Khulna
Digital Content: How by Google Business Group KhulnaDigital Content: How by Google Business Group Khulna
Digital Content: How by Google Business Group Khulna
 
C2C slides
C2C slidesC2C slides
C2C slides
 
Planning Chat for Scale by Predicting a Two-Way Conversation
Planning Chat for Scale by Predicting a Two-Way ConversationPlanning Chat for Scale by Predicting a Two-Way Conversation
Planning Chat for Scale by Predicting a Two-Way Conversation
 
iTunes Ecology; a Media Futures case study
iTunes Ecology; a Media Futures case studyiTunes Ecology; a Media Futures case study
iTunes Ecology; a Media Futures case study
 
Dahlheim & Sjöqvist Selected Cases
Dahlheim & Sjöqvist Selected CasesDahlheim & Sjöqvist Selected Cases
Dahlheim & Sjöqvist Selected Cases
 
Holler Book
Holler BookHoller Book
Holler Book
 
Havas Sports & Entertainment Germany Review of 2011 and 2012 predictions
Havas Sports & Entertainment Germany Review of 2011 and 2012 predictionsHavas Sports & Entertainment Germany Review of 2011 and 2012 predictions
Havas Sports & Entertainment Germany Review of 2011 and 2012 predictions
 
Ignition five 07.11.11 (2)
Ignition five 07.11.11 (2)Ignition five 07.11.11 (2)
Ignition five 07.11.11 (2)
 
Disrupting disruption
Disrupting disruptionDisrupting disruption
Disrupting disruption
 
Disrupting Disruption
Disrupting DisruptionDisrupting Disruption
Disrupting Disruption
 
[2C3]Developing context-aware applications
[2C3]Developing context-aware applications[2C3]Developing context-aware applications
[2C3]Developing context-aware applications
 
The near future of real web applications
The near future of real web applicationsThe near future of real web applications
The near future of real web applications
 
The Pixel Lab 2014_Loc Dao_Lessons Learned In Interactive Documentary
The Pixel Lab 2014_Loc Dao_Lessons Learned In Interactive DocumentaryThe Pixel Lab 2014_Loc Dao_Lessons Learned In Interactive Documentary
The Pixel Lab 2014_Loc Dao_Lessons Learned In Interactive Documentary
 

More from Syd Lawrence

Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014
Syd Lawrence
 
Mobile Apps with Web Tech
Mobile Apps with Web TechMobile Apps with Web Tech
Mobile Apps with Web Tech
Syd Lawrence
 
It's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you thinkIt's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you think
Syd Lawrence
 
Rewriting The History Books
Rewriting The History BooksRewriting The History Books
Rewriting The History Books
Syd Lawrence
 
Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)
Syd Lawrence
 
Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)
Syd Lawrence
 
Mobile web app development
Mobile web app developmentMobile web app development
Mobile web app development
Syd Lawrence
 
Javascript Development
Javascript DevelopmentJavascript Development
Javascript Development
Syd Lawrence
 
Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
Syd Lawrence
 
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Syd Lawrence
 

More from Syd Lawrence (10)

Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014
 
Mobile Apps with Web Tech
Mobile Apps with Web TechMobile Apps with Web Tech
Mobile Apps with Web Tech
 
It's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you thinkIt's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you think
 
Rewriting The History Books
Rewriting The History BooksRewriting The History Books
Rewriting The History Books
 
Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)
 
Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)
 
Mobile web app development
Mobile web app developmentMobile web app development
Mobile web app development
 
Javascript Development
Javascript DevelopmentJavascript Development
Javascript Development
 
Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
 
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
 

High Performance PhoneGap Apps