Talk about general profiling & performance for Hybrid Applications, as well as some Ember specific tips. For Cordova + PhoneGap. Presented on Jan 29 2016 at PhoneGap Day in Salt Lake City.

1. Hybrid Apps with Ember:
Lessons Learned
@alexblom
alex@isleofcode.com

2. Who am I
• Programmer;
• Started with Java/C;
• Mostly Ruby/Rails;
• Go;
• Ember for ~2.5 years;

3. Isle of Code
• Toronto + Chicago based development;
• Focused on:
• Prototyping;
• Single sourcing mobile /w Ember.js & Cordova;
and
• A lot of beacon work.

4. Who knows Ember?

6. The Ember way is not
about Ember

7. WebView
or crosswalk

8. Crosswalk
https://crosswalk-project.org/

9. The Hackiest Way
• Process has come a long way

10. ember-cli-cordova

11. Lessons Learned

12. Good Code == Good Hybrid
• Much of making effective mobile is simply writing
good code;
• Desktops let us be lazier;
• JS ecosystem is littered with bad/leaky code;

13. Bind Phonegap to a Service

14. Touch Events
http://hammerjs.github.io

15. Hammer Example

16. Understand Viewport
Android Viewport
iOS 7+ Viewport

17. Know your WebView

18. Which engine are you using?
Probably Nitro of v8

19. Memory Leaks
• Garbage Collection: 2 types:
• Young Generation & Old Generation

21. http://blog.isleofcode.com/the-real-reason-to-avoid-jquery/

22. Using too much memory
has negative implications

23. Name closures for
better profiling

24. https://developer.chrome.com/devtools/docs/javascript-memory-profiling

25. Manage Reflows

26. What causes Reflow?
• Resizing the browser window;
• using JavaScript methods involving computed
styles;
• adding or removing elements from the DOM; and
• changing an element's classes.
• https://developers.google.com/speed/articles/reflo
w

27. Use CSS Transforms

28. visibility:hidden

29. Avoid Unnecessary Nesting
• Especially with components;

30. -webkit-tap-highlight-color:rgba(0,0,0,0);

31. Ember Hack

32. Understand
Framework Events

33. Ember Click Handler
• Within Ember, there are many ways to receive
clicks, such as:

36. These clicks are not
the same

37. • Sub Tip: Coalesce similar listeners;

38. Run Loops
• Ember.run.schedule(‘afterRender'
• Other tools for scheduling asyncronous
callbacks;
• Solves many problems - but not all of them. We
still can’t be animating while transitioning;

39. Workers/Threads

40. • Route animations can be choppy, as the UI
thread is shared with items such as model hooks
and expensive computations;
• In native, it is easy enough to have 1 thread for
the transition/animation (UI thread) and
another for more complex work;

41. • More work around WebWorkers for handling
background requests and pushing to the Ember
store;

42. Liquid Fire
http://ef4.github.io/liquid-fire/

43. Ghost Clicks

44. Save Plugins
• For the love of god, save plugins.

45. Infinite Scrolling
• Smoke & Mirrors:
https://github.com/runspired/smoke-and-mirrors

46. Occlusion

47. http://runspired.github.io/smoke-and-mirrors/#/examples/dbmon

48. Animations

50. Animations - Velocity

52. Canvas
• Choppy and deal breaking. This is common when
working with DOM;
• Need to move to Canvas;
• ~16ms target for animations, DOM can’t do this;

54. Hybrid Apps with
Ember
@alexblom
alex@isleofcode.com