Download - Mobile native-hacks
Hacks for Native and Mobile Web Applications
Aaron Pedersenwww.developmentarc.com
www.maqueapp.comwww.pedanco.com
Confession
“Less about PhoneGap and more about mobile and desktop application development in JavaScript”
The bio
What we build…
• Recent Enterprise-level web applications• AppNexus (Rails, CoffeeScript, scss) • Pedanco.com (Rails, CoffeeScript, scss) • Maqueapp.com (Flex)• DHAP Digitial (JavaScript, CSS)• Startup that will remain nameless (JavaScript, PhoneGap, CSS)
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 same code base”
We say…
No problem!
Using our web skills to build a native application
Well…
A few issues along the way
What 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 && Hacks
13 lessons and hacks to help you along the way
#1 Architecture: Structuring Application
• MVC that sh$t or just split up your code!• Each View is a JavaScript class• Have Models for each API call• Write as little HTML in your JavaScript as possible
#1 Architecture: Structuring Application
Require.js – Module Loaderhttp://requirejs.org/
Backbone.js - Skelton view architecture (Views, Models/Collections, Events)http://backbonejs.org/
Handlebars– Javascript/html template enginehttp://handlebarsjs.com/
#1 Architecture: Structuring Application
• MVC that sh$t• Each view is a JavaScript class• Have models for each API call• Write as little HTML in your JavaScript as possible
#2 Architecture: Across Multiple Environments
Require.js• Production vs. Development
• Development: loads each JavaScript file as it’s needed.• Allows for debugging• Allows for quicker development
• Production: compiles modules of JavaScript/CSS into single files• Minification• Uglify• http://requirejs.org/docs/optimization.html
• Mobile vs. Web vs. Production vs. Dev• RequireJS provides pragmas
• Build options to add/remove code based on build settings
#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
#6 Slow Animations: CSS Transitions
• Don’t use JavaScript animations• Use CSS where possible• JQuery Enhanced Animations
• https://github.com/benbarnett/jQuery-Animate-Enhanced• Converts normal jQuery animations into CSS equivalents
• left : using translate(x, y) or translate3d(x, y, z)• top : using translate(x, y) or translate3d(x, y, z)• right• bottom• opacity• width• height
#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!
#13 Use the Future
• JQuery 2.0• Lighter, faster, better
• No more IE 6/7/8 support (perfect for mobile!)• Custom builds (use native selectors vs. sizzle)
• https://github.com/jquery/jquery/#readme• http://projects.jga.me/jquery-builder/
• Still using JavaScript animations
Or• Zepto
• Go fast and lean!• Interchangeable with JQuery API (Backbone can use it)
• Warning: Might not work with jQuery plugins
#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 can test
• 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 about
Aaron Pedersen• @aaronpedersen• [email protected]• developmentarc.com• pedanco.com• maqueapp.com