Tom Germeau presented on building mobile apps that balance performance and flexibility. He discussed choosing a framework like Cordova or building a native wrapper with a thin JavaScript layer. This allows reusing code on multiple platforms while keeping the native stack for advanced gestures and navigation. Techniques like compositing layers, filters, and native scrolling were covered to optimize for memory usage and smooth experiences.

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

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

3. Joost
2007 - 2009
STANDALONE JS/SVG BASED VIDEO PLAYER
SAME CHALLENGE AS TODAY: KEEP UI SNAPPY

4. Chartbeat
REALTIME ANALYTICS. JS EVERYWHERE. DEMO!

5. The goal
A BETTER MOBILE DASHBOARD

6. to do

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

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

9. JS+Python Shop
AND WE WANT TO KEEP THINGS SIMPLE

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

11. WHAT HE ACTUALLY MEANT ...

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

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

14. Cordova
ONE BLANK WEBVIEW.
DIDN’T FIT THE JOB.

15. Cocoa Touch
EASILY HANDLE ADVANCED
GESTURES AND NAVIGATION

16. HTML & JS
FORMATTING AND STYLING
SCRIPTING INTERACTIONS

17. HTML & JS
DUH. REUSE LARGE AMOUNTS OF CODE/ASSETS
ON OTHER PLATFORMS

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

19. Implementation
WE PICKED A PLATFORM
LET’S BUILD ON IT

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

21. Closure Compiler
SANITY CHECK CODE &
PROVIDES SIMPLE MODULE SYSTEM

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

23. Scripting the wrapper
CONFIGURING AND NAVIGATING
WEBVIEWS FROM JS

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

25. Managing rendering
REALTIME DATA MAKES OUR
DOM CHANGE CONSTANTLY

26. One big Layer
HA-BROWSERS WILL DIVIDE YOUR PAGE
IN ARBITRARY SQUARE TILES

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

28. Layers
UPDATE ASPECTS OF YOUR COMPOSITION
WITHOUT RUNNING LAYOUT AND RENDERERS

29. Layers
WATCH OUT FOR UNWANTED MODE SWITCHES
ANIMATED OPACITY,
ADDING/REMOVING STYLES, ...

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

32. Zen of Performance
MINIMUM LAYER COUNT VS MINIMUM REDRAWS

33. Zen of Performance
MORE MEMORY, SMOOTHER EXPERIENCE,
EASIER TO CODE UNTIL YOU RUN OUT

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

35. SVG/CSS vs Canvas
OR HOW WE BUILT
A BATTERY FRIENDLY GAUGE

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

37. 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 */

38. App lifecycle
APPS DON’T REALLY (ALWAYS) QUIT

39. Cheap SSL Login
JUST CREDENTIALS OVER CORS

40. Avoid getting ‘jetsammed’
HANDLE IOS MEMORY PRESSURE NOTIFICATIONS

41. Avoid getting ‘jetsammed’
BE ABLE TO CON/DESTRUCT YOUR VIEW
FROM YOUR MODEL AT ALL TIMES

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

43. Thank you
Chartbeat.com/jobs
@tomg

44. Credits
https://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