See more under: http://webexpo.net/prague2013/talk/embracing-performance-in-todays-multi-platform-macrocosm/

1. #webexpo
Embracing performance in today’s
multi-platform macrocosm
Ahoj
Prague

2. #webexpo
BARBARA BERMES
Senior Architect (Moblie Web)
Digital Operations
Canadian Broadcasting Corporation
bbinto

3. #webexpo
19981989

4. #webexpo
1989

5. #webexpo
1998

6. #webexpo
2013

7. #webexpo
CANADA!

8. #webexpo
/beebs/

9. #webexpo

10. #webexpo
Canadian Broadcasting Corporation
/ceeebs/

11. #webexpo
Embracing performance in today’s
multi-platform macrocosm

12. #webexpo
PERFORMANCE
WHY IS THERE A NEED FOR
SPEED?

13. #webexpo

14. #webexpo
Houston’s airport: customer complaints
More

15. info

16. under

17. follow-up

18. blog

19. post

20. (URL

21. at

22. end

23. of

24. slides)

25. #webexpo
Houston’s airport: customer complaints
It takes so long....grrrrr
More

26. info

27. under

28. follow-up

29. blog

30. post

31. (URL

32. at

33. end

34. of

35. slides)

36. #webexpo
Houston’s airport: customer complaints
It takes so long....grrrrr
6x 6x
More

37. info

38. under

39. follow-up

40. blog

41. post

42. (URL

43. at

44. end

45. of

46. slides)

47. #webexpo
Houston’s airport: customer complaints
It takes so long....grrrrr
6x
All good, bla bla...
6x
More

48. info

49. under

50. follow-up

51. blog

52. post

53. (URL

54. at

55. end

56. of

57. slides)

58. #webexpo
Overestimating wait times for rides
Hidden lineups

59. #webexpo
SLOW
Perception of Speed
FAST

60. #webexpo
SLOW
Perception of Speed
Unpleasant
FAST

61. #webexpo
SLOW
Perception of Speed
Unpleasant
Unknown
FAST

62. #webexpo
SLOW
Perception of Speed
Unpleasant
Unknown
Boring
FAST

63. #webexpo
SLOW
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
FAST

64. #webexpo
SLOW
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
Responsive system
FAST

65. #webexpo
SLOW
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
Responsive system
FAST
Informed about progress

66. #webexpo
“Ultimately performance is about respect”
BRAD FROST

67. #webexpo
Embracing performance in today’s
multi-platform macrocosm

68. #webexpo
Macrocosm
#webexpo

69. #webexpo
Macrocosm
Operating systems and platforms
#webexpo

70. #webexpo
Macrocosm
Operating systems and platforms
Browsers
#webexpo

71. #webexpo
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
#webexpo

72. #webexpo
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers
#webexpo

73. #webexpo
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers
Internet connections
and speed
#webexpo

74. #webexpo
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers
Internet connections
and speed
Devices
#webexpo

75. #webexpo
We are multi-screeners in a
multi-platform macrocosm where
context drives our device choice

76. #webexpo
CBC’s MOBILE REALITY
AND JOURNEY

77. #webexpo
FACTS WISHLIST
• Maintenance of several different code bases
• Slow iOS news app
• Device and OS fragmentation
• Every content area wants to build their own
app
• News broadcaster: Be able to push new
features to apps as soon as possible (without
review process)

78. #webexpo
• Maintenance of several different code bases
• Slow iOS news app
• Device and OS fragmentation
• Every content area wants to build their own
app
• News broadcaster: Be able to push new
features to apps as soon as possible (without
review process)
Faster

79. load

80. time
More

81. frequent

82. releases
Many

83. apps

84. with

85.
limited

86. budget
FACTS WISHLIST

87. #webexpo
Foster the idea of
build once publish to many
Many

88. apps

89. with

90. limited

91. budget

92. #webexpo
HOW
?

