Mobile native-hacks


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile native-hacks

  1. 1. Hacks for Native and Mobile WebApplicationsAaron
  2. 2. Confession“Less about PhoneGap and more about mobile and desktopapplication development in JavaScript”
  3. 3. The bio
  4. 4. What we build…• Recent Enterprise-level web applications• AppNexus (Rails, CoffeeScript, scss)• (Rails, CoffeeScript, scss)• (Flex)• DHAP Digitial (JavaScript, CSS)• Startup that will remain nameless (JavaScript, PhoneGap, CSS)
  5. 5. 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…
  6. 6. No problem!Using our web skills to build a native application
  7. 7. Well…
  8. 8. 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
  9. 9. Lessons && Hacks13 lessons and hacks to help you along the way
  10. 10. #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
  11. 11. #1 Architecture: Structuring ApplicationRequire.js – Module Loader - Skelton view architecture (Views,Models/Collections, Events)– Javascript/html template engine
  12. 12. #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
  13. 13. #2 Architecture: Across Multiple EnvironmentsRequire.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•• Mobile vs. Web vs. Production vs. Dev• RequireJS provides pragmas• Build options to add/remove code based on build settings
  14. 14. #2 Architecture: Across Multiple Environments
  15. 15. #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’
  16. 16. #4 Detecting Your Environment• Phonegap••• Web/Mobile web…Get a script!•• Provides• Browser• OS• isMobile• isTouch• isNative• Viewport (width/height)• Resolution• isHighResolution (see next tip)
  17. 17. #5 Detecting Your Resolution
  18. 18. #6 Slow Animations: CSS Transitions• Don’t use JavaScript animations• Use CSS where possible• JQuery Enhanced Animations•• 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
  19. 19. #7 Slow Animations: Let Hardware do the Work
  20. 20. #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.
  21. 21. #8 Garbage Collection: Images
  22. 22. #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
  23. 23. #9 Garbage Collection: HTML
  24. 24. #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•
  25. 25. #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• Follow build instructions•• Use Builder•
  26. 26. #12 Sound• HTML 5 sound• HTML 5 sound is like video, lots of formats• We used•• 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!
  27. 27. #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)••• Still using JavaScript animationsOr• Zepto• Go fast and lean!• Interchangeable with JQuery API (Backbone can use it)• Warning: Might not work with jQuery plugins
  28. 28. #14 PhoneGap Build• Use Phonegap Build whenever you can.• Phone Gap Build –• Build Config -• 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!
  29. 29. Thank you• If you like food and like to complain, tell them aboutAaron Pedersen• @aaronpedersen••••