• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Embracing Performance in Today's Multi-Platform Macrocosm
 

Embracing Performance in Today's Multi-Platform Macrocosm

on

  • 8,699 views

Link here: http://bdconf.com/2013/san-diego/schedule#bbinto ...

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.

Statistics

Views

Total Views
8,699
Views on SlideShare
8,689
Embed Views
10

Actions

Likes
4
Downloads
13
Comments
0

2 Embeds 10

http://www.linkedin.com 6
http://librosweb.es 4

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Embracing Performance in Today's Multi-Platform Macrocosm Embracing Performance in Today's Multi-Platform Macrocosm Presentation Transcript

    • #bdconf Embracing performance in today’s multi-platform macrocosm
    • #bdconf BARBARA BERMES Senior Architect (Moblie Web) Digital Operations Canadian 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 websites 11 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 websites 11 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 websites 11 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 websites 11 iOS, 3 Android, 5 Blackberry, 3 Windows apps #bdconf
    • #bdconf Embracing performance in today’s multi-platform macrocosm
    • #bdconf PERFORMANCE WHY THE NEED FOR SPEED?
    • #bdconf
    • #bdconf Overestimating wait times for rides Hidden lineups
    • #bdconf SLOW Perception of Speed FAST
    • #bdconf SLOW Perception of Speed Unpleasant FAST
    • #bdconf SLOW Perception of Speed Unpleasant Unknown FAST
    • #bdconf SLOW Perception of Speed Unpleasant Unknown Boring FAST
    • #bdconf SLOW Perception of Speed Unpleasant Unknown Boring Task is successful FAST
    • #bdconf SLOW Perception of Speed Unpleasant Unknown Boring Task is successful Responsive System FAST
    • #bdconf SLOW 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 a multi-platform macrocosm where context drives our device choice
    • #bdconf CBC’s MOBILE REALITY AND 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 of build 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 = HYBRID Marriage of web technology and native execution
    • #bdconf HTML5 + NATIVE = HYBRID Marriage of web technology and native execution Downloadable app, stored on the device
    • #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
    • #bdconf WEBSITE WITH NATIVE WRAPPER GOAL More
    •   frequent
    •   releases
    • #bdconf BEFORE THE HYBRID JOURNEY BEGINS
    • #bdconf SET EXPECTATIONS AND RULES
    • #bdconf RULES OF THUMB NATIVE AS A PROGRESSIVE ENHANCEMENT 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 WRAPPER WEBSITE GOAL
    • #bdconf FOCUS ON MAKING (MOBILE) WEB FAST WITH 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 APP RELOAD ONLY PIECES OF PAGE HTTP REQUESTS TECHNIQUES
    • #bdconf FOCUS ON MAKING (MOBILE) WEB FAST WITH NATIVE WRAPPER GOAL
    • #bdconf FAST SINGLE PAGE APP WITH 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 Layer Server, 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 Layer Server, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP) FocusonPerformance FocusonPerformance
    • #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
    • #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 Layer Server, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP) FocusonPerformance FocusonPerformance
    • #bdconf WEB LAYER jQuery can.JS (MVC) Modernizr (AMD) CBC libs comtower Other libs e.g. Detectizr, FTscroll Data URIs SASS
    • #bdconf conditional
    •    styling conditional library
    •   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 Layer Server, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP) FocusonPerformance FocusonPerformance
    • #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 Native ComTowerDelegate 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 Layer Server, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP) FocusonPerformance FocusonPerformance
    • #bdconf WebView http://anyURL WEBVIEW
    • #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 externals pulling 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 APP RATIO IOS
    • #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 ??? ???
    • #bdconf NEWS APP RATIO ANDROID
    • #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...
    • #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 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); }
    • #bdconf COMTOWER DROPPING CALLS
    • #bdconf COMTOWER DROPPING CALLS QUEUE
    • #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 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
    • #bdconf TAKE AWAYS PERFORMANCE MULTI-PLATFORM
    • #bdconf • Performance is especially important for battery-driven, smaller CPU devices TAKE AWAYS PERFORMANCE MULTI-PLATFORM
    • #bdconf • Performance is especially important for battery-driven, smaller CPU devices • Each HTTP request costs around 200ms TAKE AWAYS PERFORMANCE MULTI-PLATFORM
    • #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
    • #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
    • #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
    • #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
    • #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
    • #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
    • #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
    • #bdconf THANK YOU QUESTIONS? http://bit.ly/bdconf-perf-macrocosm More
    •   info
    •   under
    •    follow-up
    •   blog
    •   post
    •    (including
    •   slides)