The document discusses considerations for building hybrid mobile applications using native and web technologies, noting that native should be used for hardware access or app store distribution while web technologies allow for writing code once and reusing it across platforms, and highlighting challenges faced in their early hybrid app including unreliable web features and the immaturity of some web standards at the time.

1. Y! Local mobile case study
Gonzalo Cordero
@goonieiam

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

5. VS

6. WHEN TO USE NATIVE

7. WHEN TO USE NATIVE
• Anything that needs to access the device’s hardware

8. WHEN TO USE NATIVE
• Anything that needs to access the device’s hardware
• You can put it on the app store

9. WHEN TO USE NATIVE
• Anything that needs to access the device’s hardware
• You can put it on the app store
• That’s it*

10. 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

11. FOR EVERYTHING ELSE

12. FOR EVERYTHING ELSE
• You are familiar with the technologies

13. FOR EVERYTHING ELSE
• You are familiar with the technologies
• Write once and use everywhere

14. FOR EVERYTHING ELSE
• You are familiar with the technologies
• Write once and use everywhere
• You decide when/how to update

16. Hybrid - Best of both
worlds?

17. *NATIVE
We ended up using it more than we
wanted

18. WHY?

19. WHY?
• Paying that beginners price?

20. WHY?
• Paying that beginners price?
• Some “web” features not reliable enough

21. WHY?
• Paying that beginners price?
• Some “web” features not reliable enough
• Some “web” features were not available at the time

22. NATIVE*

23. NATIVE*
Geo

24. NATIVE*
Geo
Navigation Controls

25. NATIVE*
Geo
Navigation Controls
Storage

26. WEB

27. WEB
All content

28. WEB
All content
All interactions

29. YUI3 MOBILE EXAMPLE

30. YUI3 MOBILE EXAMPLE
pulldown event

31. YUI3 MOBILE EXAMPLE
pulldown event ScrollView module

32. YUI3 MOBILE EXAMPLE
pulldown event ScrollView module touch-events + CSS3

33. TECHNOLOGIES

34. TECHNOLOGIES

35. TECHNOLOGIES

36. TECHNOLOGIES

37. TECHNOLOGIES

38. TECHNOLOGIES
????

43. “There is no mobile web,
just the web” - Stephen Hay

44. YUI().USE(“ALL”)
“Use”
One statement to rule them all

45. YUI.USE(“...”)

46. YUI.USE(“...”)
Loader

47. YUI.USE(“...”)
Loader
Events

48. YUI.USE(“...”)
Loader
Events
Y.Lang.Substitute

49. YUI.USE(“...”)
Loader Transitions
Events
Y.Lang.Substitute

50. YUI.USE(“...”)
Loader Transitions
Events App Framework
Y.Lang.Substitute

52. 1. Load & Delivery

53. App delivery through
app store

54. Pack light or pack
for a month?

55. WHAT TO PACK, WHAT TO
PACK
• Base core files(including YUI)
• Anything that doesn’t change frequently or is static

56. Load the data pieces
on demand

57. YUI().USE(“LOADER”)

58. YUI().USE(“LOADER”)
Feature based loading

59. YUI().USE(“LOADER”)
Feature based loading
Dependency calculation

60. YUI().USE(“LOADER”)
Feature based loading
Dependency calculation
On demand loading

61. YUI().USE(“LOADER”)
Feature based loading
Dependency calculation
On demand loading
Manual or Automatic

62. CACHING THE ASSETS
• We cached all the assets once we downloaded the
first time
• Using native storage

63. How about HTML5
Manifest?
Probably but...

64. HTML5 MANIFEST

65. HTML5 MANIFEST
• At
the time we saw some inconsistencies with
how the data persisted in memory

66. HTML5 MANIFEST
• At
the time we saw some inconsistencies with
how the data persisted in memory
• Flushing the cache wasn’t reliable either

67. CACHING THE DATA

68. CACHING THE DATA
JSON

69. CACHING THE DATA
JSON
Y.Lang.Substitute

70. CACHING THE DATA
JSON
Y.Lang.Substitute

71. 2. Navigating around

75. NAVIGATION CONTROLS

76. NAVIGATION CONTROLS
• All the navigation is done natively

77. NAVIGATION CONTROLS
• All the navigation is done natively
• Logic & visual aspects not available at the time

78. NAVIGATION CONTROLS
• All the navigation is done natively
• Logic & visual aspects not available at the time
• Some major drawbacks

79. NAVIGATION

80. NAVIGATION
position: fixed wasn’t
working properly
at the time.

81. NAVIGATION
position: fixed wasn’t
working properly
at the time.
Navigation logic was easier
to implement natively

82. NATIVE NAVIGATION

83. NATIVE NAVIGATION
1. Load the view

84. NATIVE NAVIGATION
1. Load the view

85. NATIVE NAVIGATION
1. Load the view

86. NATIVE NAVIGATION
1. Load the view
2. While loading, disable
navigation controls

87. NATIVE NAVIGATION
1. Load the view
2. While loading, disable
navigation controls

88. NATIVE NAVIGATION
1. Load the view
2. While loading, disable
navigation controls
3. Send articles information
to native

89. NATIVE NAVIGATION
1. Load the view
2. While loading, disable
navigation controls
3. Send articles information
to native

90. NATIVE NAVIGATION

91. NATIVE NAVIGATION
• Loading more data than we needed

92. NATIVE NAVIGATION
• Loading more data than we needed
• Race conditions

