Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
EmpireJS 2012Mobile Apps: Finding the balance between       performance and flexibility         Tom Germeau - @tomg        ...
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
to do
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 fit 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-ap...
Scripting the wrapper   CONFIGURING AND NAVIGATING        WEBVIEWS FROM JS
Scripting the wrapper chartbeat.mobile.exec(navigate, {   target: left,   url: ../menu/#state=loggedin’ }); // communicate...
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...
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...
Tom Germeau: Mobile Apps: Finding the balance between performance and flexibility
Upcoming SlideShare
Loading in …5
×

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

7,790 views

Published on

EmpireJS 2012, New York City

Published in: Technology

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

  1. EmpireJS 2012Mobile 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 PLAYERSAME CHALLENGE AS TODAY: KEEP UI SNAPPY
  4. ChartbeatREALTIME ANALYTICS. JS EVERYWHERE. DEMO!
  5. The goalA 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 ShopAND 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. CordovaONE BLANK WEBVIEW. DIDN’T FIT THE JOB.
  15. Cocoa Touch EASILY HANDLE ADVANCED GESTURES AND NAVIGATION
  16. HTML & JSFORMATTING AND STYLINGSCRIPTING INTERACTIONS
  17. HTML & JSDUH. 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 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()
  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 LayerHA-BROWSERS WILL DIVIDE YOUR PAGE IN ARBITRARY SQUARE TILES
  27. Layersdiv { transform: translateZ(0); /* move div to own compositing layer * to hint heavily updated areas */}
  28. Layers UPDATE ASPECTS OF YOUR COMPOSITIONWITHOUT RUNNING LAYOUT AND RENDERERS
  29. LayersWATCH OUT FOR UNWANTED MODE SWITCHES ANIMATED OPACITY, ADDING/REMOVING STYLES, ...
  30. Filtersdiv { filter: hue-rotate(120deg); /* move div to own compositing layer */ /* not a lot of support yet */}
  31. Zen of PerformanceMINIMUM LAYER COUNT VS MINIMUM REDRAWS
  32. Zen of Performance MORE MEMORY, SMOOTHER EXPERIENCE, EASIER TO CODE UNTIL YOU RUN OUT
  33. Native Scroll-webkit-overflow-scrolling: touch;/* iOS5+ *//* <iOS4 fall back to Scrollability */
  34. SVG/CSS vs Canvas OR HOW WE BUILT A BATTERY FRIENDLY GAUGE
  35. SVG/CSS vs Canvas ONE DRAW. TONS OF REDRAWS. DEMO!
  36. 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 */
  37. App lifecycleAPPS DON’T REALLY (ALWAYS) QUIT
  38. Cheap SSL Login JUST CREDENTIALS OVER CORS
  39. Avoid getting ‘jetsammed’HANDLE IOS MEMORY PRESSURE NOTIFICATIONS
  40. Avoid getting ‘jetsammed’ BE ABLE TO CON/DESTRUCT YOUR VIEW FROM YOUR MODEL AT ALL TIMES
  41. DevTools & Simulator // iOS5 - Chromium 12 [WebView _enableRemoteInspector] // iOS6 - Safari 6 // works out of the box!!
  42. Thank youChartbeat.com/jobs @tomg
  43. 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/filters/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

×