Tom Germeau: Mobile Apps: Finding the balance between performance and flexibility

EmpireJS 2012Mobile Apps: Finding the balance between performance and ﬂexibility Tom Germeau - @tomg chartbeat.com

Hi. I’m Tom.I DESIGN & ENGINEER AT CHARTBEAT

Joost 2007 - 2009 STANDALONE JS/SVG BASED VIDEO PLAYERSAME CHALLENGE AS TODAY: KEEP UI SNAPPY

ChartbeatREALTIME ANALYTICS. JS EVERYWHERE. DEMO!

The goalA BETTER MOBILE DASHBOARD

Coming up ... Our constraints Choosing a framework Making it work Layers & performance Other Web tech

5 weeks FROM MOCKUPS TO APPSTORE.BUT HAVE OTHER PLATFORMS IN MIND.

JS+Python ShopAND WE WANT TO KEEP THINGS SIMPLE

HTML5/JS is so 2011 AT LEAST THAT’S WHAT ZUCKERBERG SAID * Our Biggest Mistake Was Betting Too Much On HTML5

WHAT HE ACTUALLY MEANT ...

The tool didn’t ﬁt the job anymore A CHANGE IN REQUIREMENTS MADE AN HTML ONLY APP INSUFFICIENT

Full native App UNKNOWN & TOO ADVANCED DIDN’T FIT THE JOB

CordovaONE BLANK WEBVIEW. DIDN’T FIT THE JOB.

Cocoa Touch EASILY HANDLE ADVANCED GESTURES AND NAVIGATION

HTML & JSFORMATTING AND STYLINGSCRIPTING INTERACTIONS

HTML & JSDUH. REUSE LARGE AMOUNTS OF CODE/ASSETS ON OTHER PLATFORMS

Thin native wrapper THE SWEET SPOT: SCRIPTABLE VIEWDECK WITH MULTIPLE WEBVIEWS

Implementation WE PICKED A PLATFORM LET’S BUILD ON IT

Native Stack ViewDeck (open source)* NavigationController (cocoa)* UIWebView (cocoa)

Closure Compiler SANITY CHECK CODE & PROVIDES SIMPLE MODULE SYSTEM

App startup UIWebView /mobile/dashboard.html /js/v123-app.js new chartbeat.Dashboard() dashboard readyUIWebView UIWebView UIWebView/mobile/menu.html /mobile/page.html /mobile/traffic.html/js/v123-app.js /js/v123-app.js /js/v123-app.jsnew chartbeat.Menu() new chartbeat.Page() new chartbeat.Traffic()

Scripting the wrapper CONFIGURING AND NAVIGATING WEBVIEWS FROM JS

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

Managing rendering REALTIME 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 */}

Layers UPDATE ASPECTS OF YOUR COMPOSITIONWITHOUT 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 Canvas OR HOW WE BUILT A BATTERY FRIENDLY GAUGE

SVG/CSS vs Canvas ONE DRAW. TONS OF REDRAWS. DEMO!

SVG/CSS vs Canvas background: 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 Login JUST 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

DevTools & Simulator // iOS5 - Chromium 12 [WebView _enableRemoteInspector] // iOS6 - Safari 6 // works out of the box!!

Thank youChartbeat.com/jobs @tomg

Creditshttps://developers.google.com/closure/compiler/http://nerds.airbnb.com/box-shadows-are-expensive-to-painthttp://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chromehttp://www.html5rocks.com/en/tutorials/ﬁlters/understanding-css/http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkithttp://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

http://engineering.chartbeat.com	133
https://twitter.com	15
http://localhost	7
http://lanyrd.com	5
https://si0.twimg.com	3
http://lab.harnusa.com	1
http://staging.slideshare.com	1

Tom Germeau: Mobile Apps: Finding the balance between performance and flexibility

by Chartbeat on Oct 25, 2012

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 165

Statistics

Tom Germeau: Mobile Apps: Finding the balance between performance and flexibility Presentation Transcript