Web Unleashed Toronto 2015: Hybrid Mobile Apps with Ember.js
Hybrid Apps with
Who am I
• Started with Java/C;
• Mostly Ruby/Rails;
• Ember for ~2.5 years;
Isle of Code
• Toronto based development;
• Focused on:
• Single sourcing mobile /w Ember.js & Cordova;
• A lot of beacon work.
Five things audience
members will learn
1. How to build a single code base working on all platforms
2. What changes (if any) are required in the code base to
3. How to avoid common draw-backs of wrapped
applications, such as perceived slowness
4. How to access native phone functions without muddling
up the code base
5. How such applications are packaged and deployed
• 1: What are hybrid apps?;
• 2: Our tools (Cordova, Ember & Good
• 3: Make it go zoom;
What is Cordova?
• Apache Cordova is a platform for building native
mobile applications using HTML, CSS and
• "Cordova" refers to the street the office was on
when the PhoneGap project first began
• “Reflow is the process by which the geometry of the
layout engine's formatting objects are computed. The
HTML formatting objects are called frames: a frame
corresponds to the geometric information for (roughly) a
single element in the content model; the frames are
arranged into a hierarchy that parallels the containment
hierarchy in the content model. A frame is rectangular,
with width, height, and an offset from the parent frame
that contains it.”
What causes Reflow?
• Resizing the browser window;
• adding or removing elements from the DOM; and
• changing an element's classes.
Best Practices for avoiding
1. Avoid setting multiple inline styles; avoid setting styles individually.
2. Use class names of elements, and do so as low in the DOM tree as possible.
3. Batch your DOM changes and perform them offline;
4. Avoid computing styles too often. If you must then cache those values.
5. Apply animations with position: fixed or absolute so it doesn’t affect the layout of other elements.
6. Avoid table layouts, they trigger more reflows than block layouts because multiple passes must be made over
7. Reduce unnecessary DOM depth. Changes at one level in the DOM tree can cause changes at every level of
the tree - all the way up to the root, and all the the way down into the children of the modified node. This leads
to more time being spent performing reflow.
8. Minimize CSS rules and remove unused CSS rules.
9. If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or
position-fixed to accomplish this.
10.Avoid unnecessary complex CSS selectors - descendant selectors in particular.