PhoneGap Day EU 2017: Hybrid Ember Apps

PG Day EU

Building Phonegap apps with

ember-cordova

@alexblom

whoami

Isle of Code

• Maintainer of ember-cordova;

• Historically wrote backend;

• Toronto based;

• Focused on Ember, Cordova & Electron;

Why Cordova & Ember

• Because Ember;

• Cost;

• Hiring;

• Developer sanity;

• Single source;

• Speed of development;

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;

Ember.js

• Framework for ambitious applications;

• We like it because it forces a very organized approach

to large applications;

• Items like Routing, Controllers, Components are all first

class citizens. Addons can rely on standard behaviour;

LTS Cycle

• LTS Release every 12 weeks (e.g. 2.4/2.8/2.12);

• If you don’t need edge features, it allows you to

control and time an upgrade cycle;

• Because everybody is upgrading at once, the

community is focused;

• LTS releases do receive post security updates;

Default ember-project

Routing

Pods

Components

ember-data

ember-data

• Models can be queried with the store service:

• Tools such as mirage allow you to mock dev

responses with the same models;

Actions

ember-cordova

ember-cordova

• Library for packaging Ember/Cordova applications

together;

• Also includes:

• a build CLI;

• 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 publish best practices);

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;

ember-cordova v

react-native

• ember-cordova allows you to recycle web

components for mobile;

• On a first run, you will need to work more for

performance;

• For more complex apps, having standardized

model/routing/component behaviour we find really

useful;

• For smaller apps, pick your favourite;

Structuring Our App

• When fully recycling an app, we tend to re-

implement layouts but not components;

• Heavy components are an exception;

Structuring our App

config/environment.js

ember-cordova/splash

ember-cordova/events

http://blog.isleofcode.com/the-real-reason-to-avoid-jquery/

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.

Feeling Native

Ghost Clicks

Links will not appear as they have been clicked,

just like a native app.

styles/app.css

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

Use CSS Transforms

visibility:hidden

Animations

•

Animations - Velocity

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;

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

Name closures for

better profiling

https://developer.chrome.com/devtools/docs/javascript-memory-profiling

App size matters

• For Android, 500-750kb target;

• For iOS less of a problem. Served ~2mb without

problems;

https://joreteg.com/blog/viability-of-js-frameworks-on-mobile

http://blog.runspired.com/2016/03/25/the-chrome-distortion-chrome-alters-our-expectations-in-highly-negative-ways/

• window.performance

• window.performance.mark(‘foo’)

PG Day EU

Building Phonegap apps with

ember-cordova

@alexblom