EmberConf 2016: Warp Speed Memory Management

In low level languages, primitives exist for memory management. Despite the C-like syntax, JavaScript is garbage collected, causing many front end developers to feel it does a great job of memory management for us. But how does it actually work and does it work how we think it does?
This session will discuss memory management in JavaScript and what is really going on behind your browser. Using an Ember.js application, we will also discuss best practices to optimize our code, how JavaScript and Ember optimizes for us, and ways we can address common pain points.

Transcript

1. Warp Speed Memory Management
2. Kelly Senna @simplysenna
3. Memory Management
4. Why Memory Management ? • User experiences are not equal • Browsers are not free from performance concerns • Gain better understanding of your tools
7. Memory Life Cycle • Allocate • Use • Release
8. Allocate and Use var enterprise = {}; var excelsior = [1,2,3]; const voyager = 42; function spaceMission() { /** Do something... */ }; spaceMission();
9. Garbage Collection • Generational • Mark and sweep
10. Garbage Collection old young Full
11. References root
12. Memory Management
13. JavaScript
14. Possible Memory Issues
15. Gotchas • Misused variables • What is this callback even waiting for?? • DOM changes
16. Too Many Memory Leaks?
17. Ember
18. Ember • Streamlines common JavaScript patterns • Developers can focus on solving other business needs • Faster productivity
19. Run Loop Sync Actions routerTransitions Render afterRender Destroy
20. sync actions router Transitions render afterRender destroy Queue Name: sync Number of items in queue: 0 Queue Name: actions Number of items in queue: 8
21. sync actions router Transitions render afterRender destroy Queue Name: sync Number of items in queue: 0 Queue Name: actions Number of items in queue: 0 Queue Name: routerTransitions Number of items in queue: 4
22. sync actions router Transitions render afterRender destroy
23. Components • Reusable pieces of code • First class HTML elements • Handy dandy lifecycle hooks
24. console
25. Observers
26. Computed Properties
30. Thanks! Kelly Senna @simplysenna