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 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…
8. 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
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
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. #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
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. #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)
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
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.
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
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 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/
26. #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!
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)
• 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
• If you like food and like to complain, tell them about
Aaron Pedersen
• @aaronpedersen
• aaron@developmentarc.com
• developmentarc.com
• pedanco.com
• maqueapp.com
