Download to read offline
Uploaded byDevelopmentArc LLC
Mobile native-hacks
This document provides 14 lessons and hacks for building native and mobile web applications using JavaScript. It discusses issues like architecting for multiple platforms and environments, structuring the codebase, detecting the platform, improving performance of animations through CSS transitions, handling garbage collection of images and HTML, supporting touch events, adding sound, and leveraging tools like PhoneGap Build. The tips aim to help developers apply their web skills to build applications that run on both desktop and mobile devices using a single codebase.
![Verbs pinkmoonpio[1]](https://cdn.slidesharecdn.com/ss_thumbnails/verbspinkmoonpio1-110510160253-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Mobile native-hacks
- 1. Hacks for Nativeand Mobile Web Applications Aaron Pedersen www.developmentarc.com www.maqueapp.com www.pedanco.com
- 2. Confession “Less about PhoneGapand more about mobile and desktop application development in JavaScript”
- 3.
- 4. 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)
- 5. Once upon atime… 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…
- 6. No problem! Using ourweb skills to build a native application
- 7.
- 8. A few issuesalong 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
- 9. Lessons && Hacks 13lessons and hacks to help you along the way
- 10. #1 Architecture: StructuringApplication • 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. #1 Architecture: StructuringApplication Require.js – Module Loader http://requirejs.org/ Backbone.js - Skelton view architecture (Views, Models/Collections, Events) http://backbonejs.org/ Handlebars– Javascript/html template engine http://handlebarsjs.com/
- 12. #1 Architecture: StructuringApplication • 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. #2 Architecture: AcrossMultiple 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
- 14. #2 Architecture: AcrossMultiple Environments
- 15. #3 Setting upyour 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. #4 Detecting YourEnvironment • 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)
- 17. #5 Detecting YourResolution
- 18. #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
- 19. #7 Slow Animations:Let Hardware do the Work
- 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. #8 Garbage Collection:Images
- 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.
- 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 • https://github.com/nervetattoo/backbone.touch
- 25. #11 Where arethe 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/
- 26. #12 Sound • HTML5 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!
- 27. #13 Use theFuture • 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
- 28. #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!
- 29. Thank you • Ifyou like food and like to complain, tell them about Aaron Pedersen • @aaronpedersen • aaron@developmentarc.com • developmentarc.com • pedanco.com • maqueapp.com