93. NATIVE NAVIGATION
• Loading more data than we needed
• Race conditions
• Several bridge calls

94. If I were to build it
today...

95. A BETTER SOLUTION
Transitions App Framework

96. YUI().USE(“APP”)
route

97. YUI().USE(“APP”)
route
Home

98. YUI().USE(“APP”)
route
Saved
Home
Items

99. YUI().USE(“APP”)
route
Saved
Home Settings
Items

100. YUI().USE(“TRANSITION”)

101. YUI().USE(“TRANSITION”)

102. YUI().USE(“TRANSITION”)
Y.one('#homeView').transition({
width: {
duration: 0.5,
easing: 'ease-out',
value: 0
}
}, function() {
showNextView();
});

103. YUI().USE(“TRANSITION”)
Y.one('#homeView').transition({
width: {
duration: 0.5,
easing: 'ease-out',
value: 0
}
}, function() {
showNextView();
});

104. BENEFITS
• Logic and content from the same stack
• No race conditions between native + web
• Reusability & maintainability

105. 3. Reacting to gestures

106. YUI().USE(“GESTURES”)

107. 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
}

108. YUI().USE(“EVENT-MOVE”)
• Itprovides a set of synthetic events to detect
gestures
• gesturemovestart, gesturemove, gesturemoveend.

109. 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
}
});

110. YUI().USE(“SCROLLVIEW”)

111. YUI().USE(“SCROLLVIEW”)

112. YUI().USE(“SCROLLVIEW”)
• Provides scrollable content for touch enabled devices.
• Two plugins: ScrollViewScrollbars & ScrollViewPaginator

113. HOW TO?
<ul id=”movies”>
<li>
<img src=”movie.jpeg”
alt=”somemovie”>
</li>
</ul>

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

115. 4. Offline & save modes

116. OFFLINE
• Two distinctions: Offline mode & Save articles to
read later
• In both cases we are using native storage

117. OFFLINE MODE
Used to display the most recent data in case
of no connectivity

118. OFFLINE MODE
Used to display the most recent data in case
of no connectivity
Data(native storage)

119. OFFLINE MODE
Used to display the most recent data in case
of no connectivity
Data(native storage)

120. OFFLINE MODE
Used to display the most recent data in case
of no connectivity
Data(native storage)
Y.Lang.Substitute (for
templating)

121. OFFLINE MODE
Used to display the most recent data in case
of no connectivity
Data from Local
Data(native storage)
storage
Y.Lang.Substitute (for
templating)

124. OFFLINE(SAVE)

125. OFFLINE(SAVE)
Core files(Already cached)

126. OFFLINE(SAVE)
Core files(Already cached)
Content

127. OFFLINE(SAVE)
Core files(Already cached)
Content
HTML

128. OFFLINE(SAVE)
Core files(Already cached)
Content
HTML CSS

129. OFFLINE(SAVE)
Core files(Already cached)
Content
HTML CSS JS

130. OFFLINE(SAVE)
Core files(Already cached)
Content
HTML CSS JS Media

131. SO...
• Ifyou need to store big files + media: Use
native storage
• Otherwise store JSON in localStorage & use
templates

132. 5. The bridge

133. THE BRIDGE
Two way communication between Native & Web

134. NATIVE->WEB

135. NATIVE->WEB

136. NATIVE->WEB

137. NATIVE->WEB

138. NATIVE -> WEB
• Call directly into JS
• Using Y.Env to expose global method
• Use Y.applyTo to call into specific function

139. WEB -> NATIVE
• By navigating to a local host/protocol
• You can use : window.location or XHR

140. WINDOW.LOCATION

141. WINDOW.LOCATION
On your JS:
window.location = myProtocol://performAction?param=foo

142. WINDOW.LOCATION
On your JS:
window.location = myProtocol://performAction?param=foo
On your native code:
if([[request.URL scheme] isEqualToString:@"myProtocol"])
{
//Parse the request, perform an action
}
else {
return TRUE; //Navigate
}

143. XHR
• Cross domain policies restrictions
• Works if the content is loaded locally
• Can send a response back

144. General best practices

145. var true = TRUE;
Everything you’ve learned
still applies

153. - Keep your JS small

154. - Keep your JS small
- Don’t touch the DOM. Keep it
Small

155. - Keep your JS small
- Don’t touch the DOM. Keep it
Small
- Every byte counts as “double” in
mobile

157. Reduce your http requests:

158. Reduce your http requests:
- Pre-pack as much as you can.

159. Reduce your http requests:
- Pre-pack as much as you can.
- Use data URI for small images.

160. Reduce your http requests:
- Pre-pack as much as you can.
- Use data URI for small images.
- Use cached templates to load similar
views.

161. Perceived performance:
Give constant UI feedback

162. Shrink your images

164. Take advantage of the
shinny:

165. Take advantage of the
shinny:
- Imageless designs(CSS3)

166. Take advantage of the
shinny:
- Imageless designs(CSS3)
- Hardware acceleration (don’t abuse
it)

167. Take advantage of the
shinny:
- Imageless designs(CSS3)
- Hardware acceleration (don’t abuse
it)
- Use new semantic HTML5 elements

169. One more thing...

170. Got a cool idea? Build it!
http://yuilibrary.com/gallery/

171. FINAL THOUGHTS
• YUI3is well suited for both Hybrid and
Mobile web apps.
• Everything you need is already available

172. 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

173. YUI().USE(“THANK YOU”)
@goonieiam
http://yuilibrary.com
http://yuilibrary.com/theater/