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

Alex Blom: Build performant hybrid apps with Em...

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.

Realm

March 01, 2017
Tweet

More Decks by Realm

Other Decks in Technology

Transcript

  1. Agenda! •  1) Preamble;! •  2) Cordova / Ember ecosystem;!

    •  3) ember-cordova;! •  4) Build an app together;! •  5) Performance & Optimization;!
  2. Isle of Code! •  Maintainer of ember-cordova;! •  Historically wrote

    backend;! •  Toronto based;! •  Focused on Ember, Cordova & Electron;!
  3. 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;!
  4. 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);!
  5. 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;!
  6. Why Cordova & Ember! •  Because Ember;! •  Cost;! • 

    Hiring;! •  Developer sanity;! •  Single source;! •  Speed of development;!
  7. 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;!
  8. ember-cordova! •  Library for packaging Ember/Cordova applications together;! •  Also

    includes support for:! •  live reload;! •  icon/splash generation;! •  growing ecosystem of plugins;!
  9. 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);!
  10. 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;!
  11. ! ! Cordova serves from file urls! ember-cordova will warn

    you if this is not ‘hash’;! config/environment.js
  12. •  App already has:! •  A basic top menu;! • 

    A big index of ‘users’;! •  A button which re-shuffles to new users;! Build app together!
  13. Hooks! •  beforeBuild! •  afterBuild! •  beforePrepare! •  afterPrepare! • 

    Use hooks for any customization, warnings, etc;! •  Hooks are just exported functions;!
  14. •  Mobile Safari raises touch vs click events on anything

    but an a link;! Do this or action bindings will not work;! styles/app.css
  15. ! ! Links will not appear as they have been

    clicked, just like a native app. ! styles/app.css
  16. 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.!
  17. Fix on Android! •  <preference name="android- windowSoftInputMode" value="adjustPan" />! • 

    <preference name="android-configChanges" value="orientation|keyboardHidden" />!
  18. 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!
  19. 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;!