WebExpo Talk: EMBRACING PERFORMANCE IN TODAY’S MULTI-PLATFORM MACROCOSM

#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


#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


It takes so long....grrrrr


#webexpo



6x 6x


#webexpo



6x

All good, bla bla...

6x


#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


#webexpo

Macrocosm#webexpo

#webexpo

Macrocosm

Operating systems and platforms

#webexpo

#webexpo

Macrocosm


Browsers

#webexpo

#webexpo

Macrocosm


Browsers

Internet service providers

#webexpo

#webexpo

Macrocosm


Browsers


Cellular providers

#webexpo

#webexpo

Macrocosm


Browsers


Cellular providersInternet connections

and speed

#webexpo

#webexpo

Macrocosm


Browsers


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


Downloadable app, stored on the device

#webexpo


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


2. Admit web is not native

RULES OF THUMB

#webexpo



3. Learn from others

RULES OF THUMB

#webexpo




4. Follow native design guidelines

RULES OF THUMB

#webexpo





5. Define a set of supported devices

RULES OF THUMB

#webexpo





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


#webexpo

Battery-driven Small CPU/GPU


#webexpo


Network connectivity and latency


#webexpo


Network connectivity and latency

Data usage


#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


#webexpo

USE ASYNCHRONOUS MODULE DEFINITION (AMD)


#webexpo

SINGLE PAGE APPRELOAD ONLY PIECES OF PAGE


#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





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





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



Web (Frontend) Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)


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



Web (Frontend) Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)


Fo

cus

on

Pe

rfo

rma

nce

Fo

cus o

n P

erfo

rma

nce

#webexpo

WebViewhttp://anyURL

WEBVIEW

http://anyURL

http://anyURL

#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


• Performance is especially important for battery-driven, smaller CPU devices (= Mobile)

#webexpo



• Each HTTP request costs around 200ms

#webexpo




• Automate performance optimization

#webexpo





• Use AMD for conditional loading based on features and devices

#webexpo





• 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)

http://bit.ly/bdconf-perf-macrocosm

http://bit.ly/bdconf-perf-macrocosm

Technology

WebExpo Talk: EMBRACING PERFORMANCE IN TODAY’S MULTI-PLATFORM MACROCOSM