Skip to content
This repository has been archived by the owner on Mar 18, 2019. It is now read-only.

Development

lvh edited this page Mar 8, 2016 · 4 revisions

desdemona is an open source project and welcomes developers to join in. See CONTRIBUTING.md to get started.

Front-end development

Stack

The front-end specific parts rely on Om (Next), a ClojureScript interface to ReactJS.

Environment

Running the UI in development

Typically, front-end development happens through figwheel. This tool gives you automatic code reloading when you're editing code or stylesheets, and automatically gives you a REPL that your editor can use. To run it, just run lein figwheel. It will show you something like:

$ lein figwheel
Figwheel: Starting server at http://localhost:3449
Figwheel: Watching build - dev
Compiling "resources/ui/js/main.js" from ["src"]...
Successfully compiled "resources/ui/js/main.js" in 1.252 seconds.
Launching ClojureScript REPL for build: dev
Figwheel Controls:
          (stop-autobuild)                ;; stops Figwheel autobuilder
          (start-autobuild [id ...])      ;; starts autobuilder focused on optional ids
          (switch-to-build id ...)        ;; switches autobuilder to different build
          (reset-autobuild)               ;; stops, cleans, and starts autobuilder
          (reload-config)                 ;; reloads build config and resets autobuild
          (build-once [id ...])           ;; builds source one time
          (clean-builds [id ..])          ;; deletes compiled cljs target files
          (print-config [id ...])         ;; prints out build configurations
          (fig-status)                    ;; displays current state of system
  Switch REPL build focus:
          :cljs/quit                      ;; allows you to switch REPL to another build
    Docs: (doc function-name-here)
    Exit: Control+C or :cljs/quit
 Results: Stored in vars *1, *2, *3, *e holds last exception object
Prompt will show when Figwheel connects to your application

Follow the instructions by navigating a browser to http://localhost:3449 and you should see the desdemona UI in development mode. Once you do, and you go back to the terminal where you ran lein figwheel, you'll see a ClojureScript REPL:

To quit, type: :cljs/quit
cljs.user=>

You can test that you're talking directly to the browser by evaluating an expression such as (js/alert "Hello from the terminal!"), which should cause an alert dialog box in the browser.

As usual, if you intend to use the terminal REPL directly (instead of using e.g. an IDE-provided REPL through nREPL or something), consider using rlwrap (available through most package managers including Homebrew) like this: rlwrap lein figwheel. This will give you libreadline-style line editing capability.

Running the tests

We use doo to facilitate running. To run all of the tests in real browsers, doo uses Karma, a test runner. Karma is distributed as an npm package, which needs to be installed first. To install the npm packages, run:

lein npm install

If you're familiar with npm, this is equivalent to just npm install. This will install Karma and the required plugins. To run the tests once in Firefox:

$ lein doo firefox test once

;; ======================================================================
;; Testing with Firefox:

LOG: 'Testing desdemona.ui.core-test'
Firefox 44.0.0 (Mac OS X 10.11.0): Executed 1 of 1 SUCCESS (0.011 secs / 0.013 secs)

Typically, you want to run the tests continuously, and ideally even practice test-driven development whenever possible. To do that, simply elide the once, like so:

> lein doo firefox test        17:10:19
Building ...
Reading analysis cache for jar:file:/Users/lvh/.m2/repository/org/clojure/clojurescript/1.7.228/clojurescript-1.7.228.jar!/cljs/core.cljs
Compiling src/desdemona/ui/core.cljs
Compiling test/desdemona/ui/core_test.cljs
Reading analysis cache for jar:file:/Users/lvh/.m2/repository/org/clojure/clojurescript/1.7.228/clojurescript-1.7.228.jar!/clojure/string.cljs
Reading analysis cache for jar:file:/Users/lvh/.m2/repository/org/clojure/clojurescript/1.7.228/clojurescript-1.7.228.jar!/cljs/pprint.cljs
Reading analysis cache for jar:file:/Users/lvh/.m2/repository/org/clojure/clojurescript/1.7.228/clojurescript-1.7.228.jar!/cljs/test.cljs
Compiling test/desdemona/ui/runner.cljs
Reading analysis cache for jar:file:/Users/lvh/.m2/repository/karma-reporter/karma-reporter/0.1.0/karma-reporter-0.1.0.jar!/jx/reporter/karma.cljs
Reading analysis cache for jar:file:/Users/lvh/.m2/repository/doo/doo/0.1.6/doo-0.1.6.jar!/doo/runner.cljs
Copying file:/Users/lvh/Projects/rackspace/desdemona/src/desdemona/ui/core.cljs to out/desdemona/ui/core.cljs
... done. Elapsed 1.055524177 seconds
[doo] Started karma server

;; ======================================================================
;; Testing with Firefox:

[doo] Started karma run
Watching paths: /Users/lvh/Projects/rackspace/desdemona/src, /Users/lvh/Projects/rackspace/desdemona/test

Change detected, recompiling ...
Compiling src/desdemona/ui/core.cljs
Compiling test/desdemona/ui/core_test.cljs
Compiling test/desdemona/ui/runner.cljs
Copying file:/Users/lvh/Projects/rackspace/desdemona/src/desdemona/ui/core.cljs to out/desdemona/ui/core.cljs
... done. Elapsed 0.105915272 seconds

;; ======================================================================
;; Testing with Firefox:

[doo] Started karma run
LOG: 'Testing desdemona.ui.core-test'
Firefox 44.0.0 (Mac OS X 10.11.0) desdemona.ui.core-test add-tests FAILED
	Fail (add-tests) (cljs/test.js:371:11)
	Expected (= (c/add 1 2) 3)
	Actual: (not (= -1 3))

Firefox 44.0.0 (Mac OS X 10.11.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.011 seFirefox 44.0.0 (Mac OS X 10.11.0): Executed 1 of 1 (1 FAILED) ERROR (0.017 secs / 0.011 secs)
Change detected, recompiling ...
Compiling src/desdemona/ui/core.cljs
Compiling test/desdemona/ui/core_test.cljs
Compiling test/desdemona/ui/runner.cljs
Copying file:/Users/lvh/Projects/rackspace/desdemona/src/desdemona/ui/core.cljs to out/desdemona/ui/core.cljs
... done. Elapsed 0.113700553 seconds

;; ======================================================================
;; Testing with Firefox:

[doo] Started karma run
LOG: 'Testing desdemona.ui.core-test'
Firefox 44.0.0 (Mac OS X 10.11.0): Executed 1 of 1 SUCCESS (0.013 secs / 0.01 secs)

As you can see, the tests are automatically re-ran whenever the code changes. This will also keep a separate Firefox open, so it shouldn't impact your normal work environment.