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


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’tMobile Specific


The Aren’tMobile SpecificFeatures


The Aren’tMobile SpecificConstraints



Touch

Gestures


Touch

Gestures

Transitions

Offline 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 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.”


• Body text



"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


http://www.w3.org/People/Berners-Lee/


"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


YUI 3


YUI 3


YUI 3


Reach Maintenance Time to

Market


YUI 3.2.0, our first step


• 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


Loading

Seed• Small upfront download

• Free dependency resolution

Manual• Single blocking request

• Manage your own dependencies


Loaderuse(“dom-style”)

Capability Driven

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

Manualuse(“selector-native”, “transition-native”)

!ie: “dom-style”


Offline Cache ItAnd once you have it there...


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

Transitions


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”)


ScrollView

mouse touch

DragDrop

mouse touch

Touch Support


ScrollView

mouse touch

Gestures

DragDrop

mouse touch

Touch Support


ScrollView

mouse touch

Gestures

DragDrop

mouse touch

mouse touch

move

Touch Support


ScrollView

Gestures

DragDrop

mouse touch mouse touch

flickmove

Touch Support


ScrollView

Gestures

DragDrop


flickmove

movemove

Touch Support


ScrollView

Gestures

DragDrop


flickmove

move flickmove

Touch Support


[ 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


http://yuilibrary.com/gallery

0

50

100

150

200

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

Modules

YUI Gallery




Satyen [email protected]

YUI


mailto:[email protected]

mailto:[email protected]