Skip to content
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.
You can’t perform that action at this time.