93. #webexpo
HTML5 vs. Native
(Not again....!)
It depends...

94. #webexpo
HTML5 vs. Native
“Comparing an HTML5 application’s performance
with a native app is comparing a tailored suit with
one bought in a shop”
Chris Heilmann

95. #webexpo
HTML5 + NATIVE = HYBRID

96. #webexpo
HTML5 + NATIVE = HYBRID
Marriage of web technology
and native execution

97. #webexpo
HTML5 + NATIVE = HYBRID
Marriage of web technology
and native execution
Downloadable app, stored on
the device

98. #webexpo
HTML5 + NATIVE = HYBRID
Marriage of web technology
and native execution
Downloadable app, stored on
the device
Runs all or some of its user
interface in an embedded
browser component

99. #webexpo
WEBSITE
WITH NATIVE WRAPPER
GOAL
More

100. frequent

101. releases

102. #webexpo
BEFORE THE HYBRID JOURNEY BEGINS

103. #webexpo
SET EXPECTATIONS AND RULES

104. #webexpo
RULES OF THUMB
NATIVE AS A PROGRESSIVE
ENHANCEMENT STRATEGY

105. #webexpo
RULES OF THUMB

106. #webexpo
1. Perfect Ratio between web and native
RULES OF THUMB

107. #webexpo
1. Perfect Ratio between web and native
2. Admit web is not native
RULES OF THUMB

108. #webexpo
1. Perfect Ratio between web and native
2. Admit web is not native
3. Learn from others
RULES OF THUMB

109. #webexpo
1. Perfect Ratio between web and native
2. Admit web is not native
3. Learn from others
4. Follow native design guidelines
RULES OF THUMB

110. #webexpo
1. Perfect Ratio between web and native
2. Admit web is not native
3. Learn from others
4. Follow native design guidelines
5. Define a set of supported devices
RULES OF THUMB

111. #webexpo
1. Perfect Ratio between web and native
2. Admit web is not native
3. Learn from others
4. Follow native design guidelines
5. Define a set of supported devices
6. Focus on and setup performance budgets
RULES OF THUMB

112. #webexpo
WITH NATIVE WRAPPER
WEBSITE
GOAL

113. #webexpo
FOCUS ON MAKING (MOBILE) WEB FAST
WITH NATIVE WRAPPER
GOAL
Faster

114. load

115. time

116. #webexpo
PERFORMANCE ON MOBILE

117. #webexpo
Battery-driven
PERFORMANCE ON MOBILE

118. #webexpo
Battery-driven Small CPU/GPU
PERFORMANCE ON MOBILE

119. #webexpo
Battery-driven Small CPU/GPU
Network
connectivity
and latency
PERFORMANCE ON MOBILE

120. #webexpo
Battery-driven Small CPU/GPU
Network
connectivity
and latency
Data usage
PERFORMANCE ON MOBILE

121. #webexpo
DON’T MAKE THE USER
PAY FOR BAD PERFORMANCE

122. #webexpo
REDUCE
HTTP REQUESTS

123. #webexpo
EACH HTTP REQUEST
COSTS AROUND 200MS

124. #webexpo
• Reduce HTTP requests
• Avoid latency issues as much as
possible
• Only load what is needed
CONCEPT

125. #webexpo
TECHNIQUES

126. #webexpo
CONCATENATE AND MINIFY ASSETS
HTTP REQUESTS
TECHNIQUES

127. #webexpo
MAKE USE OF DATA URI FOR IMAGES
HTTP REQUESTS
TECHNIQUES

128. #webexpo
USE ASYNCHRONOUS MODULE
DEFINITION (AMD)
HTTP REQUESTS
TECHNIQUES

129. #webexpo
SINGLE PAGE APP
RELOAD ONLY PIECES OF PAGE
HTTP REQUESTS
TECHNIQUES

130. #webexpo
FOCUS ON MAKING (MOBILE) WEB FAST
WITH NATIVE WRAPPER
GOAL

