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• aaron@developmentarc.com• developmentarc.com• pedanco.com• maqueapp.com