EmpireJS 2012Mobile Apps: Finding the balance between

performance and flexibility

Tom Germeau - @tomgchartbeat.com

I DESIGN & ENGINEER AT CHARTBEAT

Hi. I’m Tom.

Joost2007 - 2009

STANDALONE JS/SVG BASED VIDEO PLAYERSAME CHALLENGE AS TODAY: KEEP UI SNAPPY

ChartbeatREALTIME ANALYTICS. JS EVERYWHERE. DEMO!

The goalA BETTER MOBILE DASHBOARD

todo

Coming up ...Our constraints

Choosing a frameworkMaking it work

Layers & performanceOther Web tech

5 weeksFROM MOCKUPS TO APPSTORE.

BUT HAVE OTHER PLATFORMS IN MIND.

JS+Python ShopAND WE WANT TO KEEP THINGS SIMPLE

HTML5/JS is so 2011AT LEAST THAT’S WHAT ZUCKERBERG SAID

* Our Biggest Mistake Was Betting Too Much On HTML5

WHAT HE ACTUALLY MEANT ...

The tool didn’t fit the job anymore

A CHANGE IN REQUIREMENTS MADEAN HTML ONLY APP INSUFFICIENT

Full native AppUNKNOWN & TOO ADVANCED

DIDN’T FIT THE JOB

CordovaONE BLANK WEBVIEW.

DIDN’T FIT THE JOB.

Cocoa TouchEASILY HANDLE ADVANCEDGESTURES AND NAVIGATION

HTML & JSFORMATTING AND STYLINGSCRIPTING INTERACTIONS

HTML & JSDUH. REUSE LARGE AMOUNTS OF CODE/ASSETS

ON OTHER PLATFORMS

Thin native wrapperTHE SWEET SPOT: SCRIPTABLE VIEWDECK

WITH MULTIPLE WEBVIEWS

ImplementationWE PICKED A PLATFORM

LET’S BUILD ON IT

ViewDeck (open source)

NavigationController (cocoa)

UIWebView (cocoa)

Native Stack

*

*

Closure CompilerSANITY CHECK CODE &

PROVIDES SIMPLE MODULE SYSTEM

UIWebView

/mobile/dashboard.html/js/v123-app.jsnew chartbeat.Dashboard()

UIWebView

/mobile/menu.html/js/v123-app.jsnew chartbeat.Menu()

UIWebView

/mobile/page.html/js/v123-app.jsnew chartbeat.Page()

App startup

UIWebView

/mobile/traffic.html/js/v123-app.jsnew chartbeat.Traffic()

dashboard ready

Scripting the wrapperCONFIGURING AND NAVIGATING

WEBVIEWS FROM JS

Scripting the wrapperchartbeat.mobile.exec('navigate', { 'target': 'left', 'url': '../menu/#state=loggedin’});// communicate using hashchangeevents

Managing renderingREALTIME DATA MAKES OUR DOM CHANGE CONSTANTLY

One big LayerHA-BROWSERS WILL DIVIDE YOUR PAGE

IN ARBITRARY SQUARE TILES

Layersdiv { transform: translateZ(0); /* move div to own compositing layer * to hint heavily updated areas */}

LayersUPDATE ASPECTS OF YOUR COMPOSITION

WITHOUT RUNNING LAYOUT AND RENDERERS

LayersWATCH OUT FOR UNWANTED MODE SWITCHES

ANIMATED OPACITY, ADDING/REMOVING STYLES, ...

Filtersdiv { filter: hue-rotate(120deg); /* move div to own compositing layer */ /* not a lot of support yet */}

Zen of PerformanceMINIMUM LAYER COUNT VS MINIMUM REDRAWS

Zen of Performance MORE MEMORY, SMOOTHER EXPERIENCE,

EASIER TO CODE UNTIL YOU RUN OUT

Native Scroll-webkit-overflow-scrolling: touch;/* iOS5+ *//* <iOS4 fall back to Scrollability */

SVG/CSS vs CanvasOR HOW WE BUILT

A BATTERY FRIENDLY GAUGE

SVG/CSS vs Canvas

ONE DRAW. TONS OF REDRAWS. DEMO!

SVG/CSS vs Canvasbackground: radial-gradient(...);mask: url(gauge.svg);transform-origin: center center;transform: rotate(-124deg);transition: all 1.5s ease

/* does not trigger redraw on animation */

App lifecycleAPPS DON’T REALLY (ALWAYS) QUIT

Cheap SSL LoginJUST CREDENTIALS OVER CORS

Avoid getting ‘jetsammed’HANDLE IOS MEMORY PRESSURE NOTIFICATIONS

Avoid getting ‘jetsammed’BE ABLE TO CON/DESTRUCT YOUR VIEW

FROM YOUR MODEL AT ALL TIMES

// iOS5 - Chromium 12[WebView _enableRemoteInspector]

// iOS6 - Safari 6// works out of the box!!

DevTools & Simulator

Thank youChartbeat.com/jobs

@tomg

Creditshttps://developers.google.com/closure/compiler/

http://nerds.airbnb.com/box-shadows-are-expensive-to-paint

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

http://www.html5rocks.com/en/tutorials/filters/understanding-css/

http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit

http://atnan.com/blog/2011/11/17/enabling-remote-debugging-via-private-apis-in-mobile-safari/

http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit