YUI for Mobile - HTML5DevConf 11

3,507 views
3,232 views

Published on

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

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,507
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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/

    ×