Presented by Alex Blom of Isle of Code at Ember Conf 2016.

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