YUIConf 2010, YUI3 and Mobile Web Development

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

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


Mobile and the philosophy of
F2E


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


The Aren’t
Mobile Speciﬁc


The Features Aren’t
Mobile Speciﬁc


The Constraints Aren’t
Mobile Speciﬁc


Touch
Gestures


Touch
Gestures

Transitions
Ofﬂine Cache
History


k-weight
run-time performance
screen real estate


The Environment
Is (Still) Not Homogeneous


• Body text


• Body text

“All 10 mobile WebKits I’ve identiﬁed 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.”


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


"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


YUI 3


Reach Maintenance Time
to
Market


YUI 3.2.0, our first step


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


Loading

Seed
• Small upfront download
• Free dependency resolution

Manual
• Single blocking request
• Manage your own dependencies


Capability Driven
Manual
use(“selector-native”, “transition-native”)

Loader
use(“dom-style”)

ie: “dom-style”, “dom-style-ie”
!ie: “dom-style”


And once you have it there...
Offline Cache It


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’


Transitions

Cross-Browser Support

• Vendor Prefixes
-webkit-transition-property: -webkit-transform
-moz-transition-property: -moz-transform

• But, still only partial A-Grade support


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


YUI Transitions

Y.Transition.fx.fadeOut = {
opacity:0,
easing: “ease-out”
};

myNode.transition(“fadeOut”)


Touch Support
DragDrop ScrollView

mouse touch mouse touch


Touch Support
DragDrop ScrollView


Gestures


Touch Support
DragDrop ScrollView


Gestures

move

mouse touch


Touch Support
DragDrop ScrollView

Gestures

move ﬂick



Touch Support
DragDrop ScrollView

move move

Gestures

move ﬂick



Touch Support
DragDrop ScrollView

move move ﬂick

Gestures

move ﬂick



[ demos ]


• Abstraction layers provide future compatibility

• Code once, use anywhere

• F2E principles and practices still apply

• Supporting mobile browsers makes YUI better for all
browsers


Working Together


YUI Gallery
http://yuilibrary.com/gallery
200

150

100

50

02/2010 03/2010 04/2010 0
05/2010 06/2010 07/2010

Modules


Satyen Desai
sdesai@yahoo-inc.com

YUI


YUIConf 2010, YUI3 and Mobile Web Development

More Related Content

What's hot (7)

Viewers also liked (20)

Similar to YUIConf 2010, YUI3 and Mobile Web Development (19)

Recently uploaded (20)

YUIConf 2010, YUI3 and Mobile Web Development