Kata: Variation on Lights Out, a bit of FRP using reagi library

To finish with the series of exercises we've been doing lately around the Lights Out kata, I decided to use reagi library to raise the level of abstraction of the communications between the Lights and the LightsGateway components.

reagi is an FRP library for Clojure and ClojureScript which is built on top of core.async. I discovered it while reading Leonardo Borges' wonderful Clojure Reactive Programming book.

I started from the code of the version using the component library I posted recently about and introduced reagi. Let's see the code.

Let's start with the lights-gateway name space:

	(ns kata-lights-out.lights-gateway
	(:require
	[cljs-http.client :as http]
	[com.stuartsierra.component :as component]
	[reagi.core :as reagi]
	[cljs.core.async :as async])
	(:require-macros
	[cljs.core.async.macros :refer [go]]))
	(defn- extract-lights [response]
	(->> response
	:body
	(.parse js/JSON)
	.-lights
	js->clj))
	(defn- post [lights-stream uri params]
	(go
	(when-let [response (async/<!
	(http/post uri
	{:with-credentials? false
	:form-params params}))]
	(reagi/deliver lights-stream
	(extract-lights response)))))
	(defprotocol LightsGateway
	(reset-lights! [this m n])
	(flip-light! [this pos]))
	(defrecord ApiLightsGateway [config]
	component/Lifecycle
	(start [this]
	(println ";; Starting ApiLightsGateway component")
	(assoc this :lights-stream (reagi/events)))
	(stop [this]
	(println ";; Stopping ApiLightsGateway component")
	(reagi/dispose (:lights-stream this))
	this)
	LightsGateway
	(reset-lights! [this m n]
	(post (:lights-stream this)
	(:reset-lights-url config)
	{:m m :n n}))
	(flip-light! [this [x y]]
	(post (:lights-stream this)
	(:flip-light-url config)
	{:x x :y y})))
	(defn make-api-gateway [config]
	(->ApiLightsGateway config))

view raw reactive-kata-lights-out-lights_gateway.cljs hosted with ❤ by GitHub

The main change here is that the ApiLightsGateway component keeps a lights-stream which it's initialized in its start function and disposed of in its stop function using reagi.

I also use, reagi's deliver function to feed the lights-stream with the response that is taken from the channel that cljs-http returns when we make a post request to the server.

