Reload worker threads in dev mode

Author: sgdan

README.md

@@ -1,16 +1,17 @@
 # javascript-app-wrapper
 
-An executable JAR which can be run as a desktop app. App is implemented in JavaScript divided into:
-- UI code running in JavaFX WebView window (Webkit JS engine)
-- Worker code running in background threads for processor intensive work (Nashorn JS engine)
-- Small Kotlin main class linking everything
+An executable JAR which can be run as a desktop app
+- UI is JavaScript/HTML/CSS running in JavaFX WebView window (Webkit JS engine)
+- Javascript worker threads for processor intensive work and system calls (Nashorn JS engine)
+- Small Kotlin program linking UI and workers
+- Dev mode to watch JavaScript/HTML/CSS and reload app on changes
+- Firebug lite example for debugging UI
 
-### Execute
+### Build and run
 ```
  ./gradlew clean shadowJar
  java -jar build/libs/javascript-app-wrapper-all.jar
 ```
 
 ### Todo
-- Dev mode, reload worker scripts and thread pool?
 - Main window size/resize/transparency configuration and example?

build.gradle

@@ -2,7 +2,6 @@ plugins {
     id 'application'
     id 'org.jetbrains.kotlin.jvm' version '1.1.60'
     id 'com.github.johnrengelman.shadow' version '2.0.1'
-    id 'java'
 }
 
 repositories {

gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
-#Sat Nov 18 00:21:17 AEDT 2017
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.3.1-bin.zip
+#Thu Nov 23 18:56:25 AEDT 2017
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-zipStorePath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.3.1-all.zip

src/main/kotlin/com/github/sgdan/WebAppWrapper.kt

@@ -1,41 +1,29 @@
 package com.github.sgdan
 
 import javafx.application.Application
+import javafx.concurrent.Worker
 import javafx.scene.web.WebView
 import kotlinx.coroutines.experimental.launch
-import kotlinx.coroutines.experimental.newFixedThreadPoolContext
 import netscape.javascript.JSObject
 import tornadofx.*
 import java.io.File
+import java.lang.Thread.sleep
 import java.net.URI
 import java.net.URL
 import java.nio.file.FileSystems
 import java.nio.file.Files
-import java.nio.file.Path
 import java.nio.file.Paths
 import java.nio.file.StandardWatchEventKinds.*
-import java.util.concurrent.LinkedBlockingQueue
 import javax.script.ScriptEngineManager
 import kotlinx.coroutines.experimental.javafx.JavaFx as UI
 
 class WebAppWrapper : App(WebAppView::class)
 
-/**
- * For worker threads to log to System.out, simulates console.log()
- */
-class Console {
-    fun log(vararg data: Any?) = println(data.joinToString())
-}
-
 /** Task to be executed by worker thread */
 data class Task(val name: String, val args: Array<Any>)
 
 class WebAppView : View() {
     private val nashorn = ScriptEngineManager().getEngineByName("nashorn")
-    private val console = Console() // redirect messages from workers to console
-
-    /** Tasks to be processed by the workers */
-    private val tasks = LinkedBlockingQueue<Task>()
 
     private val web = WebView()
     override val root = web
@@ -44,13 +32,14 @@ class WebAppView : View() {
 
     fun inDevMode() = devFolder().exists()
 
-    fun window() = web.engine.executeScript("window") as JSObject
-
     /** For workers to send messages to the UI */
     private val ui = object {
         fun send(name: String, args: Array<Any>) {
             // call named method in JavaFX UI thread
-            launch(UI) { window().call(name, args) }
+            launch(UI) {
+                val window = web.engine.executeScript("window") as JSObject
+                window.call(name, args)
+            }
         }
     }
 
@@ -60,13 +49,6 @@ class WebAppView : View() {
         else emptyArray()
     }
 
-    /** For UI to create tasks */
-    private val tasksHook = object {
-        fun add(name: String, args: JSObject) {
-            tasks.add(Task(name, toArray(args)))
-        }
-    }
-
     /**
      * Check both classpath and current folder for a "web" folder resource
      */
@@ -77,31 +59,44 @@ class WebAppView : View() {
             // from classpath (i.e. contained within executable jar
             else WebAppWrapper::class.java.classLoader.getResource("web/$name")
 
+    val uiHook: URL
+    val workerHook: URL
+    var workers: Workers? = null
+
+    /** For UI to create tasks */
+    val tasks = object {
+        fun add(name: String, args: JSObject) {
+            workers?.add(name, args)
+        }
+    }
+
+    /**
+     * Reload UI and reset thread pool & workers
+     */
+    fun reset() {
+        workers?.stop()
+        workers = Workers(nashorn, workerHook, ui)
+        launch(UI) {
+            web.engine.reload()
+        }
+    }
+
     init {
-        val frontEndHook = checkNotNull(findResource("ui.html")) {
-            "Must provide front end hook: web/ui.html"
+        uiHook = checkNotNull(findResource("ui.html")) {
+            "Must provide UI hook: web/ui.html"
         }
-        val backEndHook = checkNotNull(findResource("worker.js")) {
-            "Must provide back end hook: web/worker.js"
+        workerHook = checkNotNull(findResource("worker.js")) {
+            "Must provide worker hook: web/worker.js"
         }
+        workers = Workers(nashorn, workerHook, ui)
 
-        // load worker threads, leave one core for the UI
-        val nWorkers = Math.max(Runtime.getRuntime().availableProcessors() - 1, 1)
-        val pool = newFixedThreadPoolContext(nWorkers, "worker-pool")
-        (1..nWorkers).forEach {
-            launch(pool) {
-                // bindings aren't thread safe, so one for each thread
-                val bindings = nashorn.createBindings()
-                bindings.put("console", console) // support console.log for workers
-                bindings.put("tasks", tasks)
-                bindings.put("ui", ui)
-                nashorn.eval(backEndHook.readText(), bindings)
+        web.engine.loadWorker.stateProperty().addListener { _, _, newValue ->
+            if (newValue == Worker.State.SUCCEEDED) {
+                val window = web.engine.executeScript("window") as JSObject
+                window.setMember("tasks", tasks)
             }
         }
-
-        // load front end
-        window().setMember("tasks", tasksHook)
-        web.engine.load(frontEndHook.toExternalForm())
+        web.engine.load(uiHook.toExternalForm())
 
         // watch folder for changes
         if (inDevMode()) {
@@ -111,10 +106,9 @@ class WebAppView : View() {
             launch {
                 while (true) {
                     val key = watcher.take()
-                    key.pollEvents().forEach {
-                        println("event: ${it.kind()}")
-                    }
-                    launch(UI) { web.engine.reload() }
+                    sleep(50) // wait a bit, in case there are multiple events
+                    key.pollEvents()
+                    reset()
                     key.reset()
                 }
             }

src/main/kotlin/com/github/sgdan/Workers.kt

@@ -0,0 +1,72 @@
+package com.github.sgdan
+
+import kotlinx.coroutines.experimental.launch
+import kotlinx.coroutines.experimental.newFixedThreadPoolContext
+import netscape.javascript.JSObject
+import java.net.URL
+import java.util.concurrent.LinkedBlockingQueue
+import java.util.concurrent.TimeUnit.SECONDS
+import javax.script.ScriptEngine
+import kotlinx.coroutines.experimental.javafx.JavaFx as UI
+
+/**
+ * For worker threads to log to System.out, simulates console.log()
+ */
+class Console {
+    fun log(vararg data: Any?) = println(data.joinToString())
+}
+
+/**
+ * A pool of background worker threads to perform tasks asynchronously
+ */
+class Workers(engine: ScriptEngine, script: URL, ui: Any) {
+    val nWorkers = Math.max(Runtime.getRuntime().availableProcessors() - 1, 1)
+    val pool = newFixedThreadPoolContext(nWorkers, "worker-pool")
+    private val console = Console() // redirect messages from workers to console
+
+    /** Tasks to be processed by the workers */
+    private val tasks = LinkedBlockingQueue<Task>()
+    private var running = true
+
+    init {
+        (1..nWorkers).forEach {
+            launch(pool) {
+                // bindings aren't thread safe, so one for each thread
+                val bindings = engine.createBindings()
+                bindings.put("console", console) // support console.log for workers
+                bindings.put("tasks", workerTake)
+                bindings.put("ui", ui)
+                engine.eval(script.readText(), bindings)
+            }
+        }
+    }
+
+    fun stop() {
+        running = false
+        pool.close()
+        tasks.clear()
+    }
+
+    fun add(name: String, args: JSObject) {
+        tasks.add(Task(name, toArray(args)))
+    }
+
+    /**
+     * Convert JSObject to java array
+     */
+    private fun toArray(jso: JSObject): Array<Any> {
+        val len = jso.getMember("length")
+        return if (len is Int) Array(len) { i -> jso.getSlot(i) }
+        else emptyArray()
+    }
+
+    private val workerTake = object {
+        fun take(): Task? {
+            while (running) {
+                val task = tasks.poll(5, SECONDS)
+                if (task != null) return task
+            }
+            return null
+        }
+    }
+}

src/main/resources/web/ui.css

@@ -1,8 +1,8 @@
 html,
 body {
     margin: 0;
-    padding: 0;
-    background-color: black;
+    padding: 5;
+    background-color: blue;
     font-family: Arial, Helvetica, Verdana, Geneva, Tahoma, sans-serif;
     color: #faa;
     font-size: 12px;

src/main/resources/web/worker.js

@@ -13,8 +13,10 @@ var jobs = {
     }
 }
 
-while (true) {
-    var task = tasks.take()
+var task = tasks.take()
+while (task != null) {
     jobs[task.name](task.args)
+    task = tasks.take()
 }
 
+console.log("worker exiting")