Separate action processor and renderer

Author: sgdan

build.gradle

@@ -29,10 +29,10 @@ dependencies {
     compile 'org.jetbrains.kotlin:kotlin-stdlib-jdk8'
     compile 'org.jetbrains.kotlin:kotlin-reflect'
     compile 'org.jetbrains.kotlinx:kotlinx-coroutines-javafx:0.21'
+    compile 'io.github.microutils:kotlin-logging:1.4.9'
 
     testCompile 'junit:junit:4.12'
     testCompile 'org.slf4j:slf4j-simple:1.7.25'
-    testCompile 'io.github.microutils:kotlin-logging:1.4.9'
     testCompile 'org.jetbrains.kotlinx:kotlinx-html-jvm:0.6.6'
 }
 

src/main/kotlin/com/github/sgdan/webviewredux/Redux.kt

@@ -3,20 +3,23 @@ package com.github.sgdan.webviewredux
 import javafx.animation.AnimationTimer
 import javafx.concurrent.Worker
 import javafx.scene.web.WebView
-import kotlinx.coroutines.experimental.channels.Channel
-import kotlinx.coroutines.experimental.javafx.JavaFx
+import kotlinx.coroutines.experimental.channels.actor
 import kotlinx.coroutines.experimental.launch
 import kotlinx.coroutines.experimental.runBlocking
+import mu.KotlinLogging
 import netscape.javascript.JSObject
 import org.w3c.dom.Document
 import org.w3c.dom.Node
 import org.w3c.dom.Text
 import java.io.StringWriter
-import java.util.concurrent.atomic.AtomicBoolean
+import java.util.concurrent.atomic.AtomicReference
 import javax.xml.parsers.DocumentBuilderFactory
 import javax.xml.transform.TransformerFactory
 import javax.xml.transform.dom.DOMSource
 import javax.xml.transform.stream.StreamResult
+import kotlinx.coroutines.experimental.javafx.JavaFx as UI
+
+private val log = KotlinLogging.logger {}
 
 /**
  * Provide a simple redux-like framework for a JavaFX WebView component.
@@ -52,23 +55,28 @@ class Redux<S>(
         // fn to update the state by performing an action
         private val update: (Action, S) -> S
 ) {
-    private val actions = Channel<Action>()
+    private val actionProcessor = actor<Action> {
+        var currentState = state.get()
+        for (action in channel) {
+            // perform the action and update the state
+            val nextState = update(action, currentState)
+            state.set(nextState)
+            currentState = nextState
+        }
+    }
+
     private val engine = webview.engine
 
-    private var state = initialState
+    private val state = AtomicReference(initialState)
     private var currentView = view(initialState)
 
-    /** Set when a new view should be generated */
-    private val refresh = AtomicBoolean(false)
-
     init {
         renderInitialView()
-        launchActionProcessor()
         launchTimer()
     }
 
     private fun renderInitialView() {
-        launch(JavaFx) {
+        launch(UI) {
             engine.loadWorker.stateProperty().addListener { _, _, newValue ->
                 if (newValue == Worker.State.SUCCEEDED) {
                     // add hook for actions
@@ -83,34 +91,21 @@ class Redux<S>(
         }
     }
 
-    private fun launchActionProcessor() {
-        launch {
-            while (!actions.isClosedForReceive) {
-                // perform the action and update the state
-                val action = actions.receive()
-                val currentState = state
-                val nextState = update(action, currentState)
-                state = nextState
-
-                // update the view based on the new state, only once per frame refresh
-                if (refresh.getAndSet(false)) {
-                    val prevView = currentView
-                    val nextView = view(nextState)
-                    launch(JavaFx) {
-                        engine.document?.documentElement?.let { copy(prevView, nextView, it) }
-                    }
-                    currentView = nextView
-                }
-            }
-        }
-    }
-
-    /** Set refresh flag each frame cycle */
+    /** Refresh view if required on JavaFX pulse */
     private fun launchTimer() {
-        // set refresh flag each frame cycle
         object : AnimationTimer() {
+            var previousState: S? = null
+
             override fun handle(now: Long) {
-                refresh.set(true)
+                val currentState = state.get()
+                if (currentState != previousState) {
+                    // update the view based on the new state
+                    val prevView = currentView
+                    val nextView = view(currentState)
+                    engine.document?.documentElement?.let { copy(prevView, nextView, it) }
+                    currentView = nextView
+                    previousState = currentState
+                }
             }
         }.apply { start() }
     }
@@ -119,7 +114,7 @@ class Redux<S>(
      * Actions go through the channel to be processed in order
      */
     fun perform(action: Action) {
-        runBlocking { actions.send(action) }
+        runBlocking { actionProcessor.send(action) }
     }
 
     /** Convenience method to perform an action */
@@ -130,7 +125,8 @@ class Redux<S>(
      */
     private val hook = object {
         fun perform(args: JSObject) {
-            this@Redux.perform(Action.from(args))
+            val action = Action.from(args) // UI thread
+            launch { this@Redux.perform(action) } // don't block the UI thread
         }
     }
 }

src/test/kotlin/com/github/sgdan/webviewredux/ManyActionsExample.kt

@@ -93,7 +93,7 @@ class ManyActionsExample : Application() {
         // timer for next frame of simple animation
         launch {
             while (true) {
-                redux?.perform(NEXT)
+                redux.perform(NEXT)
                 delay(50)
             }
         }