Alex Blom: Build performant hybrid apps with Ember

Video: https://www.youtube.com/watch?v=8dstvvU8iEc

Speaker: Alex Blom is the lead maintainer of ember-cordova, and Managing Partner at Isle of Code. He focused on building hybrid ember apps and general hybrid performance.

Abstract: This talk will summarize introduce Ember, Cordova & the tooling & optimizations required for performant hybrid apps, such as ember-cordova. While we see Ember as a good fit for hybrid, the performance techniques (e.g. removing jank) apply to any framework.
This talk will cover:
An introduction to how hybrid works (how does Cordova package, how does it work);
A brief working introduction to Ember, and why we believe it is the best fit;
An overview of the ember-cordova CLI;
How to build a hybrid application, and deal with the non-ember specifics (app names, icons, splashes, etc); and
Javascript / Hybrid performance tips and techniques.

Transcript

1. Mobile+Web Devcon! ! Build performant hybrid apps with Ember ! @alexblom!
2. Agenda! •  1) Preamble;! •  2) Cordova / Ember ecosystem;! •  3) ember-cordova;! •  4) Build an app together;! •  5) Performance & Optimization;!
3. whoami!
4. Isle of Code! •  Maintainer of ember-cordova;! •  Historically wrote backend;! •  Toronto based;! •  Focused on Ember, Cordova & Electron;!
5. Ember.js! •  Framework for ambitious applications;! •  We like it because it forces a very organized approach to large applications;! •  Glimmer2 is performant. Without having a shit slinging contest, Ember is not ‘slower’;! •  Items like Routing, Controllers, Components are all first class. CLI is standardized and add ons are easy;! •  We’ll tour an Ember app in the demo;!
6. What does Cordova do?! •  Creates an app, which is a full screen WebView;! •  Adds a relatively stable api to a window.cordova object;! •  Each platform is added manually (e.g. cordova- ios, cordova-android);!
7. cordova-cli! cordova-lib! app! platform ios! platform android! plugin camera! plugin network!
8. Cordova v PhoneGap! •  PhoneGap was initially started in ~2008;! •  In 2011, Adobe punched Nitobi;! •  The open-source version was then called Cordova;! •  PhoneGap describes a productized version of Cordova;!
9. Why Cordova & Ember! •  Because Ember;! •  Cost;! •  Hiring;! •  Developer sanity;! •  Single source;! •  Speed of development;!
10. 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;!
11. ember-cordova! ! http://ember-cordova.com!
12. In the old days!
13. ember-cordova! •  Library for packaging Ember/Cordova applications together;! •  Also includes support for:! •  live reload;! •  icon/splash generation;! •  growing ecosystem of plugins;!
14. 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);!
15. ember-cordova! cordova-lib! app! platform ios! platform android! plugin camera! plugin network! ember- cordova! ember-cdv-plugin!
16. 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;!
17. ! ! Cordova serves from file urls! ember-cordova will warn you if this is not ‘hash’;! config/environment.js
18. •  App already has:! •  A basic top menu;! •  A big index of ‘users’;! •  A button which re-shuffles to new users;! Build app together!
19. Walk through Building!
20. Binding Touch Events!
21. Ghost Clicks!
22. Hooks! •  beforeBuild! •  afterBuild! •  beforePrepare! •  afterPrepare! •  Use hooks for any customization, warnings, etc;! •  Hooks are just exported functions;!
23. Appifying!
24. •  Mobile Safari raises touch vs click events on anything but an a link;! Do this or action bindings will not work;! styles/app.css
25. ! ! Links will not appear as they have been clicked, just like a native app. ! styles/app.css
26. ember-cordova/ platform! •  API provides information such as current env (iOS/Android) and device information!
27. ember-cordova/events!
30. 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.!
31. ember-cordova/keyboard!
33. Understand Viewport!
34. Fix on Android! •  <preference name="android- windowSoftInputMode" value="adjustPan" />! •  <preference name="android-configChanges" value="orientation|keyboardHidden" />!
35. ember-cordova/splash!
37. Performance!
38. Manage Reflows!
39. 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/ reflow!
40. visibility:hidden!
41. 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;!
42. Further Optimization Tips! •  Payload size matters (Glimmer2);! •  Flat DOM matters;!
43. Infinite Scrolling! •  Occlusion based scroll;! •  Smoke & Mirrors: https://github.com/runspired/smoke-and-mirrors!
44. http://runspired.github.io/smoke-and-mirrors/#/examples/dbmon!
45. Using too much memory has negative implications!
46. Memory Leaks! •  Garbage Collection: 2 types:! •  Young Generation & Old Generation!
47. Questions?! @alexblom! alex@isleofcode.com!