High Performance PhoneGap Apps
28 likes63,441 views
This document provides 7 tips for making high performance PhoneGap apps: 1. Use a JavaScript framework to avoid reinventing the wheel. 2. Avoid janky animations by using CSS transitions instead of JavaScript for animations. 3. Address the 300ms tap delay issue by using a library like FastClick. 4. Use a library like PouchDB for offline data storage and syncing instead of localStorage which has issues. 5. Handle updating the UI when the app is in the background using pause and resume events. 6. Avoid memory leaks by properly removing elements from memory and handling timeouts/intervals. 7. Use the Crosswalk plugin to improve performance.
High Performance PhoneGap Apps
- 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 Calvins 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 Whats 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 Thats 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 敬温霞 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. 則 Its 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 敬温霞
- 15. 則 Use a JS Framework 01
- 17. 則 A problem shared is a problem solved
- 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); }
- 24. 則 300ms delay is *
- 29. 則 lets try the local file system!
- 31. var db = new PouchDB( 'myDB', { adapter: 'websql' } ); 則 pouchdb
- 33. db.get('wmas').then(function (doc) { // handle doc }).catch(function (err) { console.log(err); }); 則 pouchdb
- 35. 則 updating the UI when the app is in the background
- 36. 則 updating the UI when the app is in the background
- 40. 則 fully Remove media from memory img.src = /slideshow/high-performance-phonegap-apps/48272462/& video.src = '';
- 44. 則 safari dev tools -> timelines
- 45. 則 Chrome DEv tools -> profiles
- 48. 則
- 49. 則 crosswalk its awesome cordova plugin add https://github.com/MobileChromeApps/cordova-plugin-crosswalk-webview.git
- 50. 則 conclusion
- 51. 則 Its Easy to write bad javascript
- 52. 則 Its fun to write good javascript