high performance phonegap apps
TRANSCRIPT
§
Making High Performance
PhoneGap AppsHow 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!
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
