Mobile native-hacks
-
Upload
developmentarc-llc -
Category
Documents
-
view
522 -
download
2
description
Transcript of Mobile native-hacks
![Page 1: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/1.jpg)
Hacks for Native and Mobile Web Applications
Aaron Pedersenwww.developmentarc.com
www.maqueapp.comwww.pedanco.com
![Page 2: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/2.jpg)
Confession
“Less about PhoneGap and more about mobile and desktop application development in JavaScript”
![Page 3: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/3.jpg)
The bio
![Page 4: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/4.jpg)
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)
![Page 5: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/5.jpg)
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…
![Page 6: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/6.jpg)
No problem!
Using our web skills to build a native application
![Page 7: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/7.jpg)
Well…
![Page 8: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/8.jpg)
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
![Page 9: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/9.jpg)
Lessons && Hacks
13 lessons and hacks to help you along the way
![Page 10: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/10.jpg)
#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
![Page 11: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/11.jpg)
#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/
![Page 12: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/12.jpg)
#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
![Page 13: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/13.jpg)
#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
![Page 14: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/14.jpg)
#2 Architecture: Across Multiple Environments
![Page 15: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/15.jpg)
#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’
![Page 16: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/16.jpg)
#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)
![Page 17: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/17.jpg)
#5 Detecting Your Resolution
![Page 18: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/18.jpg)
#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
![Page 19: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/19.jpg)
#7 Slow Animations: Let Hardware do the Work
![Page 20: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/20.jpg)
#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.
![Page 21: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/21.jpg)
#8 Garbage Collection: Images
![Page 22: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/22.jpg)
#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
![Page 23: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/23.jpg)
#9 Garbage Collection: HTML
![Page 24: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/24.jpg)
#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
![Page 25: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/25.jpg)
#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/
![Page 26: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/26.jpg)
#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!
![Page 27: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/27.jpg)
#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
![Page 28: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/28.jpg)
#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!
![Page 29: Mobile native-hacks](https://reader034.fdocuments.us/reader034/viewer/2022042613/5455c598b1af9f37608b4a13/html5/thumbnails/29.jpg)
Thank you
• If you like food and like to complain, tell them about
Aaron Pedersen• @aaronpedersen• [email protected]• developmentarc.com• pedanco.com• maqueapp.com