Agenda - Jazoonjazoon.com/autumn2016/wp-content/uploads/2016/10/Blom-Alex_How... · ember-cordova will warn you if this is not ‘hash’; config/environment.js

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

Questions? @alexblom

[email protected]