Videos redacted due to filesize limits.

1. PG Day EU
Building Phonegap apps with
ember-cordova
@alexblom

2. whoami

3. Isle of Code
• Maintainer of ember-cordova;
• Historically wrote backend;
• Toronto based;
• Focused on Ember, Cordova & Electron;

4. Why Cordova & Ember
• Because Ember;
• Cost;
• Hiring;
• Developer sanity;
• Single source;
• Speed of development;

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

6. Ember.js
• Framework for ambitious applications;
• We like it because it forces a very organized approach
to large applications;
• Items like Routing, Controllers, Components are all first
class citizens. Addons can rely on standard behaviour;

7. LTS Cycle
• LTS Release every 12 weeks (e.g. 2.4/2.8/2.12);
• If you don’t need edge features, it allows you to
control and time an upgrade cycle;
• Because everybody is upgrading at once, the
community is focused;
• LTS releases do receive post security updates;

9. Default ember-project

12. Routing

13. Pods

14. Components

15. ember-data

16. ember-data
• Models can be queried with the store service:
• Tools such as mirage allow you to mock dev
responses with the same models;

17. Actions

18. ember-cordova

19. ember-cordova
• Library for packaging Ember/Cordova applications
together;
• Also includes:
• a build CLI;
• live reload;
• icon/splash generation;
• growing ecosystem of plugins;

20. ember-cordova
• Is not a UI Library;
• Is not a component library;
• Currently has no opinions on which css
frameworks you should use;
• Does not protect you from bad performance (but
we do publish best practices);

21. Improved WebViews
• On iOS, the default WebView is a UIWebView;
• ember-cordova will default to the newer and
more performant WKWebView;
• To disable this default, use the following flag:
• `ember cdv:platform add ios —default-
webview;

22. ember-cordova v
react-native
• ember-cordova allows you to recycle web
components for mobile;
• On a first run, you will need to work more for
performance;
• For more complex apps, having standardized
model/routing/component behaviour we find really
useful;
• For smaller apps, pick your favourite;

23. Structuring Our App
• When fully recycling an app, we tend to re-
implement layouts but not components;
• Heavy components are an exception;

24. Structuring our App

27. config/environment.js

33. ember-cordova/splash

35. ember-cordova/events

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

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

40. Feeling Native

41. Ghost Clicks

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

43. Manage Reflows

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

46. Use CSS Transforms

47. visibility:hidden

48. Animations
•

50. Animations - Velocity

51. Animation Frames
• ~15ms target;
• Taking longer will clog your thread;
• This 15ms target includes the work your browser
needs to do. Best to target ~10;
• Allows the browser to batch animation work;

52. Infinite Scrolling
• Occlusion based scroll;
• Smoke & Mirrors:
https://github.com/runspired/smoke-and-mirrors

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

54. Using too much memory has
negative implications
http://www-cs.canisius.edu/~hertzm/gcmalloc-oopsla-2005.pdf

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

59. Name closures for
better profiling

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

61. 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/

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

63. PG Day EU
Building Phonegap apps with
ember-cordova
@alexblom