(Preface: I know, I know… a virtual DOM? It might be a little overkill and probably not even close to being on the roadmap, but here me out anyways just for the sake of discussion.)

While developing a site a few weeks back, I wanted button hover states/animations to persist between page transitions. Using vanilla Turbolinks, I was experiencing 'jumpy' transitions (gif below). Although I could have used something like React to accomplish it, I thought that was a bit overkill for such a simple site. So, I figured I'd try out using Turbolinks with a virtual DOM.

I've been experimenting with a small monkey patch using the nifty virtual-dom and vdom-virtualize libraries compiled with browserify-rails:

#= require turbolinks

diff = require "virtual-dom/diff"
patch = require "virtual-dom/patch"
virtualize = require "vdom-virtualize"

Turbolinks.SnapshotRenderer::assignNewBody = ->

  # Virtualize the current body
  curBody = virtualize document.body

  # Virtualize the new body
  newBody = virtualize @newBody

  # Diff the 2 virtual DOMs, creating a set of patches
  patches = diff curBody, newBody

  # Apply the resulting patches to the current DOM
  patch document.body, patches

It's obviously quite hacky, but it's enough to experiment with. And however hacky it may be, the results are pretty awesome. See the gifs below:

Before

After

I thought I'd see what the thoughts were on something like this and maybe start a discussion on whether or not this kind of feature would be useful to other Turbolinks users.