EmberConf 2016: Warp Speed Memory Management

725745faa281656e687992b8a40a0ed9?s=47 Senna
March 29, 2016

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.

725745faa281656e687992b8a40a0ed9?s=128

Senna

March 29, 2016
Tweet

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
  5. None
  6. None
  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

  27. None
  28. None
  29. None
  30. Thanks! Kelly Senna @simplysenna