YUIConf 2010, YUI3 and Mobile Web Development
-
Upload
sdezzi -
Category
Technology
-
view
4.146 -
download
1
description
Transcript of YUIConf 2010, YUI3 and Mobile Web Development
YUI’s take on mobile web development
A phone, a tablet and a laptop walk into a bar...
tabletlaptop
refrigeratorserverdesktop
Monday, December 20, 2010
1. Mobile and the philosophy of F2E
2. YUI 3 and the mobile web
a. Capability-based loadingb. Transitionsc. Intrinsic support for Touch eventsd. ScrollViewe. DD Touch support
3. Conclusion
Monday, December 20, 2010
Mobile and the philosophy of F2E
Monday, December 20, 2010
Monday, December 20, 2010
Monday, December 20, 2010
Monday, December 20, 2010
Monday, December 20, 2010
Monday, December 20, 2010
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
The Aren’tMobile Specific
Monday, December 20, 2010
The Aren’tMobile SpecificFeatures
Monday, December 20, 2010
The Aren’tMobile SpecificConstraints
Monday, December 20, 2010
Monday, December 20, 2010
Touch
Gestures
Monday, December 20, 2010
Touch
Gestures
Transitions
Offline Cache
History
Monday, December 20, 2010
Monday, December 20, 2010
k-weight
run-time performance
screen real estate
Monday, December 20, 2010
The Environment Is (Still) Not Homogeneous
Monday, December 20, 2010
• Body text
Monday, December 20, 2010
• 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
• Body text
Monday, December 20, 2010
Monday, December 20, 2010
"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
OK for docking stations (maybe)Not OK for the web
Monday, December 20, 2010
"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
Monday, December 20, 2010
Monday, December 20, 2010
Monday, December 20, 2010
Monday, December 20, 2010
Monday, December 20, 2010
YUI 3
Monday, December 20, 2010
YUI 3
Monday, December 20, 2010
YUI 3
Monday, December 20, 2010
YUI 3
Monday, December 20, 2010
Reach Maintenance Time to
Market
Monday, December 20, 2010
YUI 3.2.0, our first step
Monday, December 20, 2010
• 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
YUI 3.2.0
Monday, December 20, 2010
Loading
Seed• Small upfront download
• Free dependency resolution
Manual• Single blocking request
• Manage your own dependencies
Monday, December 20, 2010
Loaderuse(“dom-style”)
Capability Driven
ie: “dom-style”, “dom-style-ie”
Manualuse(“selector-native”, “transition-native”)
!ie: “dom-style”
Monday, December 20, 2010
Offline Cache ItAnd once you have it there...
Monday, December 20, 2010
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’
Transitions
Monday, December 20, 2010
Cross-Browser Support
• Vendor Prefixes
-webkit-transition-property: -webkit-transform -moz-transition-property: -moz-transform
• But, still only partial A-Grade support
Transitions
Monday, December 20, 2010
YUI Transitions
node.transition({ left: { duration: 1, easing: 'ease-out', value: ‘200px’ }, top: { duration: 2, easing: 'ease-in', value: ‘100px’ }});
Monday, December 20, 2010
YUI Transitions
Y.Transition.fx.fadeOut = { opacity:0, easing: “ease-out”};
myNode.transition(“fadeOut”)
Monday, December 20, 2010
ScrollView
mouse touch
DragDrop
mouse touch
Touch Support
Monday, December 20, 2010
ScrollView
mouse touch
Gestures
DragDrop
mouse touch
Touch Support
Monday, December 20, 2010
ScrollView
mouse touch
Gestures
DragDrop
mouse touch
mouse touch
move
Touch Support
Monday, December 20, 2010
ScrollView
Gestures
DragDrop
mouse touch mouse touch
flickmove
Touch Support
Monday, December 20, 2010
ScrollView
Gestures
DragDrop
mouse touch mouse touch
flickmove
movemove
Touch Support
Monday, December 20, 2010
ScrollView
Gestures
DragDrop
mouse touch mouse touch
flickmove
move flickmove
Touch Support
Monday, December 20, 2010
[ demos ]
Monday, December 20, 2010
• 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
Working Together
Monday, December 20, 2010
http://yuilibrary.com/gallery
0
50
100
150
200
02/2010 03/2010 04/2010 05/2010 06/2010 07/2010
Modules
YUI Gallery
Monday, December 20, 2010