#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

WebViewhttp://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 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)