Hybrid Apps with Ember@[email protected]
Who am IProgrammerStarted with Java/C;Mostly Ruby/Rails;Go;Ember
for ~2.5 years;
Isle of CodeToronto based development;Focused
on:Prototyping;Single sourcing mobile /w Ember.js & Cordova;
andA lot of beacon work.
Five things audience members will learnHow to build a single
code base working on all platformsWhat changes (if any) are
required in the code base to achieve thisHow to avoid common
draw-backs of wrapped applications, such as perceived slownessHow
to access native phone functions without muddling up the code
baseHow such applications are packaged and deployed
Contents1: What are hybrid apps?;2: Our tools (Cordova, Ember
& Good Programming);3: Make it go zoom;
1 - What are hybrid apps
Using one code base for multiple platforms;
vs. building custom code bases for each platform;
Wrapped Apps are everywhere
Less cost of building
Re-use app for web
Less cost to add new features
No out of sync experiences
How important is complexity?
How easy is it for you to find engineers?
The biggest mistake weve made as a company is betting on HTML5
over nativeMark Zuckerberg, 2012
2 - Our Tools
What is Cordova?Apache Cordova is a platform for building native
mobile applications using HTML, CSS and
JavaScripthttps://cordova.apache.org/"Cordova" refers to the street
the office was on when the PhoneGap project first began
Cordova vs Phonegap
UIWebView
(mostly) consistent APIs
The Ember way is not about Ember
ember-cli-cordova
Cordova/Ember is easier nowProcess has come a long way
Bind Cordova Service
https://github.com/isleofcode/ember-cli-cordova
Livereload
3 - Make it go Zoom
Good Code == Good HybridMuch of making effective mobile is
simply writing good code.
Desktops let us be lazier;
Cordova is not native
Cordova is not native
Touch Eventshttp://hammerjs.github.io
Hammer Example
Ember Gestureshttps://github.com/runspired/ember-gestures
Ghost Clicks
Ember Hack
Manage Reflows
Manage ReflowsReflow 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.http://www-archive.mozilla.org/newlayout/doc/reflow.html
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
Best Practices for avoiding ReflowAvoid setting multiple inline
styles; avoid setting styles individually.Use class names of
elements, and do so as low in the DOM tree as possible.Batch your
DOM changes and perform them offline;Avoid computing styles too
often. If you must then cache those values.Apply animations with
position: fixed or absolute so it doesnt affect the layout of other
elements.Avoid table layouts, they trigger more reflows than block
layouts because multiple passes must be made over the
elements.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.Minimize CSS rules and remove unused CSS rules.If you make
complex rendering changes such as animations, do so out of the
flow. Use position-absolute or position-fixed to accomplish
this.Avoid unnecessary complex CSS selectors - descendant selectors
in particular.
http://stage.docs.phonegap.com/tutorials/optimize/03-min-reflows/
-webkit-tap-highlight-color:rgba(0,0,0,0);
Understand Viewport
Android ViewportiOS 7+ Viewport
ionic
Keyboardcordova.plugins.Keyboard.isVisiblecordova.plugins.Keyboard.hideKeyboardAccessoryBarcordova.plugins.Keyboard.closecordova.plugins.Keyboard.disableScrollcordova.plugins.Keyboard.show
https://github.com/driftyco/ionic-plugin-keyboard
Infinite ScrollingSmoke & Mirrors:
https://github.com/runspired/smoke-and-mirrorsEmber ListView:
https://github.com/emberjs/list-viewEmber Cloaking:
https://github.com/eviltrout/ember-cloaking
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;
Miragehttps://github.com/samselikoff/ember-cli-mirage
Liquid Firehttp://ef4.github.io/liquid-fire/
Crosswalkhttps://crosswalk-project.org/
Hybrid Apps with Ember@[email protected]
