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

1. §
Making High
Performance
PhoneGap Apps
How we made people think that
Snowbuddy was a native app
§

2. §
ABOUT US

3. §
We 3 js

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. 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. 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. 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. 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. snowbuddy
40,000+ users
Best new app
“Best apps
of 2014”
§

10. §
“Did you use swift or
objective-c?”

11. §
What we used

12. §
It’s Easy to
write bad javascript

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. §
Disclaimer
“The one true way”

15. §
Use a JS Framework
01

16. §
don’t reinvent
the wheel

17. §
A problem shared
is a problem solved

18. §
avoid Janky
animations
02

19. §
“Use css transitions”

20. §
.el {
top:0;
transition:200ms top;
}
.el.animated {
top:20px;
}

21. §
.el {
top:0;
transition:200ms top;
}
.el.animated {
top:20px;
}

22. §
.el {
top:0;
transition:200ms transform;
}
.el.animated {
transform:translate3d(0, 20px, 0);
}

23. §
The Dreaded
tap delay
03

24. §
300ms delay is *

25. ontap
ontouchstart
ontouchend
onclick
§

26. §
FastClick.attach(document.body);
github.com/ftlabs/fastclick
Fastclick

27. §
offline storage
04

28. §
localstorage
has its issues

29. §
let’s try the
local file system!

30. §
pouchdb
it’s awesome
pouchdb.com

31. var db = new PouchDB(
'myDB',
{
adapter: 'websql'
}
);
§
pouchdb

32. db.put({
_id: 'wmas',
awesome: true
});
§
pouchdb

33. db.get('wmas').then(function (doc) {
// handle doc
}).catch(function (err) {
console.log(err);
});
§
pouchdb

34. §
background tasks
05

35. §
updating the UI
when the app is in
the background

36. §
updating the UI
when the app is in
the background

37. document.addEventListener(
'pause',
onPause,
false
);
document.addEventListener(
'resume',
onResume,
false
);
§

38. §
Avoid memory leaks
06

39. §
Code reuse
=
element reuse

40. §
fully Remove media
from memory
img.src = 'spacer.gif';
video.src = '';

41. §
timeouts
and
intervals

42. §
timeouts
and
intervals

43. §
Test
Evaluate
Debug

44. §
safari dev tools ->
timelines

45. §
Chrome DEv tools ->
profiles

46. §
instruments ->
allocations

47. §
use crosswalk
07

48. §

49. §
crosswalk
it’s awesome
cordova plugin add
https://github.com/MobileChromeApps/cordova-plugin-crosswalk-webview.git

50. §
conclusion

51. §
It’s Easy to
write bad javascript

52. §
It’s fun to
write good javascript

53. §
THANKS
any questions?
@sydlawrence
sydlawrence@wemakeawesomesh.it