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