Build Mobile Apps with Ember@alexblomPartner, Isle of Code
[email protected]
whoami
Isle of CodeToronto + Chicago based development;Focused on
Ember/Cordova;
Contents0) Preamble;1) Building Ember/Cordova;2) Handling the
basics;3) Performance;
Why Mobile & EmberBecause Ember;Cost;Hiring;Developer
sanity;
Cordova vs PhoneGap
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;
1) Building Ember/Cordova
In the old days
ember-cli-cordova
ember-cordova
https://github.com/isleofcode/ember-cordova
ember-cordovaStarted as a fork of ember-cli-cordova to prepare
for platforms;Has now become a stand alone project &
ember-cli-cordova is less maintained;
ember-cordova: ChangesRefactoring of internals/tasks;Does not
include default touch/click handlers, only a raw cordova
wrapping;Adds hook support;Splash screen & icon management
built in;Cordova, Device & Platform Services;Limited plugin
bindings;
ember-cordova: NextMore plugin bindings;Plugins which install an
ember-service && the related cordova plugin (e.g.
keyboard);Fixed tests;
HooksbeforeBuildafterBuildbeforePrepareafterPrepare
Use hooks for any customization, warnings, etc;Hooks are just
exported functions;
Remote
Inspectionhttps://github.com/joostdevries/ember-cli-remote-inspector
2) Handling the Basics
(Cordova services from file urls)
config/environment.js
Mobile Safari raises touch vs click events on anything but an a
link;Do this or action bindings will not work;
styles/app.css
Links will not appear as they have been clicked, just like a
native app.
styles/app.css
Splash Handling
routes/application.js
IconsComing next week;Generation handled by default;We use the
platform name vs [email protected]
Platform Service
Cordova Service
Touch Eventshttp://hammerjs.github.io
Hammer Example
A note on devicereadyYou 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.
Keyboard
Understand Viewport
Fix on Android
To fix on iOS, use the keyboard plugin.
Liquid Firehttp://ef4.github.io/liquid-fire/
Infinite ScrollingSmoke & Mirrors:
https://github.com/runspired/smoke-and-mirrors
3) Performance
Crosswalkhttps://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;
Know your WebView
Using too much memory has negative implications
http://www-cs.canisius.edu/~hertzm/gcmalloc-oopsla-2005.pdf
Memory LeaksGarbage Collection: 2 types:Young Generation &
Old Generation
http://blog.isleofcode.com/the-real-reason-to-avoid-jquery/
Name closures for better profiling
https://developer.chrome.com/devtools/docs/javascript-memory-profiling
App size mattersFor 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.performancewindow.performance.mark(foo)
websocket or http2
Workers/Threads
http://blog.isleofcode.com/introduction-to-web-workers/
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;
Animations
Animations - Velocity
Hybrid Apps with Ember@[email protected]
