webexpo talk: embracing performance in today’s multi-platform macrocosm
DESCRIPTION
See more under: http://webexpo.net/prague2013/talk/embracing-performance-in-todays-multi-platform-macrocosm/TRANSCRIPT
#webexpo
Embracing performance in today’s multi-platform macrocosm
Ahoj Prague
#webexpo
BARBARA BERMES
Senior Architect (Moblie Web)Digital OperationsCanadian Broadcasting Corporation
bbinto
#webexpo
1998 1989
#webexpo
1989
#webexpo
1998
#webexpo
201
3
#webexpo
CANADA!
#webexpo
/beebs/
#webexpo
#webexpo
Canadian Broadcasting Corporation
/ceeebs/
#webexpo
Embracing performance in today’s multi-platform macrocosm
#webexpo
PERFORMANCEWHY IS THERE A NEED FOR
SPEED?
#webexpo
#webexpo
Houston’s airport: customer complaints
More����������� ������������������ info����������� ������������������ under����������� ������������������ follow-up����������� ������������������ blog����������� ������������������ post����������� ������������������ (URL����������� ������������������ at����������� ������������������ end����������� ������������������ of����������� ������������������ slides)
#webexpo
Houston’s airport: customer complaints
It takes so long....grrrrr
More����������� ������������������ info����������� ������������������ under����������� ������������������ follow-up����������� ������������������ blog����������� ������������������ post����������� ������������������ (URL����������� ������������������ at����������� ������������������ end����������� ������������������ of����������� ������������������ slides)
#webexpo
Houston’s airport: customer complaints
It takes so long....grrrrr
6x 6x
More����������� ������������������ info����������� ������������������ under����������� ������������������ follow-up����������� ������������������ blog����������� ������������������ post����������� ������������������ (URL����������� ������������������ at����������� ������������������ end����������� ������������������ of����������� ������������������ slides)
#webexpo
Houston’s airport: customer complaints
It takes so long....grrrrr
6x
All good, bla bla...
6x
More����������� ������������������ info����������� ������������������ under����������� ������������������ follow-up����������� ������������������ blog����������� ������������������ post����������� ������������������ (URL����������� ������������������ at����������� ������������������ end����������� ������������������ of����������� ������������������ slides)
#webexpo
Overestimating wait times for rides
Hidden lineups
#webexpo
S L O W
Perception of Speed
FAST
#webexpo
S L O W
Perception of Speed
Unpleasant
FAST
#webexpo
S L O W
Perception of Speed
Unpleasant
Unknown
FAST
#webexpo
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
FAST
#webexpo
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
FAST
#webexpo
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
Responsive system
FAST
#webexpo
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
Responsive system
FAST
Informed about progress
#webexpo
“Ultimately performance is about respect”
BRAD FROST
#webexpo
Embracing performance in today’s multi-platform macrocosm
#webexpo
Macrocosm#webexpo
#webexpo
Macrocosm
Operating systems and platforms
#webexpo
#webexpo
Macrocosm
Operating systems and platforms
Browsers
#webexpo
#webexpo
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
#webexpo
#webexpo
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers
#webexpo
#webexpo
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providersInternet connections
and speed
#webexpo
#webexpo
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providersInternet connections
and speed
Devices
#webexpo
#webexpo
We are multi-screeners in amulti-platform macrocosm where context drives our device choice
#webexpo
CBC’s MOBILE REALITYAND JOURNEY
#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)
#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����������� ������������������ load����������� ������������������ time
More����������� ������������������ frequent����������� ������������������ releases
Many����������� ������������������ apps����������� ������������������ with����������� ������������������
limited����������� ������������������ budget
FACTS & WISHLIST
#webexpo
Foster the idea ofbuild once publish to many
Many����������� ������������������ apps����������� ������������������ with����������� ������������������ limited����������� ������������������ budget
#webexpo
HOW?
#webexpo
HTML5 vs. Native(Not again....!)
It depends...
#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
#webexpo
HTML5 + NATIVE = HYBRID
#webexpo
HTML5 + NATIVE = HYBRIDMarriage of web technology and native execution
#webexpo
HTML5 + NATIVE = HYBRIDMarriage of web technology and native execution
Downloadable app, stored on the device
#webexpo
HTML5 + NATIVE = HYBRIDMarriage 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
#webexpo
WEBSITE
WITH NATIVE WRAPPER
GOAL
More����������� ������������������ frequent����������� ������������������ releases
#webexpo
BEFORE THE HYBRID JOURNEY BEGINS
#webexpo
SET EXPECTATIONS AND RULES
#webexpo
RULES OF THUMB
NATIVE AS A PROGRESSIVEENHANCEMENT STRATEGY
#webexpo
RULES OF THUMB
#webexpo
1. Perfect Ratio between web and native
RULES OF THUMB
#webexpo
1. Perfect Ratio between web and native
2. Admit web is not native
RULES OF THUMB
#webexpo
1. Perfect Ratio between web and native
2. Admit web is not native
3. Learn from others
RULES OF THUMB
#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
#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
#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
#webexpo
WITH NATIVE WRAPPERWEBSITE
GOAL
#webexpo
FOCUS ON MAKING (MOBILE) WEB FASTWITH NATIVE WRAPPER
GOAL
Faster����������� ������������������ load����������� ������������������ time
#webexpo
PERFORMANCE ON MOBILE
#webexpo
Battery-driven
PERFORMANCE ON MOBILE
#webexpo
Battery-driven Small CPU/GPU
PERFORMANCE ON MOBILE
#webexpo
Battery-driven Small CPU/GPU
Network connectivity and latency
PERFORMANCE ON MOBILE
#webexpo
Battery-driven Small CPU/GPU
Network connectivity and latency
Data usage
PERFORMANCE ON MOBILE
#webexpo
DON’T MAKE THE USER PAY FOR BAD PERFORMANCE
#webexpo
REDUCE HTTP REQUESTS
#webexpo
EACH HTTP REQUEST COSTS AROUND 200MS
#webexpo
• Reduce HTTP requests
• Avoid latency issues as much as possible
• Only load what is needed
CONCEPT
#webexpo
TECHNIQUES
#webexpo
CONCATENATE AND MINIFY ASSETS
HTTP REQUESTS TECHNIQUES
#webexpo
MAKE USE OF DATA URI FOR IMAGES
HTTP REQUESTS TECHNIQUES
#webexpo
USE ASYNCHRONOUS MODULE DEFINITION (AMD)
HTTP REQUESTS TECHNIQUES
#webexpo
SINGLE PAGE APPRELOAD ONLY PIECES OF PAGE
HTTP REQUESTS TECHNIQUES
#webexpo
FOCUS ON MAKING (MOBILE) WEB FAST
WITH NATIVE WRAPPER
GOAL
#webexpo
FAST SINGLE PAGE APP
WITH NATIVE WRAPPER
GOAL
#webexpo
HYBRID ARCHITECTURE
In����������� ������������������ Development
#webexpo
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and web)
Web Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend LayerServer, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
#webexpo
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and web)
Web Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend LayerServer, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
Fo
cus
on
Pe
rfo
rma
nce
Fo
cus o
n P
erfo
rma
nce
#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
#webexpo
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and web)
Web Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend LayerServer, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
Fo
cus
on
Pe
rfo
rma
nce
Fo
cus o
n P
erfo
rma
nce
#webexpo
WEB LAYER
#webexpo
WEB LAYER
jQuery
#webexpo
WEB LAYER
jQuery
can.JS(MVC)
#webexpo
WEB LAYER
jQuery
can.JS(MVC)
Modernizr (AMD)
#webexpo
WEB LAYER
jQuery
can.JS(MVC)
Modernizr (AMD)
CBC libscomtower
#webexpo
WEB LAYER
jQuery
can.JS(MVC)
Modernizr (AMD)
CBC libscomtower
Other libse.g. Detectizr,
FTscroller
#webexpo
WEB LAYER
jQuery
can.JS(MVC)
Modernizr (AMD)
CBC libscomtower
Other libse.g. Detectizr,
FTscroller
Data URIs SASS
#webexpo
conditional����������� ������������������ styling
conditionallibrary����������� ������������������ loading
concatenation����������� ������������������ and����������� ������������������ minification
concatenation����������� ������������������ and����������� ������������������ minification
AMD AND MORE
#webexpo
data����������� ������������������ uri����������� ������������������ encoded
data����������� ������������������ uri����������� ������������������ encoded
DATA URI IMAGES
#webexpo
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and web)
Web (Frontend) Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend LayerServer, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
Fo
cus
on
Pe
rfo
rma
nce
Fo
cus o
n P
erfo
rma
nce
#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
#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
NativeComTowerDelegate
2
#webexpo
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and web)
Web (Frontend) Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend LayerServer, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
Fo
cus
on
Pe
rfo
rma
nce
Fo
cus o
n P
erfo
rma
nce
#webexpo
HOW DO WE BUILD?
#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 externalspulling in files from both modules
#webexpo
FOCUS ON PERFORMANCE OPTIMIZATION DURING BUILD
#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
#webexpo
Compiled to point to hybrid URL
BUILD NATIVE APP
#webexpo
NEWS APPRATIO IOS
#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
??? ???
#webexpo
NEWS APPRATIO ANDROID
#webexpo
100:0App launcher
WEB NATIVE Lineups
Stories
Photo Galleries
Video & Audio
Breaking News Ticker
Business Ticker
Weather
Tracking
Ads
ANDROID
More...
#webexpo
WEB
Weather
Ads
Lineups
Galleries
COMMON AND NEWS SPECIFIC ELEMENTS
#webexpo
WEB AND NATIVE
Web����������� ������������������ fed����������� ������������������ by����������� ������������������
menu����������� ������������������ JSON
Native����������� ������������������ fed����������� ������������������ by����������� ������������������
same����������� ������������������ menu����������� ������������������ JSON
NAVIGATION
#webexpo
CHALLENGES
#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
CHALLENGES
#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
CHALLENGES
It’s����������� ������������������ hard!
#webexpo
IOS WRAPPER APP Things to watch out for
#webexpo
WEBKIT CSSbody {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);}
?
#webexpo
WEBKIT CSSbody { /* 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);}
#webexpo
COMTOWER DROPPING CALLS
QUEUE
#webexpo
JAVASCRIPT ENGINE INSIDE IOS WEBVIEW IS SLOWER
THAN DEFAULT SAFARI
BUMMER!
#webexpo
0
1000
2000
3000
4000
5000
6000
7000
8000
IE9/Win 7
Chrome24/Win 7
Firefox 18/Win 7
Opera11.61/Win 7
Safari/iOS 5/iPad 3
Safari/iOS 6/iPhone 4S
Chrome 24/Android 4.2.1/Nexus 4
Silk/KindleFire
IE 8/Win 7
WebView/iOS 6/iPhone 4s
WebView/iOS 5/iPad 3
tim
e (m
s) Bad
Good
JAVASCRIPT PERFORMANCE ON VARIOUS PLATFORMS
#webexpo
TAKE AWAYS TO REMEMBER
#webexpo
TAKE AWAYS TO REMEMBER
• Performance is especially important for battery-driven, smaller CPU devices (= Mobile)
#webexpo
TAKE AWAYS TO REMEMBER
• Performance is especially important for battery-driven, smaller CPU devices (= Mobile)
• Each HTTP request costs around 200ms
#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
#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
#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
#webexpo
AND WHAT COMES AFTER MACROCOSM?
#webexpo
Beer
#webexpo
THANK YOUQUESTIONS?http://bit.ly/perf-macrocosm
More����������� ������������������ info����������� ������������������ under����������� ������������������ follow-up����������� ������������������ blog����������� ������������������ post����������� ������������������ (including����������� ������������������ slides)