Setting up the dashboard project

As we mentioned previously, we will be developing the dashboard by using ClojureScript, with the UI rendered with Om. Additionally, as we have chosen Observables as our main reactive abstraction, we will need RxJS, one of the many implementations of Microsoft's Reactive Extensions. We will be pulling these dependencies into our project shortly.

Let's create a new ClojureScript project called aws-dash, using the figwheel Leiningen template:

    $ lein new figwheel aws-dash

This gives us a starting point, but we should make sure that all of our versions match. Open up the project.clj file found in the root directory of the new project, and ensure that the dependencies section looks as follows:

... 
  :dependencies [[org.clojure/clojure "1.9.0"]
                 [org.clojure/clojurescript "1.10.238"]
                 [org.clojure/core.async "0.4.474"]
                 [org.omcljs/om "1.0.0-beta4"]
                 [cljs-http "0.1.45"]
                 [com.cognitect/transit-cljs "0.8.256"]] 
...

This is the first time that we have seen the last two dependencies. cljs-http is a simple HTTP library that we will use to make AJAX requests to our AWS stub server. transit-cljs allows us to, among other things, parse JSON responses into ClojureScript data structures.

Transit is a format and a set of libraries through which applications developed in different technologies can speak to each other. In this case, we are using the ClojureScript library to parse JSON, but if you're interested in learning more, I recommend reading the official blog post announcement by Rich Hickey^[2].

Next, we need RxJS, which, being a JavaScript dependency, isn't available via Leiningen. That's OK. We will simply download it from the Rx website. Go to https://unpkg.com/rxjs@6.3.3/bundles/rxjs.umd.min.js and save the file in aws-dash/resources/public/js/rx.js.

Moving on, we need to make our application aware of our new dependency on RxJS. Open the aws-dash/resources/public/index.html file and add a script tag to pull in RxJS, as follows:

<html>
  <head>
   <script src="js/rx.js" type="text/javascript"></script>
  </head>
  <body> 
    <div id="app"></div>  
    <script src="js/compiled/aws_dash.js"></script> 
  </body> 
</html>

With all of the dependencies in place, let's start the auto-compilation for our ClojureScript source files, as follows:

    $ lein figwheel