A respondent application

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, figwheel, which was created by Bruce Hauman to help developers get started with ClojureScript[4].

Let's get started:

    lein new figwheel respondent-app

Next, let's modify the project file to include the following dependencies:

[respondent/respondent "0.1.0-SNAPSHOT"] 
[prismatic/dommy "1.1.0"]

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 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/compiled/respondent_app.js"></script> </body> </html>

In the preceding snippet, we created a new div element, which will contain the mouse's position. It defaults to (0,0).

The last piece of the puzzle is modifying src/respondent_app/core.cljs to match the following:

 (ns respondent-app.core 
  (:require [respondent.core :as r] 
            [dommy.core :as dommy])) 
 
 
(def mouse-pos-stream (r/event-stream)) 
(def mouse-pos-selector (dommy/sel1 :#mouse-xy))
(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! mouse-pos-selector 
                                (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 a figwheel server:

    $ lein figwheel

This should take a few seconds. Navigate to http://localhost:3449/index.html and drag the mouse around to see its current position.

Congratulations on successfully developing, deploying, and using your own CES framework!