Phonegap Day 2016: Ember/JS & Hybrid Apps Tips

2,860 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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,860
On SlideShare
0
From Embeds
0
Number of Embeds
1,048
Actions
Shares
0
Downloads
14
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×