update highlighting

parent 80831d86
Pipeline #41579674 passed with stages
in 22 seconds
......@@ -49,28 +49,28 @@ Here's what a tree in that directory reveals:
Everything we care about for now is in app.cljs. So let's take a look:
(ns escherize-cljs.app
(:require [reagent.core :as reagent
:refer [atom]]))
(defn some-component []
[:div
[:h3 "I am a component!"]
[:p.someclass
"I have " [:strong "bold"]
[:span {:style {:color "red"}} " and red"]
" text."]])
(defn calling-component []
[:div "Parent component"
[some-component]])
(defn init []
(reagent/render-component
[calling-component]
(.getElementById js/document "container")))
{{< highlight clojure >}}
(ns escherize-cljs.app
(:require [reagent.core :as reagent
:refer [atom]]))
(defn some-component []
[:div
[:h3 "I am a component!"]
[:p.someclass
"I have " [:strong "bold"]
[:span {:style {:color "red"}} " and red"]
" text."]])
(defn calling-component []
[:div "Parent component"
[some-component]])
(defn init []
(reagent/render-component
[calling-component]
(.getElementById js/document "container")))
{{< / highlight >}}
Ahh, at last some beautiful [Hiccup](http://hiccup.space) flavored [Reagent](https://reagent-project.github.io/). You might be able to guess what kind of html that will output. Notice that we're using `calling-component` to generate a data structure that our app (and `Reagent`) will turn into React.js components.
......@@ -86,21 +86,21 @@ Feel free to right-click -> Inspect Element to see the html's source. But the se
To try it out, let's change some code in `some-component`.
(defn some-component []
[:div
[:h3 "I am a component!"]
;;; \/ \/ \/ Attention - Add this
[:img {:src "http://45.media.tumblr.com/aa7e769f34261486bfb0e371d88268ee/tumblr_nghxngNY741rrx588o1_250.gif"}]
[:h3 "I am a super hero!"]
;;; /\ /\ /\ Attention - Add this
[:p.someclass
"I have " [:strong "bold"]
[:span {:style {:color "red"}} " and red"]
" text."]])
{{< highlight clojure >}}
(defn some-component []
[:div
[:h3 "I am a component!"]
;; vvvvvv add this vvvvvv
[:img {:src "http://45.media.tumblr.com/aa7e769f34261486bfb0e371d88268ee/tumblr_nghxngNY741rrx588o1_250.gif"}]
[:h3 "I am a super hero!"]
;; ^^^^^^ add this ^^^^^^
[:p.someclass
"I have " [:strong "bold"]
[:span {:style {:color "red"}} " and red"]
" text."]])
{{< / highlight >}}
You'll hear **DING**, (or **BUZZ** if you typed something wrong), and your page will update automatically! Like OMG!
......
......@@ -18,14 +18,19 @@ In this installment of the <span class="underline">Side Effects Aren't Legos</sp
Here's a simple example, to show why you should try to separate side effects from pure data transformations.
How do you test this code?
Check it out:
#### `Sample A:`
``` clojure
;; Sample A
(defn my-print [s path] (spit path (str "I was given: " s)))
```
{{< highlight clojure >}}
(defn my-print [s path]
(spit path (str "I was given: " s)))
{{< / highlight >}}
Notice that the data transformations our program makes are typically the tricky bits that we want to test. So here, we would want to check that "I was given: " is correctly appended to s.
`Sample A` defines a function called `my-print`, which takes a string `s`, and a file `path`, and writes `s` with `"I was given: "` prepended to it onto the file at `path`.
How would you test it?
In the real world,the data transformations our program makes are typically the tricky bits that we want to test. So here, we would want to check that "I was given: " is correctly appended to s.
## How to test it:
......@@ -49,50 +54,54 @@ Instead, let's snap together 2 functions to handle this.
Compare `Sample A` with:
(defn my-transform [s] (str "I was given: " s))
{{< highlight clojure >}}
(defn my-transform [s] (str "I was given: " s))
(defn my-print [s path] (spit path s))
(defn my-print [s path] (spit path s))
{{< / highlight >}}
1. Call `my-transform` on a string (say "abc")
2. Test the return value is "I was given: "abc"
Now, just test that my-transform works!
(deftest my-transform-test
(is (= "I printed: abc" (my-transform "abc"))))
{{< highlight clojure >}}
(deftest my-transform-test
(is (= "I printed: abc" (my-transform "abc"))))
{{< / highlight >}}
Note that when testing my-transform we are free to use a string generator, without adding too much "thought overhead".
(defn generate-string []
(->> "abcdef" shuffle (apply str)))
;; can be run once with a generated string:
(deftest one-my-transform-test
(let [a-string (generate-string)]
(is (= (str "I was given: " a-string)
(my-transform a-string)))))
{{< highlight clojure >}}
(defn generate-string []
(->> "abcdef" shuffle (apply str)))
;; or a thousand times
(deftest one-thousand-my-transform-test
(let [strings (repeatedly 1000 generate-string)]
(doseq [s strings]
(is (= (my-transform s)
(str "I was given: " s))))))
;; can be run once with a generated string:
(deftest one-my-transform-test
(let [a-string (generate-string)]
(is (= (str "I was given: " a-string)
(my-transform a-string)))))
;; or a thousand times
(deftest one-thousand-my-transform-test
(let [strings (repeatedly 1000 generate-string)]
(doseq [s strings]
(is (= (my-transform s)
(str "I was given: " s))))))
{{< / highlight >}}
## Extra Credit
Even better is to make my-print take a function to apply on s. Then we can pass in any pure function, and have the side-effect separated by design.
(defn my-print [s path & [f]]
(let [f (or f identity)]
(spit path (f s))))
{{< highlight clojure >}}
(defn my-print [s path & [f]]
(let [f (or f identity)]
(spit path (f s))))
{{< / highlight >}}
## Conclusion
Try to avoid mixing side effecting code into the beautiful world of data driven development!
Avoid mixing side effecting code into the beautiful world of data driven development!
## Footnotes
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment