Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
-
Upload
alex-blom -
Category
Technology
-
view
2.871 -
download
2
Transcript of Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Hybrid Apps with Ember:
Lessons Learned@[email protected]
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@[email protected]