Creating Hybrid mobile apps with YUI

2,720 views

Published on

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

No Downloads
Views
Total views
2,720
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
57
Comments
0
Likes
15
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
  • \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
  • Creating Hybrid mobile apps with YUI

    1. 1. Y! Local mobile case study Gonzalo Cordero @goonieiam
    2. 2. AGENDA• Intro, demo & design principles• Deconstruction of a hybrid application• Conclusion
    3. 3. VS
    4. 4. WHEN TO USE NATIVE
    5. 5. WHEN TO USE NATIVE• Anything that needs to access the device’s hardware
    6. 6. WHEN TO USE NATIVE• Anything that needs to access the device’s hardware• You can put it on the app store
    7. 7. WHEN TO USE NATIVE• Anything that needs to access the device’s hardware• You can put it on the app store• That’s it*
    8. 8. WHEN TO USE NATIVE • Anything that needs to access the device’s hardware • You can put it on the app store • That’s it**We’ll cover a few gotchas later in the presentation
    9. 9. FOR EVERYTHING ELSE
    10. 10. FOR EVERYTHING ELSE• You are familiar with the technologies
    11. 11. FOR EVERYTHING ELSE• You are familiar with the technologies• Write once and use everywhere
    12. 12. FOR EVERYTHING ELSE• You are familiar with the technologies• Write once and use everywhere• You decide when/how to update
    13. 13. Hybrid - Best of both worlds?
    14. 14. *NATIVEWe ended up using it more than we wanted
    15. 15. WHY?
    16. 16. WHY?• Paying that beginners price?
    17. 17. WHY?• Paying that beginners price?• Some “web” features not reliable enough
    18. 18. WHY?• Paying that beginners price?• Some “web” features not reliable enough• Some “web” features were not available at the time
    19. 19. NATIVE*
    20. 20. NATIVE*Geo
    21. 21. NATIVE* GeoNavigation Controls
    22. 22. NATIVE* GeoNavigation Controls Storage
    23. 23. WEB
    24. 24. WEBAll content
    25. 25. WEB All contentAll interactions
    26. 26. YUI3 MOBILE EXAMPLE
    27. 27. YUI3 MOBILE EXAMPLEpulldown event
    28. 28. YUI3 MOBILE EXAMPLEpulldown event ScrollView module
    29. 29. YUI3 MOBILE EXAMPLEpulldown event ScrollView module touch-events + CSS3
    30. 30. TECHNOLOGIES
    31. 31. TECHNOLOGIES
    32. 32. TECHNOLOGIES
    33. 33. TECHNOLOGIES
    34. 34. TECHNOLOGIES
    35. 35. TECHNOLOGIES ????
    36. 36. “There is no mobile web,just the web” - Stephen Hay
    37. 37. YUI().USE(“ALL”) “Use”One statement to rule them all
    38. 38. YUI.USE(“...”)
    39. 39. YUI.USE(“...”)Loader
    40. 40. YUI.USE(“...”)LoaderEvents
    41. 41. YUI.USE(“...”) Loader EventsY.Lang.Substitute
    42. 42. YUI.USE(“...”) Loader Transitions EventsY.Lang.Substitute
    43. 43. YUI.USE(“...”) Loader Transitions Events App FrameworkY.Lang.Substitute
    44. 44. 1. Load & Delivery
    45. 45. App delivery through app store
    46. 46. Pack light or pack for a month?
    47. 47. WHAT TO PACK, WHAT TO PACK• Base core files(including YUI)• Anything that doesn’t change frequently or is static
    48. 48. Load the data pieces on demand
    49. 49. YUI().USE(“LOADER”)
    50. 50. YUI().USE(“LOADER”) Feature based loading
    51. 51. YUI().USE(“LOADER”) Feature based loading Dependency calculation
    52. 52. YUI().USE(“LOADER”) Feature based loading Dependency calculation On demand loading
    53. 53. YUI().USE(“LOADER”) Feature based loading Dependency calculation On demand loading Manual or Automatic
    54. 54. CACHING THE ASSETS• We cached all the assets once we downloaded the first time• Using native storage
    55. 55. How about HTML5 Manifest?Probably but...
    56. 56. HTML5 MANIFEST
    57. 57. HTML5 MANIFEST• At the time we saw some inconsistencies with how the data persisted in memory
    58. 58. HTML5 MANIFEST• At the time we saw some inconsistencies with how the data persisted in memory• Flushing the cache wasn’t reliable either
    59. 59. CACHING THE DATA
    60. 60. CACHING THE DATA JSON
    61. 61. CACHING THE DATA JSON Y.Lang.Substitute
    62. 62. CACHING THE DATA JSON Y.Lang.Substitute
    63. 63. 2. Navigating around
    64. 64. NAVIGATION CONTROLS
    65. 65. NAVIGATION CONTROLS• All the navigation is done natively
    66. 66. NAVIGATION CONTROLS• All the navigation is done natively• Logic & visual aspects not available at the time
    67. 67. NAVIGATION CONTROLS• All the navigation is done natively• Logic & visual aspects not available at the time• Some major drawbacks
    68. 68. NAVIGATION
    69. 69. NAVIGATION position: fixed wasn’t working properly at the time.
    70. 70. NAVIGATION position: fixed wasn’t working properly at the time. Navigation logic was easier to implement natively
    71. 71. NATIVE NAVIGATION
    72. 72. NATIVE NAVIGATION1. Load the view
    73. 73. NATIVE NAVIGATION1. Load the view
    74. 74. NATIVE NAVIGATION1. Load the view
    75. 75. NATIVE NAVIGATION1. Load the view2. While loading, disablenavigation controls
    76. 76. NATIVE NAVIGATION1. Load the view2. While loading, disablenavigation controls
    77. 77. NATIVE NAVIGATION1. Load the view2. While loading, disablenavigation controls3. Send articles informationto native
    78. 78. NATIVE NAVIGATION1. Load the view2. While loading, disablenavigation controls3. Send articles informationto native
    79. 79. NATIVE NAVIGATION
    80. 80. NATIVE NAVIGATION• Loading more data than we needed
    81. 81. NATIVE NAVIGATION• Loading more data than we needed• Race conditions
    82. 82. NATIVE NAVIGATION• Loading more data than we needed• Race conditions• Several bridge calls
    83. 83. If I were to build it today...
    84. 84. A BETTER SOLUTIONTransitions App Framework
    85. 85. YUI().USE(“APP”) route
    86. 86. YUI().USE(“APP”) route Home
    87. 87. YUI().USE(“APP”) route Saved Home Items
    88. 88. YUI().USE(“APP”) route Saved Home Settings Items
    89. 89. YUI().USE(“TRANSITION”)
    90. 90. YUI().USE(“TRANSITION”)
    91. 91. YUI().USE(“TRANSITION”)Y.one(#homeView).transition({ width: { duration: 0.5, easing: ease-out, value: 0 }}, function() { showNextView();});
    92. 92. YUI().USE(“TRANSITION”)Y.one(#homeView).transition({ width: { duration: 0.5, easing: ease-out, value: 0 }}, function() { showNextView();});
    93. 93. BENEFITS• Logic and content from the same stack• No race conditions between native + web• Reusability & maintainability
    94. 94. 3. Reacting to gestures
    95. 95. YUI().USE(“GESTURES”)
    96. 96. 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}
    97. 97. YUI().USE(“EVENT-MOVE”)• Itprovides a set of synthetic events to detect gestures• gesturemovestart, gesturemove, gesturemoveend.
    98. 98. 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 } });
    99. 99. YUI().USE(“SCROLLVIEW”)
    100. 100. YUI().USE(“SCROLLVIEW”)
    101. 101. YUI().USE(“SCROLLVIEW”)• Provides scrollable content for touch enabled devices.• Two plugins: ScrollViewScrollbars & ScrollViewPaginator
    102. 102. HOW TO? <ul id=”movies”> <li> <img src=”movie.jpeg”alt=”somemovie”> </li> </ul>
    103. 103. YUI({...}).use("scrollview", function(Y){ var scrollview = new Y.ScrollView({ srcNode:"#movies", flick : {minVelocity:0.8}, deceleration : 0.98, bounce: 0.1, width:"20em" });});
    104. 104. 4. Offline & save modes
    105. 105. OFFLINE• Two distinctions: Offline mode & Save articles to read later• In both cases we are using native storage
    106. 106. OFFLINE MODEUsed to display the most recent data in case of no connectivity
    107. 107. OFFLINE MODEUsed to display the most recent data in case of no connectivity Data(native storage)
    108. 108. OFFLINE MODEUsed to display the most recent data in case of no connectivity Data(native storage)
    109. 109. OFFLINE MODEUsed to display the most recent data in case of no connectivity Data(native storage) Y.Lang.Substitute (for templating)
    110. 110. OFFLINE MODEUsed to display the most recent data in case of no connectivity Data from Local Data(native storage) storage Y.Lang.Substitute (for templating)
    111. 111. OFFLINE(SAVE)
    112. 112. OFFLINE(SAVE)Core files(Already cached)
    113. 113. OFFLINE(SAVE)Core files(Already cached) Content
    114. 114. OFFLINE(SAVE) Core files(Already cached) ContentHTML
    115. 115. OFFLINE(SAVE) Core files(Already cached) ContentHTML CSS
    116. 116. OFFLINE(SAVE) Core files(Already cached) ContentHTML CSS JS
    117. 117. OFFLINE(SAVE) Core files(Already cached) ContentHTML CSS JS Media
    118. 118. SO...• Ifyou need to store big files + media: Use native storage• Otherwise store JSON in localStorage & use templates
    119. 119. 5. The bridge
    120. 120. THE BRIDGETwo way communication between Native & Web
    121. 121. NATIVE->WEB
    122. 122. NATIVE->WEB
    123. 123. NATIVE->WEB
    124. 124. NATIVE->WEB
    125. 125. NATIVE -> WEB• Call directly into JS• Using Y.Env to expose global method• Use Y.applyTo to call into specific function
    126. 126. WEB -> NATIVE• By navigating to a local host/protocol• You can use : window.location or XHR
    127. 127. WINDOW.LOCATION
    128. 128. WINDOW.LOCATIONOn your JS: window.location = myProtocol://performAction?param=foo
    129. 129. WINDOW.LOCATIONOn your JS: window.location = myProtocol://performAction?param=fooOn your native code:if([[request.URL scheme] isEqualToString:@"myProtocol"]){ //Parse the request, perform an action}else { return TRUE; //Navigate}
    130. 130. XHR• Cross domain policies restrictions• Works if the content is loaded locally• Can send a response back
    131. 131. General best practices
    132. 132. var true = TRUE;Everything you’ve learned still applies
    133. 133. - Keep your JS small
    134. 134. - Keep your JS small- Don’t touch the DOM. Keep itSmall
    135. 135. - Keep your JS small- Don’t touch the DOM. Keep itSmall- Every byte counts as “double” inmobile
    136. 136. Reduce your http requests:
    137. 137. Reduce your http requests:- Pre-pack as much as you can.
    138. 138. Reduce your http requests:- Pre-pack as much as you can.- Use data URI for small images.
    139. 139. Reduce your http requests:- Pre-pack as much as you can.- Use data URI for small images.- Use cached templates to load similarviews.
    140. 140. Perceived performance:Give constant UI feedback
    141. 141. Shrink your images
    142. 142. Take advantage of the shinny:
    143. 143. Take advantage of the shinny:- Imageless designs(CSS3)
    144. 144. Take advantage of the shinny:- Imageless designs(CSS3)- Hardware acceleration (don’t abuseit)
    145. 145. Take advantage of the shinny:- Imageless designs(CSS3)- Hardware acceleration (don’t abuseit)- Use new semantic HTML5 elements
    146. 146. One more thing...
    147. 147. Got a cool idea? Build it!http://yuilibrary.com/gallery/
    148. 148. FINAL THOUGHTS• YUI3is well suited for both Hybrid and Mobile web apps.• Everything you need is already available
    149. 149. YUI.USE(“RESOURCES”)• http://davidbcalhoun.com/2011/mobile-performance-manifesto• http://www.yuiblog.com/blog/2011/01/17/video-yuiconf2010- desai/• http://www.slideshare.net/nzakas/mobile-web-speed-bumps
    150. 150. YUI().USE(“THANK YOU”) @goonieiam http://yuilibrary.com http://yuilibrary.com/theater/

    ×