Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
YUI MobileGonzalo Cordero  @goonieiam
Agenda• Intro, demo & design principles• Deconstruction of a hybrid application• Conclusion
YUI3 Mobile example
YUI3 Mobile examplepulldown event
YUI3 Mobile examplepulldown event   ScrollView module
YUI3 Mobile examplepulldown event   ScrollView module   touch-events + CSS3
YUI().use(“Intro”)  “Use”One       statement to rule them all
YUI().use(“Features”)Those features you’re thinking about are not unique to                        mobile
TouchGestures
Touch  Gestures TransitionsOffline Cache  History
YUI().use(“Constraints”           )    Neither are the constraints...
k-weightrun-time performance  screen real estate
YUI 3
YUI 3
YUI 3
YUI().use(“Mobile”)  Everything you need   is already available.
1. Load & Delivery
YUI - Everything is a        module
YUI().use(“Loader”)
YUI().use(“Loader”)    Feature based loading
YUI().use(“Loader”)    Feature based loading    On demand loading
YUI().use(“Loader”)    Feature based loading    On demand loading   Dependency calculation
YUI().use(“Loader”)    Feature based loading    On demand loading   Dependency calculation    Manual or Automatic
YUI().use(“Loader”)Manual:   use(“selector-native”,”transition-native”)Automatic:   use(“Node”) //This won’t load any of t...
YUI().use(“The best”) and it just about to get      even better...
YUI().use(“Remote     loader”)  Feature based loading  Dependency calculation       Cache layer
2. Navigating in style
YUI().use(“Transition”)
YUI().use(“Transition”)
YUI().use(“Transition”)
YUI().use(“Transition”)• Cross-Browser support• Vendor prefixes• Hardware acceleration(CSS3)
YUI().use(“Transition”)    function Tedious () {        node.style.WebkitTransitionProperty = left, top ;        node.styl...
YUI().use(“Transition”)function NotTedious() {  node.transition({    left: {       duration: 1,       easing: ease-out,   ...
3. Reacting to gestures
DragDrop           ScrollViewmouse move touch   mouse                   move       touch                               flick
DragDrop                      ScrollViewmouse move touch              mouse                              move       touch ...
DragDrop                          ScrollViewmouse move touch                  mouse                                  move ...
DragDrop                          ScrollView        move                      move           flick                       Ge...
YUI().use(“gestures”)
YUI.use(“event-flick”)movieCarousel.on("flick", onMovieFlick, {// only notify me if the flick covered// more than 20px and ...
YUI().use(“event-          move”)• It provides a set of synthetic events to  detect gestures• gesturemovestart, gesturemov...
movieCarousel.delegate("gesturemovestart", function(e) {    var item = e.currentTarget,        swipeEnd,        isSwipeLef...
YUI().use(“scrollview”)• Provides scrollable content for touch  enabled devices.• Two plugins: ScrollViewScrollbars &  Scr...
YUI().use(“scrollview”)
YUI().use(“scrollview”)
How to?        <ul id=”movies”>            <li>                 <img src=”movie.jpeg”alt=”somemovie”>            </li>    ...
YUI({...}).use("scrollview", function(Y){ var scrollview = new Y.ScrollView({         srcNode:"#movies",         flick : {...
4. Putting all the pieces         together
YUI().use(“app”)      Simple MVC framework for     writing single-page Applications
YUI({up,up,down,down,left,right}).use(“controller”)
YUI().use(“controller”)• Provides URL based page routing• Bookmark-able• Configurable
YUI().use(“controller”)
YUI().use(“controller”)
YUI().use(“controller”)Example:    var controller = new Y.Controller({      root: /yahoolocal,      routes: [        {path...
Route callbacks req {  params,  path,  query,  next() }
Controller methods        save                   callbackroute                   function        replaceroute             ...
YUI().use(“model”)
YUI().use(“model”) Defines and manages the    attributes of the       application
YUI().use(“model”)   Properties&Methods              Sync            Attributes  Setters      Getters   change events
YUI().use(“model”)          Load          Sync   save          share
YUI().use(“view”)
YUI().use(“views”)Represents a renderable piece of an  applications user interface, and provides hooks for easily handling...
Y.eventsView = Y.Base.create(eventsView, Y.View,[], {  container: <ul class="eventsContainer"></ul>,  template: <li>{event...
YUI().use(“Widgets”)  So YUI is the king of widgets....  Where are my mobile widgets?!
YUI().use(“Gallery”)        In the meantime...    Got a cool idea? Build it!   http://yuilibrary.com/gallery/
Final thoughts• YUI3 is well suited for both Hybrid and  Mobile web apps.• Everything you need is already availble
YUI().use(“Thank you”)          @goonieiam        http://yuilibrary.com    http://yuilibrary.com/theater/
YUI for Mobile - HTML5DevConf 11
YUI for Mobile - HTML5DevConf 11
YUI for Mobile - HTML5DevConf 11
YUI for Mobile - HTML5DevConf 11
YUI for Mobile - HTML5DevConf 11
YUI for Mobile - HTML5DevConf 11
YUI for Mobile - HTML5DevConf 11
YUI for Mobile - HTML5DevConf 11
YUI for Mobile - HTML5DevConf 11
Upcoming SlideShare
Loading in …5
×

YUI for Mobile - HTML5DevConf 11

3,800 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

YUI for Mobile - HTML5DevConf 11

  1. 1. YUI MobileGonzalo Cordero @goonieiam
  2. 2. Agenda• Intro, demo & design principles• Deconstruction of a hybrid application• Conclusion
  3. 3. YUI3 Mobile example
  4. 4. YUI3 Mobile examplepulldown event
  5. 5. YUI3 Mobile examplepulldown event ScrollView module
  6. 6. YUI3 Mobile examplepulldown event ScrollView module touch-events + CSS3
  7. 7. YUI().use(“Intro”) “Use”One statement to rule them all
  8. 8. YUI().use(“Features”)Those features you’re thinking about are not unique to mobile
  9. 9. TouchGestures
  10. 10. Touch Gestures TransitionsOffline Cache History
  11. 11. YUI().use(“Constraints” ) Neither are the constraints...
  12. 12. k-weightrun-time performance screen real estate
  13. 13. YUI 3
  14. 14. YUI 3
  15. 15. YUI 3
  16. 16. YUI().use(“Mobile”) Everything you need is already available.
  17. 17. 1. Load & Delivery
  18. 18. YUI - Everything is a module
  19. 19. YUI().use(“Loader”)
  20. 20. YUI().use(“Loader”) Feature based loading
  21. 21. YUI().use(“Loader”) Feature based loading On demand loading
  22. 22. YUI().use(“Loader”) Feature based loading On demand loading Dependency calculation
  23. 23. YUI().use(“Loader”) Feature based loading On demand loading Dependency calculation Manual or Automatic
  24. 24. 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.
  25. 25. YUI().use(“The best”) and it just about to get even better...
  26. 26. YUI().use(“Remote loader”) Feature based loading Dependency calculation Cache layer
  27. 27. 2. Navigating in style
  28. 28. YUI().use(“Transition”)
  29. 29. YUI().use(“Transition”)
  30. 30. YUI().use(“Transition”)
  31. 31. YUI().use(“Transition”)• Cross-Browser support• Vendor prefixes• Hardware acceleration(CSS3)
  32. 32. 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’;}
  33. 33. YUI().use(“Transition”)function NotTedious() { node.transition({ left: { duration: 1, easing: ease-out, value: ‘200px’ }, top: { duration: 2, easing: ease-in, value: ‘100px’ } });}
  34. 34. 3. Reacting to gestures
  35. 35. DragDrop ScrollViewmouse move touch mouse move touch flick
  36. 36. DragDrop ScrollViewmouse move touch mouse move touch flick Gestures
  37. 37. DragDrop ScrollViewmouse move touch mouse move touch flick Gestures movemouse touch
  38. 38. DragDrop ScrollView move move flick Gestures move flickmouse touch mouse touch
  39. 39. YUI().use(“gestures”)
  40. 40. 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}
  41. 41. YUI().use(“event- move”)• It provides a set of synthetic events to detect gestures• gesturemovestart, gesturemove, gesturemoveend.
  42. 42. 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 } });
  43. 43. YUI().use(“scrollview”)• Provides scrollable content for touch enabled devices.• Two plugins: ScrollViewScrollbars & ScrollViewPaginator
  44. 44. YUI().use(“scrollview”)
  45. 45. YUI().use(“scrollview”)
  46. 46. How to? <ul id=”movies”> <li> <img src=”movie.jpeg”alt=”somemovie”> </li> </ul>
  47. 47. YUI({...}).use("scrollview", function(Y){ var scrollview = new Y.ScrollView({ srcNode:"#movies", flick : {minVelocity:0.8}, deceleration : 0.98, bounce: 0.1, width:"20em" });});
  48. 48. 4. Putting all the pieces together
  49. 49. YUI().use(“app”) Simple MVC framework for writing single-page Applications
  50. 50. YUI({up,up,down,down,left,right}).use(“controller”)
  51. 51. YUI().use(“controller”)• Provides URL based page routing• Bookmark-able• Configurable
  52. 52. YUI().use(“controller”)
  53. 53. YUI().use(“controller”)
  54. 54. YUI().use(“controller”)Example: var controller = new Y.Controller({ root: /yahoolocal, routes: [ {path: /, callback: loadHome}, {path: /save, callback: showSavedItems }, {path: /showSettings, callback: showSettings} ] });
  55. 55. Route callbacks req { params, path, query, next() }
  56. 56. Controller methods save callbackroute function replaceroute newRoute
  57. 57. YUI().use(“model”)
  58. 58. YUI().use(“model”) Defines and manages the attributes of the application
  59. 59. YUI().use(“model”) Properties&Methods Sync Attributes Setters Getters change events
  60. 60. YUI().use(“model”) Load Sync save share
  61. 61. YUI().use(“view”)
  62. 62. YUI().use(“views”)Represents a renderable piece of an applications user interface, and provides hooks for easily handling events
  63. 63. 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 viewis instantiated }, render: function () { //The render function is responsible forrendering the view to the page, react to UI changes }}});
  64. 64. YUI().use(“Widgets”) So YUI is the king of widgets.... Where are my mobile widgets?!
  65. 65. YUI().use(“Gallery”) In the meantime... Got a cool idea? Build it! http://yuilibrary.com/gallery/
  66. 66. Final thoughts• YUI3 is well suited for both Hybrid and Mobile web apps.• Everything you need is already availble
  67. 67. YUI().use(“Thank you”) @goonieiam http://yuilibrary.com http://yuilibrary.com/theater/

×