Speed Up Internals

[danpastori]

👉 Describe the problem

We want Amplitude to be lightweight, fast, and efficient. Some new Javascript features and and more experience allow for these upgrades to come to light.

👥 Problem evidence & reach

Everyone using AmplitudeJS

🥰 Describe the "impact" on users?

AmplitudeJS will perform better, be quicker, and more lightweight

🏆 How to solve this problem

Priority 9/10: Only Bind Elements Being Used

We can query any element that starts with the data-amplitude-* prefix and bind what's necessary. This way, if you aren't using all of the elements, then we don't waste time looking for them.

Priority 9/10: Use Array methods like .map(), .reduce(), .filter(), etc.

Less looping, smaller code base. Just make things easier to manage.

Priority 8/10: Change from .classList.remove() and .classList.add() to .classList.toggle()

Less code to do what we were doing before, win win.

Priority 1/10: Research element.contains() for click/touch handlers

This will allow you to monitor interactions within an element instead of only on the element itself.
Allows propagation from inside an element to be handled correctly with AmplitudeJS. Specifically on play button images.

This might not be a big deal, but I know we ran into issues with this before.

💯 How do we validate the problem is solved?

AmplitudeJS is faster and more lightweight than before while maintaining existing features.