- 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)
- Applescript to automate console open : https://gist.github.com/revolunet/bed17b9809fffa77b4b8 (works great with https://red-sweater.com/fastscripts/)
- debug your app from xcode to get native debugger and performance metrics
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...
- 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"/>
- 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)
- If you use Angular, track down every single
$digest
- Minimize CSS rules lookup time
- read this https://dl.dropboxusercontent.com/u/39519/talks/cssperf/index.html