This chapter would not be complete if we didn't go through the whole development life cycle of deploying and using the new framework in a new application. This is the purpose of this section.
The application we will build is extremely simple. All it does is track the position of the mouse using the reactive primitives we built into respondent.
To that end, we will be using the excellent lein template cljs-start (see https://github.com/magomimmo/cljs-start), created by Mimmo Cosenza to help developers get started with ClojureScript.
lein new cljs-start respondent-app
Next, let's modify the project file to include the following dependencies:
[clojure-reactive-programming/respondent "0.1.0-SNAPSHOT"] [prismatic/dommy "0.1.2"]
The first dependency is self-explanatory. It's simply our own framework. dommy is a DOM manipulation library for ClojureScript. We'll briefly use it when building our web page.
Next, edit the dev-resources/public/index.html file to match the following:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: tracking mouse position</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="test">
<h1>Mouse (x,y) coordinates:</h1>
</div>
<div id="mouse-xy">
(0,0)
</div>
<script src="js/respondent_app.js"></script>
</body>
</html>In the preceding snippet, we created a new div element, which will contain the mouse position. It defaults to (0,0).
The last piece of the puzzle is modifying src/cljs/respondent_app/core.cljs to match the following:
(ns respondent-app.core
(:require [respondent.core :as r]
[dommy.core :as dommy])
(:use-macros
[dommy.macros :only [sel1]]))
(def mouse-pos-stream (r/event-stream))
(set! (.-onmousemove js/document)
(fn [e]
(r/deliver mouse-pos-stream [(.-pageX e) (.-pageY e)])))
(r/subscribe mouse-pos-stream
(fn [[x y]]
(dommy/set-text! (sel1 :#mouse-xy)
(str "(" x "," y ")"))))This is our main application logic. It creates an event stream to which we deliver the current mouse position from the onmousemove event of the browser window.
Later, we simply subscribe to it and use dommy to select and set the text of the div element we added previously.
We are now ready to use the app! Let's start by compiling ClojureScript:
$ lein compile
This should take a few seconds. If all is well, the next thing to do is to start a REPL session and start up the server:
$ lein repl user=> (run)
Now, point your browser to http://localhost:3000/ and drag the mouse around to see its current position.
Congratulations on successfully developing, deploying, and using your own CES framework!