Use nanoraf

This speeds up the UI a ton by not reconciling every time if state
is updated frequently. For example, when adding 20 files at once,
previously the UI would reconcile after adding each file, which took
a few ms each time. Especially on a not-supercomputer that could
easily hang the UI for a second or more.

This way the UI reconciliation is sort of detached from the state
updates, and only reconciles up to 60 times per second. In the bulk file
adding case, it only reconciles once after all files have been added.

package.json

@@ -78,6 +78,7 @@
     "es6-promise": "3.2.1",
     "lodash.throttle": "4.1.1",
     "namespace-emitter": "1.0.0",
+    "nanoraf": "^3.0.1",
     "on-load": "3.2.0",
     "prettier-bytes": "1.0.4",
     "socket.io-client": "2.0.1",

src/plugins/Plugin.js

@@ -1,5 +1,5 @@
 const yo = require('yo-yo')
-// const nanoraf = require('nanoraf')
+const nanoraf = require('nanoraf')
 const { findDOMElement } = require('../core/Utils')
 
 /**
@@ -26,8 +26,6 @@ module.exports = class Plugin {
     this.focus = this.focus.bind(this)
     this.install = this.install.bind(this)
     this.uninstall = this.uninstall.bind(this)
-
-    // this.frame = null
   }
 
   update (state) {
@@ -35,28 +33,9 @@ module.exports = class Plugin {
       return
     }
 
-    // const prev = {}
-    // if (!this.frame) {
-    //   console.log('creating frame')
-    //   this.frame = nanoraf((state, prev) => {
-    //     console.log('updating!', Date.now())
-    //     const newEl = this.render(state)
-    //     this.el = yo.update(this.el, newEl)
-    //   })
-    // }
-    // console.log('attempting an update...', Date.now())
-    // this.frame(state, prev)
-
-    // this.core.log('update number: ' + this.core.updateNum++)
-
-    const newEl = this.render(state)
-    yo.update(this.el, newEl)
-
-    // optimizes performance?
-    // requestAnimationFrame(() => {
-    //   const newEl = this.render(state)
-    //   yo.update(this.el, newEl)
-    // })
+    if (this.updateUI) {
+      this.updateUI(state)
+    }
   }
 
   /**
@@ -72,6 +51,11 @@ module.exports = class Plugin {
 
     const targetElement = findDOMElement(target)
 
+    // Set up nanoraf.
+    this.updateUI = nanoraf((state) => {
+      this.el = yo.update(this.el, this.render(state))
+    })
+
     if (targetElement) {
       this.core.log(`Installing ${callerPluginName} to a DOM element`)