131. #webexpo
FAST SINGLE PAGE APP
WITH NATIVE WRAPPER
GOAL

132. #webexpo
HYBRID
ARCHITECTURE
In

133. Development

134. #webexpo
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and
web)
Web Layer
(HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend Layer
Server, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)

135. #webexpo
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and
web)
Web Layer
(HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend Layer
Server, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
FocusonPerformance
FocusonPerformance

136. #webexpo
• JSON feeds (content source and configuration)
• Using content delivery network (CDN)
• Edge Side Include SSI (device, native/web detection)
• PHP (server-side ads implementation)
BACKEND LAYER

137. #webexpo
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and
web)
Web Layer
(HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend Layer
Server, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
FocusonPerformance
FocusonPerformance

138. #webexpo
WEB LAYER

139. #webexpo
WEB LAYER
jQuery

140. #webexpo
WEB LAYER
jQuery
can.JS
(MVC)

141. #webexpo
WEB LAYER
jQuery
can.JS
(MVC)
Modernizr
(AMD)

142. #webexpo
WEB LAYER
jQuery
can.JS
(MVC)
Modernizr
(AMD)
CBC libs
comtower

143. #webexpo
WEB LAYER
jQuery
can.JS
(MVC)
Modernizr
(AMD)
CBC libs
comtower
Other libs
e.g. Detectizr,
FTscroller

144. #webexpo
WEB LAYER
jQuery
can.JS
(MVC)
Modernizr
(AMD)
CBC libs
comtower
Other libs
e.g. Detectizr,
FTscroller
Data URIs SASS

145. #webexpo
conditional

146.
styling
conditional
library

147. loading
concatenation

148. and

149. minification
concatenation

150. and

151. minification
AMD AND MORE

152. #webexpo
data

153. uri

154. encoded
data

155. uri

156. encoded
DATA URI IMAGES

157. #webexpo
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and
web)
Web (Frontend) Layer
(HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend Layer
Server, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
FocusonPerformance
FocusonPerformance

158. #webexpo
• Communication protocol between native to web
(bi-directional)
• Inspired by communication + CN Tower = ComTower
• JavaScript sending messages to native app inside
iFrame as “the window to the app”
• App executing JavaScript functions inside the
webpage
COMTOWER

159. #webexpo
Startup:
HTTP Header set via native
$(HTTP_CBC_COMTOWER) =TRUE
comtower call
JavaScript callback
1
e.g. native sharing
e.g. app version
Web
iframe/
2
Native
ComTowerDelegate
2

160. #webexpo
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and
web)
Web (Frontend) Layer
(HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend Layer
Server, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
FocusonPerformance
FocusonPerformance

161. #webexpo
WebView
http://anyURL
WEBVIEW

162. #webexpo
HOW DO WE BUILD?

163. #webexpo
BUILD WEB APPImplementation of framework
Common elements
(CSS, JS)
Platform specific CSS
and JS
Framework
App specific widgets
(not shared with other
apps)
App specific styles
App
concatenated, minified,
compiled
Maven build +
SVN externals
pulling in files from
both modules

164. #webexpo
FOCUS ON PERFORMANCE
OPTIMIZATION DURING BUILD

165. #webexpo
Maven Plugins
AUTOMATED BUILT-IN
PERFORMANCE OPTIMIZATION
• Closure Compiler (Google)
• Minify-maven-plugin
• HTMLCompressor for html
• Integrated performance checks
• Confess based on Phantom JS
• compass for data URI

166. #webexpo
Compiled to point to hybrid URL
BUILD NATIVE APP

167. #webexpo
NEWS APP
RATIO IOS

168. #webexpo
Navigation
(Menu and horizontal
sub navigation)
Pull to Refresh
Push Notifications
Sharing Tools
Send your News
70:30
Offline
Favorites
More...
WEB NATIVE
Lineups
Stories
Photo Galleries
Video Audio
Breaking News Ticker
Business Ticker
Weather
Tracking
Ads
IOS
??? ???

169. #webexpo
NEWS APP
RATIO ANDROID

170. #webexpo
100:0 App launcher
WEB NATIVE
Lineups
Stories
Photo Galleries
Video Audio
Breaking News Ticker
Business Ticker
Weather
Tracking
Ads
ANDROID
More...

171. #webexpo
WEB
Weather
Ads
Lineups
Galleries
COMMON AND NEWS
SPECIFIC ELEMENTS

172. #webexpo
WEB AND NATIVE
Web

173. fed

174. by

175.
menu

176. JSON
Native

177. fed

178. by

179.
same

180. menu

181. JSON
NAVIGATION

182. #webexpo
CHALLENGES

183. #webexpo
• New technologies
• Ever changing requirements and priority shifts
• New CMS (re-thinking content) and 3rd party strategy
• 3rd party content supported but NOT optimized
• Balance between supporting and optimizing different
browsers (Android fragmentation)
• Testing
CHALLENGE

184. #webexpo
• New technologies
• Ever changing requirements and priority shifts
• New CMS (re-thinking content) and 3rd party strategy
• 3rd party content supported but NOT optimized
• Balance between supporting and optimizing different
browsers (Android fragmentation)
• Testing
CHALLENGE
It’s

185. hard!

186. #webexpo
IOS WRAPPER APP
Things to watch out for

187. #webexpo
WEBKIT CSS
body {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
?

188. #webexpo
WEBKIT CSS
body {
/* Disables the default callout shown when you
touch and hold
a touch target */
-webkit-touch-callout: none;
/* Overrides the highlight color shown when the
user taps a
link */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

189. #webexpo
COMTOWER DROPPING CALLS
QUEUE

190. #webexpo
JAVASCRIPT ENGINE INSIDE
IOS WEBVIEW IS SLOWER
THAN DEFAULT SAFARI
BUMMER!

191. #webexpo
0
1000
2000
3000
4000
5000
6000
7000
8000
IE9/
Win 7
Chrome
24/
Win 7
Firefox 18/
Win 7
Opera
11.61/
Win 7
Safari/
iOS 5/
iPad 3
Safari/
iOS 6/
iPhone 4S
Chrome 24/
Android
4.2.1/
Nexus 4
Silk/
Kindle
Fire
IE 8/
Win 7
WebView/
iOS 6/
iPhone 4s
WebView/
iOS 5/
iPad 3
time(ms)
Bad
Good
JAVASCRIPT PERFORMANCE
ON VARIOUS PLATFORMS

192. #webexpo
TAKE AWAYS TO REMEMBER

193. #webexpo
TAKE AWAYS TO REMEMBER
• Performance is especially important for battery-
driven, smaller CPU devices (= Mobile)

194. #webexpo
TAKE AWAYS TO REMEMBER
• Performance is especially important for battery-
driven, smaller CPU devices (= Mobile)
• Each HTTP request costs around 200ms

195. #webexpo
TAKE AWAYS TO REMEMBER
• Performance is especially important for battery-
driven, smaller CPU devices (= Mobile)
• Each HTTP request costs around 200ms
• Automate performance optimization

196. #webexpo
TAKE AWAYS TO REMEMBER
• Performance is especially important for battery-
driven, smaller CPU devices (= Mobile)
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on features
and devices

197. #webexpo
TAKE AWAYS TO REMEMBER
• Performance is especially important for battery-
driven, smaller CPU devices (= Mobile)
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on features
and devices
• Native components as progressive enhancement
strategy

198. #webexpo
AND WHAT COMES AFTER
MACROCOSM?

199. #webexpo
Beer

200. #webexpo
THANK YOU
QUESTIONS?
http://bit.ly/perf-macrocosm
More

201. info

202. under

203. follow-up

204. blog

205. post

206. (including

207. slides)