1. #bdconf
Embracing performance in today’s
multi-platform macrocosm

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

3. #bdconf
More

4. info

5. under

6. follow-up

7. blog

8. post

9. (URL

10. at

11. end

12. of

13. slides)
Before we get started...

14. #bdconf
CANADA!

15. Canadian Broadcasting Corporation
#bdconf

16. Canadian Broadcasting Corporation
National public radio and television broadcaster
#bdconf

17. Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR
#bdconf

18. Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
#bdconf

19. Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Large internal and external digital ecosystem
#bdconf

20. Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Large internal and external digital ecosystem
3 mobile websites
#bdconf

21. Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Large internal and external digital ecosystem
3 mobile websites
11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf

22. Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Desktop site page views ~5Mio/day
Large internal and external digital ecosystem
3 mobile websites
11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf

23. Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Desktop site page views ~5Mio/day
Mobile Touch site page views ~ 500K/day
Large internal and external digital ecosystem
3 mobile websites
11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf

24. Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Desktop site page views ~5Mio/day
Mobile Touch site page views ~ 500K/day
News app page views ~1Mio/day
Large internal and external digital ecosystem
3 mobile websites
11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf

25. #bdconf
Embracing performance in today’s
multi-platform macrocosm

26. #bdconf
PERFORMANCE
WHY THE NEED FOR SPEED?

27. #bdconf

28. #bdconf
Overestimating wait times for rides
Hidden lineups

29. #bdconf
SLOW
Perception of Speed
FAST

30. #bdconf
SLOW
Perception of Speed
Unpleasant
FAST

31. #bdconf
SLOW
Perception of Speed
Unpleasant
Unknown
FAST

32. #bdconf
SLOW
Perception of Speed
Unpleasant
Unknown
Boring
FAST

33. #bdconf
SLOW
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
FAST

34. #bdconf
SLOW
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
Responsive System
FAST

35. #bdconf
SLOW
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
Responsive System
FAST
Informed about progress

36. #bdconf
“Ultimately performance is about respect”
BRAD FROST

37. #bdconf
Embracing performance in today’s
multi-platform macrocosm

38. #bdconf
Macrocosm
#bdconf

39. #bdconf
Macrocosm
Operating systems and platforms
#bdconf

40. #bdconf
Macrocosm
Operating systems and platforms
Browsers
#bdconf

41. #bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
#bdconf

42. #bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers
#bdconf

43. #bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers Internet connections
and speed
#bdconf

44. #bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers Internet connections
and speed
Devices
#bdconf

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

46. #bdconf
CBC’s MOBILE REALITY
AND JOURNEY

47. #bdconf
FACTS WISHLIST
• Maintenance of several different code bases
• Slow 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)

48. #bdconf
• Maintenance of several different code bases
• Slow 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

49. load

50. time
More

51. frequent

52. releases
Many

53. apps

54. with

55.
limited

56. budget
FACTS WISHLIST

57. #bdconf
Foster the idea of
build once publish to many
Many

58. apps

59. with

60. limited

61. budget

62. #bdconf
HOW
?

63. #bdconf
HTML5 vs. Native(Not again....!)
It depends...

64. #bdconf
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

65. #bdconf
HTML5 + NATIVE = HYBRID

66. #bdconf
HTML5 + NATIVE = HYBRID
Marriage of web technology
and native execution

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

68. #bdconf
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

69. #bdconf
WEBSITE
WITH NATIVE WRAPPER
GOAL
More

70. frequent

71. releases

72. #bdconf
BEFORE THE HYBRID JOURNEY BEGINS

73. #bdconf
SET EXPECTATIONS AND RULES

74. #bdconf
RULES OF THUMB
NATIVE AS A PROGRESSIVE
ENHANCEMENT STRATEGY

75. #bdconf
1. Perfect Ratio
2. Admit web is not native
3. Be flexible
4. Learn from others
5. Follow native design guidelines
6. Define supported devices
7. Setup performance budgets
8. Web performance
RULES OF THUMB

76. #bdconf
WITH NATIVE WRAPPER
WEBSITE
GOAL

77. #bdconf
FOCUS ON MAKING (MOBILE) WEB FAST
WITH NATIVE WRAPPER
GOAL
Faster

78. load

79. time

80. #bdconf
PERFORMANCE ON MOBILE

81. #bdconf
Battery-driven
PERFORMANCE ON MOBILE

82. #bdconf
Battery-driven Small CPU/GPU
PERFORMANCE ON MOBILE

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

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

85. #bdconf
REDUCE
HTTP REQUESTS

86. #bdconf
EACH HTTP REQUEST
COSTS AROUND 200MS

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

88. #bdconf
TECHNIQUES

89. #bdconf
CONCATENATE AND MINIFY ASSETS
HTTP REQUESTS
TECHNIQUES

90. #bdconf
MAKE USE OF DATA URI FOR IMAGES
HTTP REQUESTS
TECHNIQUES

91. #bdconf
USE ASYNCHRONOUS MODULE DEFINITION
(AMD)
HTTP REQUESTS
TECHNIQUES

92. #bdconf
SINGLE PAGE APP
RELOAD ONLY PIECES OF PAGE
HTTP REQUESTS
TECHNIQUES

93. #bdconf
FOCUS ON MAKING (MOBILE) WEB FAST
WITH NATIVE WRAPPER
GOAL

