Tom Germeau: Mobile Apps: Finding the balance between performance and flexibility
-
Upload
chartbeat -
Category
Technology
-
view
3.811 -
download
4
description
Transcript of Tom Germeau: Mobile Apps: Finding the balance between performance and flexibility
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