Next,the lights name space:

	(ns kata-lights-out.lights
	(:require
	[reagent.core :as r]
	[com.stuartsierra.component :as component]
	[kata-lights-out.lights-gateway :as lights-gateway]
	[reagi.core :as reagi]))
	(def ^:private light-off 0)
	(defn light-off? [light]
	(= light light-off))
	(defn- listen-to-lights-updates! [{:keys [lights-stream lights]}]
	(->> lights-stream
	(reagi/map #(reset! lights %))))
	(defprotocol LightsOperations
	(reset-lights! [this])
	(flip-light! [this pos]))
	(defrecord Lights [lights-gateway m n]
	component/Lifecycle
	(start [this]
	(println ";; Starting lights component")
	(let [this (assoc this
	:lights-stream (:lights-stream lights-gateway)
	:lights (r/atom []))
	this (assoc this :lights-gateway lights-gateway)]
	(listen-to-lights-updates! this)
	(reset-lights! this)
	this))
	(stop [this]
	(println ";; Stopping lights component")
	this)
	LightsOperations
	(reset-lights! [this]
	(lights-gateway/reset-lights! (:lights-gateway this) m n))
	(flip-light! [this pos]
	(lights-gateway/flip-light! (:lights-gateway this) pos)))
	(defn all-lights-off? [lights]
	(every? light-off? (flatten lights)))
	(defn make-lights [m n]
	(map->Lights {:m m :n n}))

view raw reactive-kata-lights-out-lights.cljs hosted with ❤ by GitHub

Notice how the dependency on core.async disappears and the code to update the lights atom is now a subscription to the lights-stream (look inside the listen-to-lights-updates! function). This new code is much easier to read and is at a higher level of abstraction than the one using core.async in previous versions of the exercise.

Now the lights-view name space:

	(ns kata-lights-out.lights-view
	(:require
	[reagent.core :as r]
	[kata-lights-out.lights :as lights]
	[reagi.core :as reagi]
	[com.stuartsierra.component :as component]))
	(defn- all-lights-off-message-content [config lights]
	(if (lights/all-lights-off? lights)
	(:success-message config)
	{:style {:display :none}}))
	(defn- all-lights-off-message-component [config lights]
	[:div#all-off-msg
	(all-lights-off-message-content config lights)])
	(defn- render-light [{:keys [light-on light-off]} light]
	(if (lights/light-off? light)
	light-off
	light-on))
	(defn- light-component [config clicked-light-positions i j light]
	^{:key (+ i j)}
	[:button
	{:on-click #(reagi/deliver clicked-light-positions [i j])}
	(render-light config light)])
	(defn- row-lights-component [config clicked-light-positions i row-lights]
	^{:key i}
	[:div (map-indexed (partial light-component config clicked-light-positions i) row-lights)])
	(defn- home-page [config clicked-light-positions lights-component]
	(fn []
	(let [lights (:lights lights-component)]
	[:div [:h2 (:title config)]
	(map-indexed (partial row-lights-component config clicked-light-positions) @lights)
	[all-lights-off-message-component config @lights]])))
	(defn- flip-light-when-clicked [lights-component clicked-light-positions]
	(->> clicked-light-positions
	(reagi/map #(lights/flip-light! lights-component %))))
	(defprotocol View
	(mount [this]))
	(defrecord LightsView [lights-component config]
	component/Lifecycle
	(start [this]
	(println ";; Starting LightsOutView component")
	(let [this (assoc this :clicked-light-positions (reagi/events))]
	(mount this)
	this))
	(stop [this]
	(println ";; Stopping LightsOutView component")
	(reagi/dispose (:clicked-light-positions this))
	this)
	View
	(mount [{:keys [clicked-light-positions]}]
	(flip-light-when-clicked
	lights-component clicked-light-positions)
	(r/render
	[home-page config clicked-light-positions lights-component]
	(.getElementById js/document "app"))))
	(defn make [config]
	(map->LightsView {:config config}))

view raw reactive-kata-lights-out-lights_view.cljs hosted with ❤ by GitHub

Here I also used reagi to create a stream of clicked-light-positions. Again the use of FRP makes the handling of clicks much simpler (in previous versions a callback was being used to do the same).

Another change to notice is that we made the view a component (LightsView component) in order to properly create and dispose of the clicked-light-positions stream.

Finally, this is the core name space where all the components are composed together:

	(ns kata-lights-out.core
	(:require
	[kata-lights-out.lights-view :as lights-view]
	[com.stuartsierra.component :as component]
	[kata-lights-out.lights :as lights]
	[kata-lights-out.lights-gateway :as lights-gateway]))
	(enable-console-print!)
	(defn init! [m n]
	(component/start
	(component/system-map
	:lights-gateway (lights-gateway/make-api-gateway
	{:reset-lights-url "http://localhost:3000/reset-lights"
	:flip-light-url "http://localhost:3000/flip-light"})
	:lights-component (component/using
	(lights/make-lights m n)
	[:lights-gateway])
	:lights-view (component/using
	(lights-view/make
	{:success-message "Lights out, Yay!"
	:light-on "1"
	:light-off "0"
	:title "Kata Lights Out"})
	[:lights-component]))))
	(init! 3 3)

view raw reactive-kata-lights-out-core.cljs hosted with ❤ by GitHub

This was a nice practice to learn more about doing FRP with reagi. I really like the separation of concerns and clarity that FRP brings with it.

You can find my code in these two GitHub repositories: the server and the client (see the master branch).

You can check the changes I made to use reagi here (see the commits made from the commit d51d2d4 (using a stream to update the lights) on).

Ok, that's all, next I'll start posting a bit about re-frame.