Yet Another Technical Blog: December 2017

I was toying with GUI app development in Clojure, and I tried Seesaw. It was good, however the startup time of the app didn't please me. So I started off the Electron route instead, and decided to use Clojurescript. Here is how a very tiny electron app written in Clojurescript looks like.

Source files

There will be two sets of source files - some for Clojurescript and some for electron. We start off by creating a project using Leiningen

lein new cljstest1

We will use the lein-cljsbuild plugin for our convenience, so in addition to modifying the dependencies section in the project.clj file to

  :dependencies [[org.clojure/clojure "1.8.0"]
                 [org.clojure/clojurescript "1.9.946"]]

we will also add a plugins section

  :plugins [[lein-cljsbuild "1.1.5"]]

After this an execution of

lein deps

is sufficient to install all dependencies. We will also add some more options to the project.clj file, and what it looks like at the end is this.

The project.clj file

(defproject cljstest1 "0.1.0-SNAPSHOT"
  :description "FIXME: write description"
  :url "http://example.com/FIXME"
  :license {:name "Eclipse Public License"
            :url "http://www.eclipse.org/legal/epl-v10.html"}
  :dependencies [[org.clojure/clojure "1.8.0"]
                 [org.clojure/clojurescript "1.9.946"]]
  :plugins [[lein-cljsbuild "1.1.5"]]
  :cljsbuild {
    :builds [{ :id "default"
               :source-paths ["src"]
           :compiler {
                 :output-to "app/app.js"
                 :target :nodejs
                 :main cljstest1.core
                 :optimizations :simple
                 :pretty-print true
                 :externs ["externs.js"]
               }
             }
    ]
  }
 )

As you can see we plan to generate the Electron app in app/app.js. The directory 'app' will be created soon. Before we forget we need to create the externs.js file which we will need in order to use __dirname from Clojurescript.

The externs.js file

var __dirname;

The core.cljs file

Leiningen generated a src/core.clj file for us. Let's rename it to core.cljs so that the cljsbuild tool finds it automatically. Here is what it looks like.

(ns cljstest1.core
     (:require [cljs.nodejs :as nodejs]))

(def electron-pkg (nodejs/require "electron"))
(def url-pkg (nodejs/require "url"))
(def path-pkg (nodejs/require "path"))

(defn create-window
  []
    (.
      (new
        electron-pkg.BrowserWindow
        #js
        {:width 800 :height 600}
      )
      loadURL (url-pkg.format
               #js
                {:pathname (path-pkg.join js/__dirname "index.html")
                 :protocol "file"
                 :slashes true
                 }
               )
      )
)

(defn -main
  []
  (.on  (.-app electron-pkg) "ready" create-window)
)

(set! *main-cli-fn* -main)

The last line which updates the *main-cli-fn* variable is a very important part. Without that node.js won't be able to run the app.

After the Clojurescript part we need to generate the Electron part of our source. We need to create a directory 'app', and inside it place the following package.json file

The package.json file

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
      "electron": "~1.7.8"
  }
}

In this directory, we will also place a index.html file

The index.html file

<html>
  <body>
    <h1>
Ha!</h1>
</body>
<html>

Steps to compile and run

```
cd app; npm install; cd ..
```
```
lein cljsbuild once
```
```
cd app; npm start
```

Yet Another Technical Blog

Saturday, December 30, 2017

Smallest electron app written in clojurescript