Permalink
Browse files

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).
  • Loading branch information...
aurelijusb committed Oct 16, 2016
1 parent 50c81bb commit 759f68b18853971424af96fa191d9ba1568c5709
Showing with 14 additions and 13 deletions.
  1. +14 −13 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()
- }
}

0 comments on commit 759f68b

Please sign in to comment.