Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
§
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
deb...
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 i...
Standing 

Novation
Exhibited at The Tate Modern, June 2014
Exhibited in The Barbican, August 2013
Hack the Barbican South...
UEFA Champions 

League
Custom made screens built around 

a giant statue in the centre of Lisbon
displaying content from ...
Samsung
Shoreditch

Studio
“An awesome digital representation of a classic record store”
“Combining music and tech in the ...
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 Of...
§
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
Upcoming SlideShare
Loading in …5
×

High Performance PhoneGap Apps

57,053 views

Published on

I gave a talk at PhonGap Day EU about simple performance tweaks and improvements

Published in: Mobile

High Performance PhoneGap Apps

  1. 1. § Making High Performance PhoneGap Apps How we made people think that Snowbuddy was a native app §
  2. 2. § ABOUT US
  3. 3. § We 3 js
  4. 4. 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 §
  5. 5. 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 §
  6. 6. 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. §
  7. 7. 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. §
  8. 8. 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. §
  9. 9. snowbuddy 40,000+ users Best new app “Best apps of 2014” §
  10. 10. § “Did you use swift or objective-c?”
  11. 11. § What we used
  12. 12. § It’s Easy to write bad javascript
  13. 13. § 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
  14. 14. § Disclaimer “The one true way”
  15. 15. § Use a JS Framework 01
  16. 16. § don’t reinvent the wheel
  17. 17. § A problem shared is a problem solved
  18. 18. § avoid Janky animations 02
  19. 19. § “Use css transitions”
  20. 20. § .el { top:0; transition:200ms top; } .el.animated { top:20px; }
  21. 21. § .el { top:0; transition:200ms top; } .el.animated { top:20px; }
  22. 22. § .el { top:0; transition:200ms transform; } .el.animated { transform:translate3d(0, 20px, 0); }
  23. 23. § The Dreaded tap delay 03
  24. 24. § 300ms delay is *
  25. 25. ontap ontouchstart ontouchend onclick §
  26. 26. § FastClick.attach(document.body); github.com/ftlabs/fastclick Fastclick
  27. 27. § offline storage 04
  28. 28. § localstorage has its issues
  29. 29. § let’s try the local file system!
  30. 30. § pouchdb it’s awesome pouchdb.com
  31. 31. var db = new PouchDB( 'myDB', { adapter: 'websql' } ); § pouchdb
  32. 32. db.put({ _id: 'wmas', awesome: true }); § pouchdb
  33. 33. db.get('wmas').then(function (doc) { // handle doc }).catch(function (err) { console.log(err); }); § pouchdb
  34. 34. § background tasks 05
  35. 35. § updating the UI when the app is in the background
  36. 36. § updating the UI when the app is in the background
  37. 37. document.addEventListener( 'pause', onPause, false ); document.addEventListener( 'resume', onResume, false ); §
  38. 38. § Avoid memory leaks 06
  39. 39. § Code reuse = element reuse
  40. 40. § fully Remove media from memory img.src = 'spacer.gif'; video.src = '';
  41. 41. § timeouts and intervals
  42. 42. § timeouts and intervals
  43. 43. § Test Evaluate Debug
  44. 44. § safari dev tools -> timelines
  45. 45. § Chrome DEv tools -> profiles
  46. 46. § instruments -> allocations
  47. 47. § use crosswalk 07
  48. 48. §
  49. 49. § crosswalk it’s awesome cordova plugin add https://github.com/MobileChromeApps/cordova-plugin-crosswalk-webview.git
  50. 50. § conclusion
  51. 51. § It’s Easy to write bad javascript
  52. 52. § It’s fun to write good javascript
  53. 53. § THANKS any questions? @sydlawrence sydlawrence@wemakeawesomesh.it

×