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

CANADA!

#webexpo

/beebs/

#webexpo

Canadian Broadcasting Corporation

/ceeebs/

#webexpo

PERFORMANCEWHY IS THERE A NEED FOR

SPEED?

#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

All good, bla bla...

#webexpo

Overestimating wait times for rides

Hidden lineups

#webexpo

S L O W

Perception of Speed

#webexpo

S L O W

Perception of Speed

Unpleasant

#webexpo

S L O W

Perception of Speed

Unpleasant

Unknown

#webexpo

S L O W

Perception of Speed

Unpleasant

Unknown

Boring

#webexpo

S L O W

Perception of Speed

Unpleasant

Unknown

Boring

Task is successful

#webexpo

S L O W

Perception of Speed

Unpleasant

Unknown

Boring

Task is successful

Responsive system

#webexpo

S L O W

Perception of Speed

Unpleasant

Unknown

Boring

Task is successful

Responsive system

Informed about progress

#webexpo

“Ultimately performance is about respect”

BRAD FROST

#webexpo

Macrocosm#webexpo

#webexpo

Macrocosm

Operating systems and platforms

#webexpo

Macrocosm

Browsers

#webexpo

Macrocosm

Browsers

Internet service providers

#webexpo

Macrocosm

Browsers

Cellular providers

#webexpo

Macrocosm

Browsers

Cellular providersInternet connections

and speed

#webexpo

Macrocosm

Browsers

Cellular providersInternet connections

and speed

Devices

#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

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

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

#webexpo

FOCUS ON MAKING (MOBILE) WEB FASTWITH NATIVE WRAPPER

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

#webexpo

FAST SINGLE PAGE APP

WITH NATIVE WRAPPER

#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

• 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

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

AMD AND MORE

#webexpo

data�� uri�� encoded

DATA URI IMAGES

#webexpo

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

#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

e.g. native sharing

e.g. app version

Web<iframe/>

NativeComTowerDelegate

#webexpo

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

#webexpo

WebViewhttp://anyURL

WEBVIEW

#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

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

Offline

Favorites

More...

WEB NATIVE Lineups

Stories

Photo Galleries

Video & Audio

Breaking News Ticker

Business Ticker

Weather

Tracking

??? ???

#webexpo

NEWS APPRATIO ANDROID

#webexpo

100:0App launcher

WEB NATIVE Lineups

Stories

Photo Galleries

Video & Audio

Breaking News Ticker

Business Ticker

Weather

Tracking

ANDROID

More...

#webexpo

Weather

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

#webexpo

JAVASCRIPT ENGINE INSIDE IOS WEBVIEW IS SLOWER

THAN DEFAULT SAFARI

BUMMER!

#webexpo

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

s) Bad

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

THANK YOUQUESTIONS?http://bit.ly/perf-macrocosm

More�� info�� under�� follow-up�� blog�� post�� (including�� slides)

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

Technology

Roman Appeltauer: #zavicekonverzi na WebExpo

Deployment PHP aplikací | WebExpo 2011

Macrocosm Rules V1.5

Shell's Kitchen: Infrastructure As Code (Webexpo 2012)

The touch events - WebExpo

Cutting Edge CSS3 @ WebExpo Tour 2010

Breaking the Cell #WebExpo

Přidej vejce – WebExpo 2011

Macrocosm, mesocosm, and microcosm:

Z praxe mobilního webdesignu (Webexpo 2011)

Shift//Translate: Microcosm/Macrocosm

Macrocosm o 2

Flash - MACROCOSM

Symfony2 - WebExpo 2010

Nicereply webexpo pitch

HotGloo Start-Up Talk WebExpo 2010

GTS platforma pro vyvojáře webexpo 2012

Visual Design Thinking - Prague 2013 - WebExpo

Critical Interface Design - WebExpo Prague 2012

Imagga @ Founders Stories, WebExpo Prague 2013