Mobile support: Instant move response via timer updates

Problem: When updating many elements mobile device queues slow changes. So even after touch up, you can se changes caching up.
Solution: Update virtual dom/model instantly, but render dom via timer, so queues of slow HTML updates could be skipped. Resulting in  more natural response.

This will be very useful for more complex GUI interactions (E.g, zooming using touch screen).

Author: aurelijusb

js/src/main/scala/com/auginte/eventsourced/MainJs.scala

@@ -66,17 +66,29 @@ object MainJs extends JSApp {
     onReady {
       val updatesPerSecond = 60
       Async.timer(1000 / updatesPerSecond) {
+        def render(root: Element) = {
+          def clearChilds(root: Element): Unit = {
+            root.innerHTML = ""
+          }
+
+          clearChilds(root)
+          root.appendChild(div(controls.render).render)
+          root.appendChild(elements.domElements.createDomElement(dom.document))
+          DEBUG.repainted()
+        }
+
         DEBUG.frames += 1
         if (needUpdate) {
           needUpdate = false
+          val root = dom.document.getElementById("root")
+          render(root)
         }
         true
       }
       DEBUG.framesPerSecond()
 
       // Data model
-      val root = dom.document.getElementById("root")
-      ElementsApp.subscribe(ElementsApp.zoom(identity))(_ => render(root))
+      ElementsApp.subscribe(ElementsApp.zoom(identity))(_ => needUpdate = true)
       ElementsApp(Empty)
 
       // Updates from server
@@ -87,15 +99,4 @@ object MainJs extends JSApp {
       source.addEventListener[MessageEvent]("message", messageHandler, useCapture = false)
     }
   }
-
-  def render(root: Element) = {
-    def clearChilds(root: Element): Unit = {
-      root.innerHTML = ""
-    }
-
-    clearChilds(root)
-    root.appendChild(div(controls.render).render)
-    root.appendChild(elements.domElements.createDomElement(dom.document))
-    DEBUG.repainted()
-  }
 }