Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Alex Blom: Build performant hybrid apps with Ember

1fa9cb8c7997c8c4d3d251fb5e41f749?s=47 Realm
March 01, 2017

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.



March 01, 2017


  1. Mobile+Web Devcon! ! Build performant hybrid apps with Ember !

  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

  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!

  28. None
  29. None
  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!

  32. None
  33. Understand Viewport!

  34. Fix on Android! •  <preference name="android- windowSoftInputMode" value="adjustPan" />! • 

    <preference name="android-configChanges" value="orientation|keyboardHidden" />!
  35. ember-cordova/splash!

  36. None
  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:

  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!