22. Mobile has
conventions
too
Sunday, March 11, 12
23. Mobile has
conventions
too
Sunday, March 11, 12
24. TouchEvent
• touchstart - fires once
• touchmove - fires continuously
• touchend - fires once
Sunday, March 11, 12
25. The touches Array
• You only get one on Android
• You get up to 11 on iOS
• Each touch gives you position
information, and sometimes scale
Sunday, March 11, 12
27. iOS Developer
Library
http://bit.ly/iOS-guide
Sunday, March 11, 12
28. Making Gestures Work
• Prioritize user feedback
• Use hardware acceleration
• Manage your memory
Sunday, March 11, 12
29. Prioritize User-feedback
• Don’t do any loading during gestures
• Treat the DOM as write-only (do your
own math)
• When at all possible, use css
transitions
Sunday, March 11, 12
30. Write-Only DOM
• DOM touches are really expensive
• You know where everything is
• Use matrix transforms to queue up
positions
Sunday, March 11, 12
32. Snap back/snap
forward
• Keep track of last position, use
transitions with easing to snap back
• Pick a swipe distance threshold, use
that to snap forward (ontouchend)
• If the user is gesturing, the element
must be moving
Sunday, March 11, 12
33. A Word about scrolling
• Use native if at all possible:
• -webkit-overflow-scrolling: touch;
• If not, use a library to simulate
momentum scroll (iScroll 4,
Scrollability)
Sunday, March 11, 12
39. It’s Not That Hard!
transform: Translate
matrix(1, 0, 0, 1, 10, 10);
Scale
Sunday, March 11, 12
40. With Hardware
Acceleration... (matrix3d)
[
[1,0,0,0],
[0,1,0,0],
[0,0,1,0],
[tx,ty,tz,1]
]
Sunday, March 11, 12
41. Transforms keep
complex state
without DOM reads
Sunday, March 11, 12
42. What is happening?
• Determine Center of the touch points
• Determine the scale factor
(touch.scale)
• Scale the element by the scale
factor, with the center of the touch
points as the scale center
Sunday, March 11, 12
57. Remember
Progressive Enhancement?
Sunday, March 11, 12
58. Progressive Enhancement
• Feature Detect
• Add transitions, don’t depend on them
• Gesture interaction is an enhancement,
clicks should still work
• Be able to disable features per user-
agent, if necessary
Sunday, March 11, 12
60. The dumbest thing
that works
Webkit
Browser with
UA Spoofing
Sunday, March 11, 12
61. Weinre
Remote
webkit
debugger.
http://phonegap.github.com/weinre/
Sunday, March 11, 12
62. Internet Sharing +
Charles Proxy
• Watch HTTP traffic
• Add breakpoints in ajax requests
• Serve web pages to your phone from
your computer
Sunday, March 11, 12
63. Adobe Shadow
• Wrapper for Wienre
• Neat
• Has some limitations
Sunday, March 11, 12
72. Swiping Process
• Event Listener on top level for touch
events
• Only visible nodes move via
translate3d
• Rebuild next/previous happens when
movement stops.
Sunday, March 11, 12
73. Performance Tricks
• Aggressive Pruning
• Clean off css transforms/transitions
• Write-only DOM.
• Do as little as possible during swipes
Sunday, March 11, 12
74. Frustrating
Limitations
• Retina screen is huge, device
memory is small
• Hardware acceleration is a crash
festival
• Fighting automatic optimization
http://bit.ly/apple-image-size-restrictions
Sunday, March 11, 12
