Build Mobile Apps with Ember@alexblomPartner, Isle of Code
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]
Top Related