Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Hybrid Apps with Ember:
Lessons Learned
@alexblom
alex@isleofcode.com
Who am I
• Programmer;
• Started with Java/C;
• Mostly Ruby/Rails;
• Go;
• Ember for ~2.5 years;
Isle of Code
• Toronto + Chicago based development;
• Focused on:
• Prototyping;
• Single sourcing mobile /w Ember.js & Co...
Who knows Ember?
The Ember way is not
about Ember
WebView
or crosswalk
Crosswalk
https://crosswalk-project.org/
The Hackiest Way
• Process has come a long way
ember-cli-cordova
Lessons Learned
Good Code == Good Hybrid
• Much of making effective mobile is simply writing
good code;
• Desktops let us be lazier;
• JS ...
Bind Phonegap to a Service
Touch Events
http://hammerjs.github.io
Hammer Example
Understand Viewport
Android Viewport
iOS 7+ Viewport
Know your WebView
Which engine are you using?
Probably Nitro of v8
Memory Leaks
• Garbage 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 remov...
Use CSS Transforms
visibility:hidden
Avoid Unnecessary Nesting
• Especially with components;
-webkit-tap-highlight-color:rgba(0,0,0,0);
Ember Hack
Understand
Framework Events
Ember Click Handler
• Within Ember, there are many ways to receive
clicks, such as:
These clicks are not
the same
• Sub Tip: Coalesce similar listeners;
Run Loops
• Ember.run.schedule(‘afterRender'
• Other tools for scheduling asyncronous
callbacks;
• Solves many problems - ...
Workers/Threads
• Route animations can be choppy, as the UI
thread is shared with items such as model hooks
and expensive computations;
• ...
• More work around WebWorkers for handling
background requests and pushing to the Ember
store;
Liquid Fire
http://ef4.github.io/liquid-fire/
Ghost Clicks
Save Plugins
• For the love of god, save plugins.
Infinite Scrolling
• Smoke & Mirrors:
https://github.com/runspired/smoke-and-mirrors
Occlusion
http://runspired.github.io/smoke-and-mirrors/#/examples/dbmon
Animations
Animations - Velocity
Canvas
• Choppy and deal breaking. This is common when
working with DOM;
• Need to move to Canvas;
• ~16ms target for anim...
Hybrid Apps with
Ember
@alexblom
alex@isleofcode.com
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Upcoming SlideShare
Loading in …5
×

Phonegap Day 2016: Ember/JS & Hybrid Apps Tips

Talk about general profiling & performance for Hybrid Applications, as well as some Ember specific tips. For Cordova + PhoneGap.

Presented on Jan 29 2016 at PhoneGap Day in Salt Lake City.

  • Be the first to comment

Phonegap Day 2016: Ember/JS & Hybrid Apps Tips

  1. 1. Hybrid Apps with Ember: Lessons Learned @alexblom alex@isleofcode.com
  2. 2. Who am I • Programmer; • Started with Java/C; • Mostly Ruby/Rails; • Go; • Ember for ~2.5 years;
  3. 3. Isle of Code • Toronto + Chicago based development; • Focused on: • Prototyping; • Single sourcing mobile /w Ember.js & Cordova; and • A lot of beacon work.
  4. 4. Who knows Ember?
  5. 5. The Ember way is not about Ember
  6. 6. WebView or crosswalk
  7. 7. Crosswalk https://crosswalk-project.org/
  8. 8. The Hackiest Way • Process has come a long way
  9. 9. ember-cli-cordova
  10. 10. Lessons Learned
  11. 11. Good Code == Good Hybrid • Much of making effective mobile is simply writing good code; • Desktops let us be lazier; • JS ecosystem is littered with bad/leaky code;
  12. 12. Bind Phonegap to a Service
  13. 13. Touch Events http://hammerjs.github.io
  14. 14. Hammer Example
  15. 15. Understand Viewport Android Viewport iOS 7+ Viewport
  16. 16. Know your WebView
  17. 17. Which engine are you using? Probably Nitro of v8
  18. 18. Memory Leaks • Garbage Collection: 2 types: • Young Generation & Old Generation
  19. 19. http://blog.isleofcode.com/the-real-reason-to-avoid-jquery/
  20. 20. Using too much memory has negative implications
  21. 21. Name closures for better profiling
  22. 22. https://developer.chrome.com/devtools/docs/javascript-memory-profiling
  23. 23. Manage Reflows
  24. 24. 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/reflo w
  25. 25. Use CSS Transforms
  26. 26. visibility:hidden
  27. 27. Avoid Unnecessary Nesting • Especially with components;
  28. 28. -webkit-tap-highlight-color:rgba(0,0,0,0);
  29. 29. Ember Hack
  30. 30. Understand Framework Events
  31. 31. Ember Click Handler • Within Ember, there are many ways to receive clicks, such as:
  32. 32. These clicks are not the same
  33. 33. • Sub Tip: Coalesce similar listeners;
  34. 34. Run Loops • Ember.run.schedule(‘afterRender' • Other tools for scheduling asyncronous callbacks; • Solves many problems - but not all of them. We still can’t be animating while transitioning;
  35. 35. Workers/Threads
  36. 36. • 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;
  37. 37. • More work around WebWorkers for handling background requests and pushing to the Ember store;
  38. 38. Liquid Fire http://ef4.github.io/liquid-fire/
  39. 39. Ghost Clicks
  40. 40. Save Plugins • For the love of god, save plugins.
  41. 41. Infinite Scrolling • Smoke & Mirrors: https://github.com/runspired/smoke-and-mirrors
  42. 42. Occlusion
  43. 43. http://runspired.github.io/smoke-and-mirrors/#/examples/dbmon
  44. 44. Animations
  45. 45. Animations - Velocity
  46. 46. Canvas • Choppy and deal breaking. This is common when working with DOM; • Need to move to Canvas; • ~16ms target for animations, DOM can’t do this;
  47. 47. Hybrid Apps with Ember @alexblom alex@isleofcode.com

×