Hacks for Native and Mobile WebApplicationsAaron Pedersenwww.developmentarc.comwww.maqueapp.comwww.pedanco.com
Once upon a time…Client comes to us and asks us to“Use our web skills to build a native application”Oh and“it needs to work on desktop and tablet web with the samecode base”We say…
No problem!Using our web skills to build a native application
A few issues along the wayWhat were the issues?• Architecting a web application like an application• How to structure your application for multiple developers• How to structure your app to run across multiple platforms• Mobile specific features• How to detect platform?• Detect display resolution?• Mobile vs. Web• Sound• Touch events• Performance• Animations were slow!!!!• Garbage collection
Lessons && Hacks13 lessons and hacks to help you along the way
#2 Architecture: Across Multiple Environments
#3 Setting up your Project Folder Structure• Keep your code in a source folder• Build (via require.js) to a different folders• Example• app-source/• app/• app-native/• PhoneGap• Use PhoneGap Build whenever possible• When you can’t. Keep your code out of XCode!!!!• Symlink your www directory to ‘app-native’
#4 Detecting Your Environment• Phonegap• device.name• http://docs.phonegap.com/en/2.7.0/cordova_device_device.md.html#Device• Web/Mobile web…Get a script!• https://gist.github.com/lerivin/4393058• Provides• Browser• OS• isMobile• isTouch• isNative• Viewport (width/height)• Resolution• isHighResolution (see next tip)
#5 Detecting Your Resolution
#7 Slow Animations: Let Hardware do the Work
#8 Garbage Collection: Images• If you add and remove lots of images. Clean them up!• Before removing• Clear src tag• Clear background-image• *Some people say to destroy the src attribute.• *Others say to replace the src, with a spacer gif.
#8 Garbage Collection: Images
#9 Garbage Collection: HTML• Clean up your HTML or you will pay!• Don’t just replace html()• Know the difference from detach() and remove()• detach() removes element from DOM• Useful when you are going to reuse elements• remove() removed element from DOM, along with all data and events• Use when discarding elements for good
#9 Garbage Collection: HTML
#10 Click vs. Touch• Click is slow on mobile• 300+ millisecond delay• Backbone• Override Backbone’s delegateEvent function• If mobile, replace ‘click’ with ‘touchstart’• Use a plugin• https://github.com/nervetattoo/backbone.touch
#11 Where are the gestures?• Where’s my swipes!• Mobile only has• touchstart• touchend• JQuery Mobile has the gestures• swipe, swipeLeft, swipeRight, tap, etc…• Get events with no components by using a custom build• Clone via https://github.com/jquery/jquery-mobile• Follow build instructions• https://github.com/jquery/jquery-mobile/blob/master/README.md• Use Builder• http://jquerymobile.com/download-builder/
#12 Sound• HTML 5 sound• HTML 5 sound is like video, lots of formats• We used• http://buzz.jaysalvat.com/• Lesson learned, audio can’t auto-play!• Must have user interaction• And you can’t fake it with a jQuery click• Phonegap: Use native sound API• Can auto-play!
#14 PhoneGap Build• Use Phonegap Build whenever you can.• Phone Gap Build – https://build.phonegap.com/• Build Config - http://aj-software.com/configap/• Does not require you to build XCode (iOS) project• Does not require you to build Android development environment• Does not require you to build BlackBerry environment• But….• Make sure you test on the device as you develop!• Make the app work as a web application in your devices browser so you cantest• Ignore what I said above and create XCode, Android, BlackBerry , etc…environment and run their simulators and/or deploy to your device.• ALWAYS Test on your device!
Thank you• If you like food and like to complain, tell them aboutAaron Pedersen• @aaronpedersen• email@example.com• developmentarc.com• pedanco.com• maqueapp.com