This document discusses building mobile apps with Ember and Cordova. It recommends using the ember-cordova library to integrate Ember with Cordova. It covers handling touch events, icons, splash screens, and accessing device capabilities through Cordova services. It also provides tips for performance, such as using Crosswalk to improve speeds, avoiding memory leaks, minimizing app size, and managing reflows through CSS transforms and visibility changes.

1. Build Mobile Apps with
Ember
@alexblom
Partner, Isle of Code
alex@isleofcode.com

2. whoami

3. Isle of Code
• Toronto + Chicago based development;
• Focused on Ember/Cordova;

5. Contents
• 0) Preamble;
• 1) Building Ember/Cordova;
• 2) Handling the basics;
• 3) Performance;

6. Why Mobile & Ember
• Because Ember;
• Cost;
• Hiring;
• Developer sanity;

7. Cordova vs PhoneGap

8. 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;

9. 1) Building
Ember/Cordova

10. In the old days

11. ember-cli-cordova

12. ember-cordova
https://github.com/isleofcode/ember-cordova

13. ember-cordova
• Started as a fork of ember-cli-cordova to prepare
for platforms;
• Has now become a stand alone project & ember-
cli-cordova is less maintained;

14. ember-cordova: Changes
• Refactoring of internals/tasks;
• Does not include default touch/click handlers, only a
raw cordova wrapping;
• Adds hook support;
• Splash screen & icon management built in;
• Cordova, Device & Platform Services;
• Limited plugin bindings;

15. ember-cordova: Next
• More plugin bindings;
• Plugins which install an ember-service && the
related cordova plugin (e.g. keyboard);
• Fixed tests;

18. Hooks
• beforeBuild
• afterBuild
• beforePrepare
• afterPrepare
• Use hooks for any customization, warnings, etc;
• Hooks are just exported functions;

19. Remote Inspection
• https://github.com/joostdevries/ember-cli-remote-
inspector

20. 2) Handling the Basics

21. (Cordova services from file urls)
config/environment.js

22. • Mobile Safari raises touch vs click events on
anything but an a link;
Do this or action bindings will not work;
styles/app.css

23. Links will not appear as they have been clicked,
just like a native app.
styles/app.css

24. Splash Handling
routes/application.js

25. Icons
• Coming next week;
• Generation handled by default;
• We use the platform name vs “icon@2x.png”

27. Platform Service

28. Cordova Service

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

31. Hammer Example

32. A note on deviceready
• You probably need to use it for any custom
initializers;
• Has special handling. Even if you register the
handler after deviceready fires, it will still be
triggered.

33. Keyboard

34. Understand Viewport

35. Fix on Android
• <preference name="android-
windowSoftInputMode" value="adjustPan" />
• <preference name="android-configChanges"
value="orientation|keyboardHidden" />

36. To fix on iOS, use the
keyboard plugin.

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

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

39. 3) Performance

40. Crosswalk
• https://crosswalk-project.org;
• For Android;
• Increases app size by ~20mb;
• ~5-10x speed improvement on older devices.
Especially 4.x;
• Consistent browser environment for stuff like css;

41. Know your WebView

42. Using too much memory
has negative implications

43. http://www-
cs.canisius.edu/~hertzm/gcmalloc-oopsla-
2005.pdf

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

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

50. Name closures for
better profiling

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

52. App size matters
• For Android, 500-750kb target;
• For iOS less of a problem. Served ~2mb without
problems;
https://joreteg.com/blog/viability-of-js-frameworks-on-mobile
http://blog.runspired.com/2016/03/25/the-chrome-distortion-chrome-alters-our-expectations-in-highly-negative-ways/

53. • window.performance
• window.performance.mark(‘foo’)

54. websocket or http2

55. Workers/Threads
http://blog.isleofcode.com/introduction-to-web-workers/

56. Manage Reflows

57. 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

58. Use CSS Transforms

59. visibility:hidden

60. Avoid Unnecessary Nesting
• Especially with components;

61. Animations

63. Animations - Velocity

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