agenda - jazoon...• on ios, the default webview is a uiwebview; • ember-cordova will default to...
TRANSCRIPT
Agenda
• 1) Preamble;
• 2) Cordova / Ember ecosystem;
• 3) ember-cordova;
• 4) Build an app together;
• 5) Performance & Optimization;
whoami
Isle of Code
• Toronto based;
• Focused on Ember, Cordova & Electron;
Why Cordova & Ember
• Because Ember;
• Cost;
• Hiring;
• Developer sanity;
• Single source;
• Speed of development;
Ember
• Framework for ambitious applications;
• We like it because it forces a very organized approach
to large applications;
• Glimmer2 can out benchmark React. 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;
Mirage
ember-cli-mirage.com
Mirage
ember-cli-mirage.com
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;
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;
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);
Platforms
• Handling its own build process;
• Creating a native application that is a WebView;
• Including cordova.js for the platform;
• Defining each window.cordova function as
required;
Plugins
• Similar to platforms;
• Generally defined a window.foo API in common
JS, and bindings to each platform manallly;
• To find plugins:
https://cordova.apache.org/plugins/
cordova-cli cordova-lib app
platform ios
platform android
plugin camera
plugin network
cordova-build
• Runs internal tasks like prepare & validations;
• Looks for the API path:
• platforms/$platformName/cordova/Api.js
• Triggers a platform specific build, and copies
your assets from www to
platforms/$platformName/platform_www;
In the old days
ember-cordova
http://ember-cordova.com
ember-cordova
• Library for packaging Ember/Cordova
applications together;
• Also includes support for:
• live reload;
• icon/splash generation;
• growing ecosystem of plugins;
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 need to publish best practices);
ember-cordova
cordova-lib app
platform ios
platform android
plugin camera
plugin network
ember-
cordova ember-cdv-plugin
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;
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;
Build Together
Cordova serves from file urls
ember-cordova will warn you if this is not ‘hash’;
config/environment.js
• App already has:
• A basic top menu;
• A big index of ‘users’;
• A button which re-shuffles to new users;
Build app together
Hammer Example
Ghost Clicks
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.
Manage Reflows
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
visibility:hidden
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;
Other Commands
• ember cdv:prepare;
• ember cdv proxy;
Hooks
• beforeBuild
• afterBuild
• beforePrepare
• afterPrepare
• Use hooks for any customization, warnings, etc;
• Hooks are just exported functions;
Links will not appear as they have been clicked,
just like a native app.
styles/app.css
• Mobile Safari raises touch vs click events on
anything but an a link;
Do this or action bindings will not work;
styles/app.css
Understand Viewport
Fix on Android
• <preference name="android-
windowSoftInputMode" value="adjustPan" />
• <preference name="android-configChanges"
value="orientation|keyboardHidden" />
Keyboard
Performance & Further
Optimization
Further Optimization Tips
• Payload size matters (Glimmer2);
• Flat DOM matters;
Infinite Scrolling
• Occlusion based scroll;
• Smoke & Mirrors:
https://github.com/runspired/smoke-and-mirrors
http://runspired.github.io/smoke-and-mirrors/#/examples/dbmon
Using too much memory
has negative implications
http://www-
cs.canisius.edu/~hertzm/gcmalloc-oopsla-
2005.pdf
Memory Leaks
• Garbage Collection: 2 types:
• Young Generation & Old Generation