94. #bdconf
FAST SINGLE PAGE APP
WITH NATIVE WRAPPER
GOAL

95. #bdconf
HYBRID
ARCHITECTURE
In

96. Development

97. #bdconf
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)

98. #bdconf
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

99. #bdconf
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

100. #bdconf
• 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

101. #bdconf
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

102. #bdconf
WEB LAYER
jQuery
can.JS
(MVC)
Modernizr
(AMD)
CBC libs
comtower
Other libs e.g.
Detectizr, FTscroll
Data URIs SASS

103. #bdconf
conditional

104.
styling
conditional
library

105. loading
concatenation

106. and

107. minification
concatenation

108. and

109.
minification
AMD AND MORE

110. #bdconf
data

111. uri

112. encoded
data

113. uri

114. encoded
DATA URI IMAGES

115. #bdconf
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

116. #bdconf
• 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

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

118. #bdconf
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

119. #bdconf
WebView
http://anyURL
WEBVIEW

120. #bdconf
HOW DO WE BUILD?

121. #bdconf
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

122. #bdconf
FOCUS ON PERFORMANCE
OPTIMIZATION DURING BUILD

123. #bdconf
Maven and 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

124. #bdconf
Compiled to point to hybrid URL
BUILD NATIVE APP

125. #bdconf
NEWS APP
RATIO IOS

126. #bdconf
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 and story swiping
Photo Galleries
Video Audio
Breaking News Ticker
Business Ticker
Weather
Tracking
Ads
IOS
??? ???

127. #bdconf
NEWS APP
RATIO ANDROID

128. #bdconf
100:0 App launcher
WEB NATIVE
Lineups
Stories and story swiping
Photo Galleries
Video Audio
Breaking News Ticker
Business Ticker
Weather
Tracking
Ads
ANDROID
More...

129. #bdconf
WEB ONLY
Weather
Ads
Lineups
Galleries
COMMON AND NEWS
SPECIFIC ELEMENTS

130. #bdconf
WEB AND NATIVE
Web

131. fed

132. by

133.
menu

134. JSON
Native

135. fed

136.
by

137. same

138.
menu

139. JSON
NAVIGATION

140. #bdconf
CHALLENGES

141. #bdconf
• New technologies
• New CMS (re-thinking content)
• 3rd party content supported but NOT optimized
• Mobile ads and tracking strategy
• Balance between supporting and optimizing different browsers
(Android fragmentation)
• Testing
CHALLENGES

142. #bdconf
• New technologies
• New CMS (re-thinking content)
• 3rd party content supported but NOT optimized
• Mobile ads and tracking strategy
• Balance between supporting and optimizing different browsers
(Android fragmentation)
• Testing
CHALLENGES
It’s

143. hard!

144. #bdconf
IOS WRAPPER APP
Things to watch out for

145. #bdconf
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);
}

146. #bdconf
COMTOWER DROPPING CALLS

147. #bdconf
COMTOWER DROPPING CALLS
QUEUE

148. #bdconf
JAVASCRIPT
ENGINE INSIDE
IOS WEBVIEW IS
SLOWER THAN
DEFAULT SAFARI
BUMMER!

149. #bdconf
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

150. #bdconf
TAKE AWAYS
PERFORMANCE MULTI-PLATFORM

151. #bdconf
• Performance is especially important for
battery-driven, smaller CPU devices
TAKE AWAYS
PERFORMANCE MULTI-PLATFORM

152. #bdconf
• Performance is especially important for
battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
TAKE AWAYS
PERFORMANCE MULTI-PLATFORM

153. #bdconf
• Performance is especially important for
battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
TAKE AWAYS
PERFORMANCE MULTI-PLATFORM

154. #bdconf
• Performance is especially important for
battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on
features and devices
TAKE AWAYS
PERFORMANCE MULTI-PLATFORM

155. #bdconf
• Performance is especially important for
battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on
features and devices
• Native = tailored suit
HTML5 = one bought in a shop
TAKE AWAYS
PERFORMANCE MULTI-PLATFORM

156. #bdconf
• Performance is especially important for
battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on
features and devices
• Native = tailored suit
HTML5 = one bought in a shop
• Hybrid
TAKE AWAYS
PERFORMANCE MULTI-PLATFORM

157. #bdconf
• Performance is especially important for
battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on
features and devices
• Native = tailored suit
HTML5 = one bought in a shop
• Hybrid
• Native components as progressive
enhancement strategy
TAKE AWAYS
PERFORMANCE MULTI-PLATFORM

158. #bdconf
• Performance is especially important for
battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on
features and devices
• Native = tailored suit
HTML5 = one bought in a shop
• Hybrid
• Native components as progressive
enhancement strategy
• Set expectations and rules when going
hybrid
TAKE AWAYS
PERFORMANCE MULTI-PLATFORM

159. #bdconf
• Performance is especially important for
battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on
features and devices
• Native = tailored suit
HTML5 = one bought in a shop
• Hybrid
• Native components as progressive
enhancement strategy
• Set expectations and rules when going
hybrid
• Strict focus on mobile web performance
TAKE AWAYS
PERFORMANCE MULTI-PLATFORM

160. #bdconf
THANK YOU
QUESTIONS?
http://bit.ly/bdconf-perf-macrocosm
More

161. info

162. under

163.
follow-up

164. blog

165. post

166.
(including

167. slides)