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.

Phonegap Day 2016: Ember/JS & Hybrid Apps Tips

3,411 views

Published on

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.

Published in: Technology

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

×