WebExpo Talk: EMBRACING PERFORMANCE IN TODAY’S MULTI-PLATFORM MACROCOSM
0 likes•11,040 views
The document discusses the need for enhanced performance in modern multi-platform applications, emphasizing the significance of speed and responsiveness across devices. It highlights challenges such as code fragmentation and the need for faster release cycles for various platforms, suggesting a hybrid approach that combines HTML5 and native technologies. Additionally, it outlines performance optimization techniques and the importance of minimizing HTTP requests to improve user experience.
WebExpo Talk: EMBRACING PERFORMANCE IN TODAY’S 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
- 9. #webexpo
- 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
- 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
- 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
- 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
- 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
- 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
- 113. #webexpo FOCUS ON MAKING (MOBILE) WEB FAST WITH NATIVE WRAPPER GOAL Faster
- 114. load
- 115. time
- 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
- 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
- 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
- 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
- 148. and
- 150. and
- 152. #webexpo data
- 153. uri
- 154. encoded data
- 155. uri
- 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
- 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
- 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 ??? ???
- 170. #webexpo 100:0 App launcher WEB NATIVE Lineups Stories Photo Galleries Video Audio Breaking News Ticker Business Ticker Weather Tracking Ads ANDROID More...
- 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); }
- 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
- 201. info
- 202. under
- 203. follow-up
- 204. blog
- 205. post
- 206. (including
- 207. slides)