Comparison between keyed node implementation and issues with iframes

[ursi]

I have an application that involves a list of embedded videos (in iframes) where the user can choose to hide any of them individually. I noticed that when I hid one of them, all the iframes after it in the list would get reloaded. Naturally I reached for a keyed node to solve this problem, but low and behold, it did not change anything. After talking with Nate Faubion on discord, it turns out that the current keyed node diffing algorithm still moves things around more than I expected it to, and when an iframe is moved, it gets reloaded. I learned functional UI in Elm originally, so this behavior surprised me. I checked if Elm behaved the way I expected it to, and it did. Nate said that the current algorithm was made not to minimize DOM manipulation, but to satisfy other design goals. I'm curious if getting this diffing on par with Elm, or at least fixing the iframe issue is something the project would currently be open to.

Comparisons

• Elm
  • Removal: no reloads
  • Reorder: 1/3 reloaded
• Halogen (the videos don't load but it doesn't matter for the demo, the black screens still flash white when they get reloaded)
  • Removal: All beneath are reloaded
  • Reorder: 2/3 reloaded