This talks shows how YUI3 allow you to create both web based and hybrid based mobile applications.

1. YUI Mobile
Gonzalo Cordero
@goonieiam

2. Agenda
• Intro, demo & design principles
• Deconstruction of a hybrid application
• Conclusion

3. YUI3 Mobile example

4. YUI3 Mobile example
pulldown event

5. YUI3 Mobile example
pulldown event ScrollView module

6. YUI3 Mobile example
pulldown event ScrollView module touch-events + CSS3

8. YUI().use(“Intro”)
“Use”
One statement to rule them all

9. YUI().use(“Features”)
Those features you’re thinking about are not unique to
mobile

11. Touch
Gestures

12. Touch
Gestures
Transitions
Offline Cache
History

13. YUI().use(“Constraints”
)
Neither are the constraints...

14. k-weight
run-time performance
screen real estate

15. YUI 3

16. YUI 3

17. YUI 3

18. YUI().use(“Mobile”)
Everything you need
is already available.

20. 1. Load & Delivery

21. YUI - Everything is a
module

22. YUI().use(“Loader”)

23. YUI().use(“Loader”)
Feature based loading

24. YUI().use(“Loader”)
Feature based loading
On demand loading

25. YUI().use(“Loader”)
Feature based loading
On demand loading
Dependency calculation

26. YUI().use(“Loader”)
Feature based loading
On demand loading
Dependency calculation
Manual or Automatic

27. YUI().use(“Loader”)
Manual:
use(“selector-native”,”transition-native”)
Automatic:
use(“Node”) //This won’t load any of the
IE6 stuff if the request comes from a
phone.

28. YUI().use(“The best”)
and it just about to get
even better...

29. YUI().use(“Remote
loader”)
Feature based loading
Dependency calculation
Cache layer

30. 2. Navigating in style

31. YUI().use(“Transition”)

32. YUI().use(“Transition”)

33. YUI().use(“Transition”)

34. YUI().use(“Transition”)
• Cross-Browser support
• Vendor prefixes
• Hardware acceleration(CSS3)

35. YUI().use(“Transition”)
function 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’;
}

36. YUI().use(“Transition”)
function NotTedious() {
node.transition({
left: {
duration: 1,
easing: 'ease-out',
value: ‘200px’
},
top: {
duration: 2,
easing: 'ease-in',
value: ‘100px’
} });
}

37. 3. Reacting to gestures

38. DragDrop ScrollView
mouse move touch mouse
move touch
flick

39. DragDrop ScrollView
mouse move touch mouse
move touch
flick
Gestures

40. DragDrop ScrollView
mouse move touch mouse
move touch
flick
Gestures
move
mouse touch

41. DragDrop ScrollView
move move flick
Gestures
move flick
mouse touch mouse touch

42. YUI().use(“gestures”)

43. YUI.use(“event-flick”)
movieCarousel.on("flick", onMovieFlick, {
// only notify me if the flick covered
// more than 20px and was faster than 0.8px/ms
minDistance:20,
minVelocity:0.8,
axis : “x”
});
function onMovieFlick (e) {
//Go to the next movie
}

44. YUI().use(“event-
move”)
• It provides a set of synthetic events to
detect gestures
• gesturemovestart, gesturemove,
gesturemoveend.

45. movieCarousel.delegate("gesturemovestart", function(e) {
var item = e.currentTarget,
swipeEnd,
isSwipeLeft,
swipeStart;
item.setData("swipeStart", e.pageX);
item.once("gesturemoveend", function(e) {
swipeStart = item.getData("swipeStart");
swipeEnd = e.pageX;
isSwipeLeft = (swipeStart - swipeEnd) >
MIN_SWIPE;
if (isSwipeLeft) {
//Go to the previous movie
} else {
//Go to the next movie
}
});

46. YUI().use(“scrollview”)
• Provides scrollable content for touch
enabled devices.
• Two plugins: ScrollViewScrollbars &
ScrollViewPaginator

47. YUI().use(“scrollview”)

48. YUI().use(“scrollview”)

49. How to?
<ul id=”movies”>
<li>
<img src=”movie.jpeg”
alt=”somemovie”>
</li>
</ul>

50. YUI({...}).use("scrollview", function(Y){
var scrollview = new Y.ScrollView({
srcNode:"#movies",
flick : {minVelocity:0.8},
deceleration : 0.98,
bounce: 0.1,
width:"20em"
});
});

51. 4. Putting all the pieces
together

52. YUI().use(“app”)
Simple MVC framework for
writing single-page Applications

53. YUI({up,up,down,down,left,right}).use(“controller”)

54. YUI().use(“controller”)
• Provides URL based page routing
• Bookmark-able
• Configurable

55. YUI().use(“controller”)

56. YUI().use(“controller”)

57. YUI().use(“controller”)
Example:
var controller = new Y.Controller({
root: '/yahoolocal',
routes: [
{path: '/', callback: loadHome},
{path: '/save', callback: showSavedItems },
{path: '/showSettings', callback: showSettings}
]
});

58. Route callbacks
req {
params,
path,
query,
next()
}

59. Controller methods
save
callback
route
function
replace
route newRoute

60. YUI().use(“model”)

61. YUI().use(“model”)
Defines and manages the
attributes of the
application

62. YUI().use(“model”)
Properties&Methods
Sync
Attributes
Setters Getters change events

65. YUI().use(“model”)
Load
Sync
save share

66. YUI().use(“view”)

67. YUI().use(“views”)
Represents a renderable piece of an
application's user interface, and
provides hooks for easily handling
events

68. Y.eventsView = Y.Base.create('eventsView', Y.View,
[], {
container: '<ul class="eventsContainer"></ul>',
template: '<li>{eventData}</li>',
events: {
},
initializer: function () {
//The initializer function will run when a view
is instantiated
},
render: function () {
//The render function is responsible for
rendering the view to the page, react to UI changes
}
}
});

69. YUI().use(“Widgets”)
So YUI is the king of widgets....
Where are my mobile widgets?!

74. YUI().use(“Gallery”)
In the meantime...
Got a cool idea? Build it!
http://yuilibrary.com/gallery/

75. Final thoughts
• YUI3 is well suited for both Hybrid and
Mobile web apps.
• Everything you need is already availble

76. YUI().use(“Thank you”)
@goonieiam
http://yuilibrary.com
http://yuilibrary.com/theater/