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

YUIConf 2010, YUI3 and Mobile Web Development

Jun 19, 2015

Download

Technology

sdezzi

YUI's approach to phone, tablet, laptop, desktop web development
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 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

Page 2: YUIConf 2010, YUI3 and Mobile Web Development

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

Page 3: YUIConf 2010, YUI3 and Mobile Web Development

Mobile and the philosophy of F2E

Monday, December 20, 2010

Page 4: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 5: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 6: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 7: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 8: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 9: YUIConf 2010, YUI3 and Mobile Web Development

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

Page 10: YUIConf 2010, YUI3 and Mobile Web Development

The Aren’tMobile Specific

Monday, December 20, 2010

Page 11: YUIConf 2010, YUI3 and Mobile Web Development

The Aren’tMobile SpecificFeatures

Monday, December 20, 2010

Page 12: YUIConf 2010, YUI3 and Mobile Web Development

The Aren’tMobile SpecificConstraints

Monday, December 20, 2010

Page 13: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 14: YUIConf 2010, YUI3 and Mobile Web Development

Touch

Gestures

Monday, December 20, 2010

Page 15: YUIConf 2010, YUI3 and Mobile Web Development

Touch

Gestures

Transitions

Offline Cache

History

Monday, December 20, 2010

Page 16: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 17: YUIConf 2010, YUI3 and Mobile Web Development

k-weight

run-time performance

screen real estate

Monday, December 20, 2010

Page 18: YUIConf 2010, YUI3 and Mobile Web Development

The Environment Is (Still) Not Homogeneous

Monday, December 20, 2010

Page 19: YUIConf 2010, YUI3 and Mobile Web Development

• Body text

Monday, December 20, 2010

Page 20: YUIConf 2010, YUI3 and Mobile Web Development

• 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

Page 21: YUIConf 2010, YUI3 and Mobile Web Development

• Body text

Monday, December 20, 2010

Page 22: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 23: YUIConf 2010, YUI3 and Mobile Web Development

"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

Page 24: YUIConf 2010, YUI3 and Mobile Web Development

"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

Page 25: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 26: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 27: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 28: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 29: YUIConf 2010, YUI3 and Mobile Web Development

Monday, December 20, 2010

Page 30: YUIConf 2010, YUI3 and Mobile Web Development

YUI 3

Monday, December 20, 2010

Page 31: YUIConf 2010, YUI3 and Mobile Web Development

YUI 3

Monday, December 20, 2010

Page 32: YUIConf 2010, YUI3 and Mobile Web Development

YUI 3

Monday, December 20, 2010

Page 33: YUIConf 2010, YUI3 and Mobile Web Development

YUI 3

Monday, December 20, 2010

Page 34: YUIConf 2010, YUI3 and Mobile Web Development

Reach Maintenance Time to

Market

Monday, December 20, 2010

Page 35: YUIConf 2010, YUI3 and Mobile Web Development

YUI 3.2.0, our first step

Monday, December 20, 2010

Page 36: YUIConf 2010, YUI3 and Mobile Web Development

• 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

Page 37: YUIConf 2010, YUI3 and Mobile Web Development

Loading

Seed• Small upfront download

• Free dependency resolution

Manual• Single blocking request

• Manage your own dependencies

Monday, December 20, 2010

Page 38: YUIConf 2010, YUI3 and Mobile Web Development

Loaderuse(“dom-style”)

Capability Driven

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

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

!ie: “dom-style”

Monday, December 20, 2010

Page 39: YUIConf 2010, YUI3 and Mobile Web Development

Offline Cache ItAnd once you have it there...

Monday, December 20, 2010

Page 40: YUIConf 2010, YUI3 and Mobile Web Development

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

Page 41: YUIConf 2010, YUI3 and Mobile Web Development

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

Page 42: YUIConf 2010, YUI3 and Mobile Web Development

YUI Transitions

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

Monday, December 20, 2010

Page 43: YUIConf 2010, YUI3 and Mobile Web Development

YUI Transitions

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

myNode.transition(“fadeOut”)

Monday, December 20, 2010

Page 44: YUIConf 2010, YUI3 and Mobile Web Development

ScrollView

mouse touch

DragDrop

mouse touch

Touch Support

Monday, December 20, 2010

Page 45: YUIConf 2010, YUI3 and Mobile Web Development

ScrollView

mouse touch

Gestures

DragDrop

mouse touch

Touch Support

Monday, December 20, 2010

Page 46: YUIConf 2010, YUI3 and Mobile Web Development

ScrollView

mouse touch

Gestures

DragDrop

mouse touch

mouse touch

move

Touch Support

Monday, December 20, 2010

Page 47: YUIConf 2010, YUI3 and Mobile Web Development

ScrollView

Gestures

DragDrop

mouse touch mouse touch

flickmove

Touch Support

Monday, December 20, 2010

Page 48: YUIConf 2010, YUI3 and Mobile Web Development

ScrollView

Gestures

DragDrop

mouse touch mouse touch

flickmove

movemove

Touch Support

Monday, December 20, 2010

Page 49: YUIConf 2010, YUI3 and Mobile Web Development

ScrollView

Gestures

DragDrop

mouse touch mouse touch

flickmove

move flickmove

Touch Support

Monday, December 20, 2010

Page 50: YUIConf 2010, YUI3 and Mobile Web Development

[ demos ]

Monday, December 20, 2010

Page 51: YUIConf 2010, YUI3 and Mobile Web Development

• 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

Page 52: YUIConf 2010, YUI3 and Mobile Web Development

Working Together

Monday, December 20, 2010

Page 53: YUIConf 2010, YUI3 and Mobile Web Development

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

Page 54: YUIConf 2010, YUI3 and Mobile Web Development

Satyen [email protected]

YUI

Monday, December 20, 2010