Upload
barbara-bermes
View
11.908
Download
2
Embed Size (px)
DESCRIPTION
Link here: http://bdconf.com/2013/san-diego/schedule#bbinto Follow-up: http://bit.ly/bdconf-perf-macrocosm With over 5 million pages, CBC.ca is one of Canada's largest web properties. As the national Canadian broadcaster, in an ever changing world of news, CBC's multi-platform development is focused on delivering content to millions of Canadians daily on any platform they choose - at any time and any place they want. CBC's decision to go hybrid has helped facilitate fast turn-around times in mobile development and multi-platform delivery. This session will discuss the challenges and best practices regarding our hybrid app development and the integration of multiple content management systems with several content areas. The importance of focusing on performance during design and development, and placing great emphasize on setting performance budgets will also be discussed during this session. Performance optimization and automation are key components for delivering fast web app experiences, therefore, developing web apps without embracing performance, will not get you anywhere. Key learning objectives of this session, include: a better understanding of what to look out for when delivering content to your audience, no matter what platform or device they choose, as well as why you should enforce performance as part of your product, design and development life cycle.
Citation preview
#bdconf
Embracing performance in today’s multi-platform macrocosm
#bdconf
BARBARA BERMESSenior Architect (Moblie Web)Digital OperationsCanadian Broadcasting Corporation (CBC)
bbinto
#bdconf
More����������� ������������������ info����������� ������������������ under����������� ������������������ follow-up����������� ������������������ blog����������� ������������������ post����������� ������������������ (URL����������� ������������������ at����������� ������������������ end����������� ������������������ of����������� ������������������ slides)
Before we get started...
#bdconf
CANADA!
Canadian Broadcasting Corporation
#bdconf
Canadian Broadcasting Corporation
National public radio and television broadcaster
#bdconf
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR
#bdconf
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
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
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
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 websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf
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 websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf
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 websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf
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 websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf
#bdconf
Embracing performance in today’s multi-platform macrocosm
#bdconf
PERFORMANCEWHY THE NEED FOR SPEED?
#bdconf
#bdconf
Overestimating wait times for rides
Hidden lineups
#bdconf
S L O W
Perception of Speed
FAST
#bdconf
S L O W
Perception of Speed
Unpleasant
FAST
#bdconf
S L O W
Perception of Speed
Unpleasant
Unknown
FAST
#bdconf
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
FAST
#bdconf
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
FAST
#bdconf
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
Responsive System
FAST
#bdconf
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
Responsive System
FAST
Informed about progress
#bdconf
“Ultimately performance is about respect”
BRAD FROST
#bdconf
Embracing performance in today’s multi-platform macrocosm
#bdconf
Macrocosm
#bdconf
#bdconf
Macrocosm
Operating systems and platforms
#bdconf
#bdconf
Macrocosm
Operating systems and platforms
Browsers
#bdconf
#bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
#bdconf
#bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers
#bdconf
#bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers Internet connections and speed
#bdconf
#bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers Internet connections and speed
Devices
#bdconf
#bdconf
We are multi-screeners in amulti-platform macrocosm where context drives our device choice
#bdconf
CBC’s MOBILE REALITYAND JOURNEY
#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)
#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����������� ������������������ load����������� ������������������ time
More����������� ������������������ frequent����������� ������������������ releases
Many����������� ������������������ apps����������� ������������������ with����������� ������������������
limited����������� ������������������ budget
FACTS & WISHLIST
#bdconf
Foster the idea ofbuild once publish to many
Many����������� ������������������ apps����������� ������������������ with����������� ������������������ limited����������� ������������������ budget
#bdconf
HOW?
#bdconf
HTML5 vs. Native(Not again....!)
It depends...
#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
#bdconf
HTML5 + NATIVE = HYBRID
#bdconf
HTML5 + NATIVE = HYBRIDMarriage of web technology and native execution
#bdconf
HTML5 + NATIVE = HYBRIDMarriage of web technology and native execution
Downloadable app, stored on the device
#bdconf
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
#bdconf
WEBSITEWITH NATIVE WRAPPER
GOAL
More����������� ������������������ frequent����������� ������������������ releases
#bdconf
BEFORE THE HYBRID JOURNEY BEGINS
#bdconf
SET EXPECTATIONS AND RULES
#bdconf
RULES OF THUMB
NATIVE AS A PROGRESSIVEENHANCEMENT STRATEGY
#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
#bdconf
WITH NATIVE WRAPPERWEBSITE
GOAL
#bdconf
FOCUS ON MAKING (MOBILE) WEB FASTWITH NATIVE WRAPPER
GOAL
Faster����������� ������������������ load����������� ������������������ time
#bdconf
PERFORMANCE ON MOBILE
#bdconf
Battery-driven
PERFORMANCE ON MOBILE
#bdconf
Battery-driven Small CPU/GPU
PERFORMANCE ON MOBILE
#bdconf
Battery-driven Small CPU/GPU
Network connectivity and latency
PERFORMANCE ON MOBILE
#bdconf
Battery-driven Small CPU/GPU
Network connectivity and latency
Data usage
PERFORMANCE ON MOBILE
#bdconf
REDUCE HTTP REQUESTS
#bdconf
EACH HTTP REQUEST COSTS AROUND 200MS
#bdconf
• Reduce HTTP requests
• Avoid latency issues as much as possible
• Only load what is needed
CONCEPT
#bdconf
TECHNIQUES
#bdconf
CONCATENATE AND MINIFY ASSETS
HTTP REQUESTS TECHNIQUES
#bdconf
MAKE USE OF DATA URI FOR IMAGES
HTTP REQUESTS TECHNIQUES
#bdconf
USE ASYNCHRONOUS MODULE DEFINITION (AMD)
HTTP REQUESTS TECHNIQUES
#bdconf
SINGLE PAGE APPRELOAD ONLY PIECES OF PAGE
HTTP REQUESTS TECHNIQUES
#bdconf
FOCUS ON MAKING (MOBILE) WEB FASTWITH NATIVE WRAPPER
GOAL
#bdconf
FAST SINGLE PAGE APPWITH NATIVE WRAPPER
GOAL
#bdconf
HYBRID ARCHITECTURE
In����������� ������������������ Development
#bdconf
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)
#bdconf
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
#bdconf
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
#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
#bdconf
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
#bdconf
WEB LAYER
jQuery
can.JS(MVC)
Modernizr (AMD)
CBC libscomtower
Other libs e.g.Detectizr, FTscroll
Data URIs SASS
#bdconf
conditional����������� ������������������ styling
conditionallibrary����������� ������������������ loading
concatenation����������� ������������������ and����������� ������������������ minification
concatenation����������� ������������������ and����������� ������������������ minification
AMD AND MORE
#bdconf
data����������� ������������������ uri����������� ������������������ encoded
data����������� ������������������ uri����������� ������������������ encoded
DATA URI IMAGES
#bdconf
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
#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
#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
NativeComTowerDelegate
3
#bdconf
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
#bdconf
HOW DO WE BUILD?
#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 externalspulling in files from both modules
#bdconf
FOCUS ON PERFORMANCE OPTIMIZATION DURING BUILD
#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
#bdconf
Compiled to point to hybrid URL
BUILD NATIVE APP
#bdconf
NEWS APPRATIO IOS
#bdconf
Navigation (Menu and horizontal sub navigation)Pull to Refresh
Push Notifications
Sharing Tools
Send your News
70:30
Offline
FavoritesMore...
WEB NATIVE Lineups
Stories and story swiping
Photo Galleries
Video & AudioBreaking News Ticker
Business Ticker
Weather
Tracking
Ads
IOS
??? ???
#bdconf
NEWS APPRATIO ANDROID
#bdconf
100:0 App launcher
WEB NATIVE Lineups
Stories and story swiping
Photo Galleries
Video & AudioBreaking News Ticker
Business Ticker
Weather
Tracking
Ads
ANDROID
More...
#bdconf
WEB ONLY
Weather
Ads
Lineups
Galleries
COMMON AND NEWS SPECIFIC ELEMENTS
#bdconf
WEB AND NATIVE
Web����������� ������������������ fed����������� ������������������ by����������� ������������������
menu����������� ������������������ JSON
Native����������� ������������������ fed����������� ������������������
by����������� ������������������ same����������� ������������������
menu����������� ������������������ JSON
NAVIGATION
#bdconf
CHALLENGES
#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
#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����������� ������������������ hard!
#bdconf
IOS WRAPPER APP Things to watch out for
#bdconf
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);}
#bdconf
COMTOWER DROPPING CALLS
#bdconf
COMTOWER DROPPING CALLSQUEUE
#bdconf
JAVASCRIPT ENGINE INSIDE IOS WEBVIEW IS SLOWER THAN DEFAULT SAFARI
BUMMER!
#bdconf
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
#bdconf
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
#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 AWAYSPERFORMANCE MULTI-PLATFORM
#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 suitHTML5 = one bought in a shop
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
#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 suitHTML5 = one bought in a shop
• Hybrid
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
#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 suitHTML5 = one bought in a shop
• Hybrid
• Native components as progressive enhancement strategy
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
#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 suitHTML5 = one bought in a shop
• Hybrid
• Native components as progressive enhancement strategy
• Set expectations and rules when going hybrid
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
#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 suitHTML5 = 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 AWAYSPERFORMANCE MULTI-PLATFORM
#bdconf
THANK YOUQUESTIONS?http://bit.ly/bdconf-perf-macrocosm
More����������� ������������������ info����������� ������������������ under����������� ������������������ follow-up����������� ������������������ blog����������� ������������������ post����������� ������������������ (including����������� ������������������ slides)