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

60,186 views

Published on

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

Published in: Mobile
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×