This document summarizes YUI's approach to mobile web development. It discusses implementing features like capability-based loading, transitions, touch events, and scroll views that work across mobile and desktop browsers. It presents YUI 3's features for mobile development, including abstracting differences in touch and mouse gestures. The document advocates developing using front-end principles of progressive enhancement to ensure code works on all browsers, both mobile and desktop.

1. A phone, a tablet and a
laptop walk into a bar...
YUI’s take on mobile web development
tablet
laptop
desktop
server
refrigerator
Monday, December 20, 2010

2. 1. Mobile and the philosophy of F2E
2. YUI 3 and the mobile web
a. Capability-based loading
b. Transitions
c. Intrinsic support for Touch events
d. ScrollView
e. DD Touch support
3. Conclusion
Monday, December 20, 2010

3. Mobile and the philosophy of
F2E
Monday, December 20, 2010

4. Monday, December 20, 2010

5. Monday, December 20, 2010

6. Monday, December 20, 2010

7. Monday, December 20, 2010

8. Monday, December 20, 2010

9. What we love about this evolution*
The web is expanding its reach to
new people and places
These are (mostly) modern, capable browsers
What F2Es do becomes more valuable
*It’s so shiny
Monday, December 20, 2010

10. The Aren’t
Mobile Specific
Monday, December 20, 2010

11. The Features Aren’t
Mobile Specific
Monday, December 20, 2010

12. The Constraints Aren’t
Mobile Specific
Monday, December 20, 2010

13. Monday, December 20, 2010

14. Touch
Gestures
Monday, December 20, 2010

15. Touch
Gestures
Transitions
Offline Cache
History
Monday, December 20, 2010

16. Monday, December 20, 2010

17. k-weight
run-time performance
screen real estate
Monday, December 20, 2010

18. The Environment
Is (Still) Not Homogeneous
Monday, December 20, 2010

19. • Body text
Monday, December 20, 2010

20. • Body text
“All 10 mobile WebKits I’ve identified so far are subtly or
wildly different.”
“Out of 19 tested WebKits, no two are exactly the same.”
“This is not consistency; it’s thinly veiled chaos.”
Monday, December 20, 2010

21. • Body text
Monday, December 20, 2010

22. Monday, December 20, 2010

23. OK for docking stations (maybe)
Not OK for the web
"Anyone who slaps a 'this page is best viewed with
Browser X' label on a Web page appears to be yearning
for the bad old days, before the Web, when you had
very little chance of reading a document written on
another computer, another word processor, or another
network."
-- Tim Berners-Lee in Technology Review, July 1996
Monday, December 20, 2010

24. "Anyone who slaps a 'this page is best viewed with
Browser X' label on a Web page appears to be yearning
for the bad old days, before the Web, when you had
very little chance of reading a document written on
another computer, another word processor, or another
network."
-- Tim Berners-Lee in Technology Review, July 1996
Monday, December 20, 2010

25. Monday, December 20, 2010

26. Monday, December 20, 2010

27. Monday, December 20, 2010

28. Monday, December 20, 2010

29. Monday, December 20, 2010

30. YUI 3
Monday, December 20, 2010

31. YUI 3
Monday, December 20, 2010

32. YUI 3
Monday, December 20, 2010

33. YUI 3
Monday, December 20, 2010

34. Reach Maintenance Time
to
Market
Monday, December 20, 2010

35. YUI 3.2.0, our first step
Monday, December 20, 2010

36. YUI 3.2.0
• Capability-based loading
• Transitions
• Touch/Mouse Gesture Abstractions
• ScrollView Widget
• Touch support for Drag and Drop
• LocalStorage support in DataSource
• HTML 5 support in History
Monday, December 20, 2010

37. Loading
Seed
• Small upfront download
• Free dependency resolution
Manual
• Single blocking request
• Manage your own dependencies
Monday, December 20, 2010

38. Capability Driven
Manual
use(“selector-native”, “transition-native”)
Loader
use(“dom-style”)
ie: “dom-style”, “dom-style-ie”
!ie: “dom-style”
Monday, December 20, 2010

39. And once you have it there...
Offline Cache It
Monday, December 20, 2010

40. Transitions
Tedious
• node.style.WebkitTransitionProperty = 'left, top'
• node.style.WebkitTransitionDuration = '1s, 2s'
• node.style.WebkitTransitionTimingFunction = 'ease-out, ease-in'
• node.style.top = ‘100px’
• node.style.left = ‘200px’
Monday, December 20, 2010

41. Transitions
Cross-Browser Support
• Vendor Prefixes
-webkit-transition-property: -webkit-transform
-moz-transition-property: -moz-transform
• But, still only partial A-Grade support
Monday, December 20, 2010

42. YUI Transitions
node.transition({
left: {
duration: 1,
easing: 'ease-out',
value: ‘200px’
},
top: {
duration: 2,
easing: 'ease-in',
value: ‘100px’
}
});
Monday, December 20, 2010

43. YUI Transitions
Y.Transition.fx.fadeOut = {
opacity:0,
easing: “ease-out”
};
myNode.transition(“fadeOut”)
Monday, December 20, 2010

44. Touch Support
DragDrop ScrollView
mouse touch mouse touch
Monday, December 20, 2010

45. Touch Support
DragDrop ScrollView
mouse touch mouse touch
Gestures
Monday, December 20, 2010

46. Touch Support
DragDrop ScrollView
mouse touch mouse touch
Gestures
move
mouse touch
Monday, December 20, 2010

47. Touch Support
DragDrop ScrollView
Gestures
move flick
mouse touch mouse touch
Monday, December 20, 2010

48. Touch Support
DragDrop ScrollView
move move
Gestures
move flick
mouse touch mouse touch
Monday, December 20, 2010

49. Touch Support
DragDrop ScrollView
move move flick
Gestures
move flick
mouse touch mouse touch
Monday, December 20, 2010

50. [ demos ]
Monday, December 20, 2010

51. • Abstraction layers provide future compatibility
• Code once, use anywhere
• F2E principles and practices still apply
• Supporting mobile browsers makes YUI better for all
browsers
Monday, December 20, 2010

52. Working Together
Monday, December 20, 2010

53. YUI Gallery
http://yuilibrary.com/gallery
200
150
100
50
02/2010 03/2010 04/2010 0
05/2010 06/2010 07/2010
Modules
Monday, December 20, 2010

54. Satyen Desai
sdesai@yahoo-inc.com
YUI
Monday, December 20, 2010