Kata: Variation on Lights Out, introducing component library

Recently at a Clojure Barcelona Developers event, we had a refactoring session in which we introduced Stuart Sierra's component library in a code that was already done: our previous solution to the Lights out kata.

First, we put the code in charge of talking to the back end and updating the lights atom in a separated component, ApiLightsGateway:

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

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

Then, we did the same for the lights code which was put in the Lights component:

	(ns kata-lights-out.lights
	(:require
	[reagent.core :as r]
	[cljs.core.async :as async]
	[com.stuartsierra.component :as component]
	[kata-lights-out.lights-gateway :as lights-gateway])
	(:require-macros
	[cljs.core.async.macros :refer [go-loop]]))
	(def ^:private light-off 0)
	(defn light-off? [light]
	(= light light-off))
	(defn- listen-to-lights-updates! [{:keys [lights-channel lights]}]
	(go-loop []
	(when-let [new-lights (async/<! lights-channel)]
	(reset! lights new-lights)
	(recur))))
	(defprotocol LightsOperations
	(reset-lights! [this m n])
	(flip-light! [this pos]))
	(defrecord Lights [lights-gateway]
	component/Lifecycle
	(start [this]
	(println ";; Starting lights component")
	(let [this (assoc this
	:lights-channel (async/chan)
	:lights (r/atom []))
	lights-channel (:lights-channel this)
	lights-gateway (assoc lights-gateway
	:lights-channel lights-channel)
	this (assoc this :lights-gateway lights-gateway)]
	(listen-to-lights-updates! this)
	this))
	(stop [this]
	(println ";; Stopping lights component")
	(async/close! (:lights-channel this))
	this)
	LightsOperations
	(reset-lights! [this m n]
	(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 []
	(map->Lights {}))

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

This component provided a place to create and close the channel we used to communicate lights data between the Lights and the ApiLightsGateway components.

Next, we used the Lights component from the view code:

	(ns kata-lights-out.lights-view
	(:require
	[reagent.core :as r]
	[kata-lights-out.lights :as lights]))
	(def ^:private light-on "1")
	(def ^:private light-off "0")
	(defn- all-lights-off-message-content [lights]
	(if (lights/all-lights-off? lights)
	"Lights out, Yay!"
	{:style {:display :none}}))
	(defn- all-lights-off-message-component [lights]
	[:div#all-off-msg
	(all-lights-off-message-content lights)])
	(defn- on-light-click [lights-component pos]
	(lights/flip-light! lights-component pos))
	(defn- render-light [light]
	(if (lights/light-off? light)
	light-off
	light-on))
	(defn- light-component [lights-component i j light]
	^{:key (+ i j)}
	[:button
	{:on-click #(on-light-click lights-component [i j])} (render-light light)])
	(defn- row-lights-component [lights-component i row-lights]
	^{:key i}
	[:div (map-indexed (partial light-component lights-component i) row-lights)])
	(defn- home-page [lights-component]
	(fn []
	[:div [:h2 "Kata Lights Out"]
	(map-indexed (partial row-lights-component lights-component) @(:lights lights-component))
	[all-lights-off-message-component @(:lights lights-component)]]))
	(defn mount [lights-component]
	(r/render
	[home-page lights-component]
	(.getElementById js/document "app")))

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

And, finally, we put everything together in the lights core name space:

	(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!)
	;; -------------------------
	;; Initialize app
	(defrecord MainComponent [lights-component m n]
	component/Lifecycle
	(start [this]
	(println ";; Starting main component")
	(lights/reset-lights! lights-component m n)
	(lights-view/mount lights-component)
	this)
	(stop [this]
	(println ";; Stopping lights component")
	this))
	(defn main-component [m n]
	(map->MainComponent {:n n :m m}))
	(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)
	[:lights-gateway])
	:main (component/using
	(main-component m n)
	[:lights-component]))))
	(init! 3 3)

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

This was a nice practice to learn more about component and what it might take to introduce it in an existing code base.

You can find the code we produced in these two GitHub repositories: the server and the client (see the componentization branch).

You can check the changes we made to componentize the code here (see the commits made on Aug 30, 2016).

As usual it was a great pleasure to do mob programming and learn with the members of Clojure Developers Barcelona.