- create a single page javascript application
- be as low-level as possible to be able to control performance (=minimize layers)
- masterize your dev/build environnement so you can work/play nicely
- Open safari console in development menu with simulator or attached devices (enable debug in ipad/safari dev options)
- debug your app from xcode to get native debugger and performance metrics
- use ios-deploy to inspect the device files, ex:
ios-deploy --download=/Library/Caches/xxx --bundle_id x.y.z --to ./ios
To prevent massive app recompilation and wasted time, build your app once with <content src="http://192.168.0.11:9888" /> in config.xml and point it to your computer dev server, in the platforms/ios/www folder.
Then use cordova prepare to update the sources and Cmd+R in Safari debugger to reload the new version, or... livereload :)
Or use this before_prepare hook : https://gist.github.com/revolunet/328193b350a056d730a5
Define your plugin dependencies with commit-ish reference in config.xml : <plugin name="nl.x-services.plugins.socialsharing" spec="https://github.com/revolunet/SocialSharing-PhoneGap-Plugin.git#f7e938cf06e1705727b501b4e6e184b535445341" />
cordova prepare is supposed to reinstall missing plugins but can fail silently for some reasons...
if you download/install troubles, hard-reset your plugins : https://gist.github.com/revolunet/e19158a13df962a3df5e
- use
cordova plugin add --link ../path/to/awesome-plugin/to create a symbolic link to your project dev folder - plugins dependencies can have specs too
plugin.xml:<dependency id="cordova-plugin-dialogs" url="https://github.com/revolunet/cordova-plugin-dialogs" commit="c70eb82adc8d11889ab47c01a686f692f60b1623"/>
cordova platform add https://github.com/revolunet/cordova-android#custom-branch
- Defines appropriate cordova hooks : http://cordova.apache.org/docs/en/edge/guide_appdev_hooks_index.md.html#Hooks%20Guide
- Wrap your javascript plugins calls to be able to test your whole app easily from desktop or any device
- Use fixed semver (
npm config set save-exact = true)
- Prevent DOM manipulation
- Minimize AJAX
- Profile with Chrome devtools timeline
- Profile with Safari "show compositing layout" options (GPU)
- Prevent GPU overlow which can explode your app : https://medium.com/@MerciMichel/don-t-abuse-enabling-gpu-acceleration-on-ios-95520da2428
- Use Safari "Show RenderLayer tree" to debug GPU issues
- If you use Angular, track down every single
$digest, for example with https://github.com/bahmutov/code-snippets/blob/master/ng-monitor-digest-cycle.js - Minimize CSS rules lookup time
- read this https://dl.dropboxusercontent.com/u/39519/talks/cssperf/index.html
- You can use diawi.com to send demo apps to registered devices via a simple email link
- Name your test builds with the git commit SHA so you can easily have the associated changelog on github/user/project/commits/SHA
- Drop your builds with SHA names in a dropbox folder, use IFTTT to warn you in a slack channel with a link to IPA and to the changelog :)
- Get connected devices UUID :
system_profiler SPUSBDataType | sed -n -E -e '/(iPhone|iPad)/,/Serial/s/ *Serial Number: *(.+)/\1/p'