Hybrid Apps with Ember:

Lessons Learned@alexblomalex@isleofcode.com

Who am IProgrammer;Started with Java/C;Mostly Ruby/Rails;Go;Ember for ~2.5 years;

Isle of CodeToronto + Chicago based development;Focused on:Prototyping;Single sourcing mobile /w Ember.js & Cordova; andA lot of beacon work.

Who knows Ember?

The Ember way is not about Ember

WebView

or crosswalk

Crosswalkhttps://crosswalk-project.org/

The Hackiest WayProcess has come a long way

ember-cli-cordova

Lessons Learned

Good Code == Good HybridMuch of making effective mobile is simply writing good code;Desktops let us be lazier;JS ecosystem is littered with bad/leaky code;

Bind Phonegap to a Service

Touch Eventshttp://hammerjs.github.io

Hammer Example

Understand Viewport

Android ViewportiOS 7+ Viewport

Know your WebView

Which engine are you using?

Probably Nitro of v8

Memory LeaksGarbage Collection: 2 types:Young Generation & Old Generation

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

Using too much memory has negative implications

Name closures for better profiling

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

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/reflow

Use CSS Transforms

visibility:hidden

Avoid Unnecessary NestingEspecially with components;

-webkit-tap-highlight-color:rgba(0,0,0,0);

Ember Hack

Understand Framework Events

Ember Click HandlerWithin Ember, there are many ways to receive clicks, such as:

These clicks are not the same

Sub Tip: Coalesce similar listeners;

Run LoopsEmber.run.schedule(afterRender'Other tools for scheduling asyncronous callbacks;Solves many problems - but not all of them. We still cant be animating while transitioning;

Workers/Threads

Route animations can be choppy, as the UI thread is shared with items such as model hooks and expensive computations;In native, it is easy enough to have 1 thread for the transition/animation (UI thread) and another for more complex work;

More work around WebWorkers for handling background requests and pushing to the Ember store;

Liquid Firehttp://ef4.github.io/liquid-fire/

Ghost Clicks

Save PluginsFor the love of god, save plugins.

Infinite ScrollingSmoke & Mirrors: https://github.com/runspired/smoke-and-mirrors

Occlusion

http://runspired.github.io/smoke-and-mirrors/#/examples/dbmon

Animations

Animations - Velocity

CanvasChoppy and deal breaking. This is common when working with DOM;Need to move to Canvas;~16ms target for animations, DOM cant do this;

Hybrid Apps with Ember@alexblomalex@isleofcode.com