ClojureScript: The Good Parts

ClojureScript The Good Parts

lagénorhynque カマイルカ /laʒenɔʁɛk ̃ / (defprofile lagénorhynque :name "Kent OHASHI" :languages [Clojure Haskell Python Scala English français Deutsch русский] :interests [programming language-learning mathematics] :contributing [github.com/japan-clojurians/clojure-site-ja])

• https://github.com/lagenorhynque

Lisp × JavaScript

What is ClojureScript?

ClojureScript (CLJS) compiler for Clojure that targets JavaScript cf. Clojure (JVM/Java), ClojureCLR (CLR/C#) simple and powerful functional Lisp

• https://github.com/clojure/clojurescript
• https://github.com/clojure/clojure
• https://github.com/clojure/clojure-clr

Use Cases SPA: Reagent/re-frame, Rum, Om, etc. React Native: re-natal Electron Node.js AWS Lambda etc.

• https://github.com/Day8/re-frame
• https://github.com/tonsky/rum
• https://github.com/omcljs/om
• https://github.com/reagent-project/reagent
• https://github.com/drapanjanas/re-natal

Try CLJS with Lumo
$ npm install -g lumo-cljs
$ lumo
cljs.user=> (defn hello [& {:keys [to]
#_=>
:or {to "world"}}]
#_=>
(println (str "Hello, " to "!")))
#'cljs.user/hello
cljs.user=> (hello)
Hello, world!
nil
cljs.user=> (hello :to "ClojureScript")
Hello, ClojureScript!
nil

• https://github.com/anmonteiro/lumo

Good Parts

Lisp

S-expressions (sexp) simple rule: (op arg ...) various kinds of functions macros special forms structural editing ParEdit, Parinfer, etc.

• http://danmidwood.com/content/2014/11/21/animated-paredit.html

Collection Literals
cljs.user=> '(1 2 3)
(1 2 3)

; list

cljs.user=> [1 2 3]
[1 2 3]

; vector

cljs.user=> #{1 2 3}
#{1 2 3}

; set

cljs.user=> {:a 1 :b 2 :c 3}
{:a 1, :b 2, :c 3}

; map

cf. function de nition
(defn hello [& {:keys [to]
:or {to "world"}}]
(println (str "Hello, " to "!")))

Lisp Macros compile-time metaprogramming code as data sexp -> sexp

e.g. for macro (sequence comprehension)
;; ClojureScript
cljs.user=> (for [x (range 10)
#_=>
:when (odd? x)]
#_=>
(* x x))
(1 9 25 49 81)
cljs.user=> (macroexpand-1
#_=> '(for [x (range 10)
#_=>
:when (odd? x)]
#_=>
(* x x)))
(cljs.core$macros/let
[iter__9116__auto__
(cljs.core$macros/fn
,,,
# Python
>>> [x ** 2 for x in range(10) if x % 2 != 0]
[1, 9, 25, 49, 81]
-- Haskell
> [x ^ 2 | x <- [0..9], odd x]
[1,9,25,49,81]

REPL-driven Development Create a ClojureScript project with Leiningen $ $ $ $ brew install leiningen lein new figwheel cljs-demo # e.g. "figwheel" template cd cljs-demo lein figwheel # or `cider-jack-in-clojurescript` on Emacs

• https://leiningen.org/

editor-integrated REPL (e.g. Emacs & CIDER)

• https://github.com/clojure-emacs/cider

browser REPL for front-end development

Changes are automatically loaded in the browser

Functional Programming

Immutable Persistent
Collections
no mutations, no side e ects
high performance
ljs.user=> (conj [1 2] 3)
[1 2 3]

; add an element to vector

cljs.user=> (conj '(1 2) 3)
(3 1 2)

; add an element to list

cljs.user=> (conj #{1 2} 3)
#{1 2 3}

; add an element to set

cljs.user=> (assoc {:a 1 :b 2} :c 3)
{:a 1, :b 2, :c 3}

; add an entry to map

Map and Sequence as Core Abstractions maps: get, assoc sequences: first, rest, cons lazy sequences rare to de ne something like classes or algebraic data types few data abstractions and many functions

e.g. maps for modelling entities
cljs.user=> (ns geometry.sphere)
nil
geometry.sphere=> (defn surface-area [{::keys [radius]}]
#_=>
(* 4 Math/PI (Math/pow radius 2)))
#'geometry.sphere/surface-area
geometry.sphere=> (defn volume [{::keys [radius]}]
#_=>
(* 4/3 Math/PI (Math/pow radius 3)))
#'geometry.sphere/volume
geometry.sphere=> #::{:radius 2}
#:geometry.sphere{:radius 2}
geometry.sphere=> (surface-area #::{:radius 2})
50.26548245743669
geometry.sphere=> (volume #::{:radius 2})
33.510321638291124

e.g. typical sequence manipulations cljs.user=> (defn leibniz [n-terms] #_=> (->> (iterate #(+ % 2) 1) #_=> (map / (cycle [1 -1])) #_=> (take n-terms) #_=> (apply +) #_=> (* 4.0))) #'cljs.user/leibniz cljs.user=> (leibniz 1000) 3.140592653839794 cljs.user=> (leibniz 10000) 3.1414926535900345 cljs.user=> (leibniz 100000) 3.1415826535897198

Data > Functions > Macros data-driven/oriented design examples libraries: Honey SQL, Hiccup, Reagent frameworks: Duct, Pedestal, re-frame

• https://github.com/weavejester/hiccup
• https://github.com/duct-framework/duct
• https://github.com/jkk/honeysql

clojure.spec speci cation system similar to Racket's contract system cf. gradual typing e.g. core.typed (Typed Clojure)

• https://clojure.org/guides/spec
• https://docs.racket-lang.org/guide/contracts.html
• https://github.com/clojure/core.typed

Common mistakes with maps ...
;; typo in key name
geometry.sphere=> (surface-area #::{:radias 2})
0
;; incorrect value type
geometry.sphere=> (volume #::{:radius "2"})
33.510321638291124

Introduce clojure.spec geometry.sphere=> (require '[cljs.spec.alpha :as s #_=> :include-macros true]) nil geometry.sphere=> (s/def ::radius (s/and number? pos?)) :geometry.sphere/radius geometry.sphere=> (s/def ::sphere (s/keys :req [::radius])) :geometry.sphere/sphere geometry.sphere=> (s/fdef surface-area #_=> :args (s/cat :sphere ::sphere) #_=> :ret number?) geometry.sphere/surface-area geometry.sphere=> (s/fdef volume #_=> :args (s/cat :sphere ::sphere) #_=> :ret number?) geometry.sphere/volume

Instrument specs geometry.sphere=> (require '[cljs.spec.test.alpha :as stest #_=> :include-macros true]) nil geometry.sphere=> (stest/instrument) [geometry.sphere/surface-area geometry.sphere/volume] ※ add test.check as a dependency (cf. CLJS-1792) # for example $ lumo -c src:~/.m2/repository/org/clojure/test.check-0.9.0.jar

• https://github.com/clojure/test.check
• https://dev.clojure.org/jira/browse/CLJS-1792

Spec-instrumented surface­area function
geometry.sphere=> (surface-area #::{:radius 2})
50.26548245743669
geometry.sphere=> (surface-area #::{:radias 2})
Call to #'geometry.sphere/surface-area did not conform to spec:
In: [0] val: #:geometry.sphere{:radias 2} fails
spec: :geometry.sphere/sphere
at: [:args :sphere]
predicate: (contains? % :geometry.sphere/radius)
:cljs.spec.alpha/spec #object[cljs.spec.alpha.t_cljs$spec$alpha
10508]
:cljs.spec.alpha/value (#:geometry.sphere{:radias 2})
:cljs.spec.alpha/args (#:geometry.sphere{:radias 2})
:cljs.spec.alpha/failure :instrument
,,,

Spec-instrumented volume function
geometry.sphere=> (volume #::{:radius 2})
33.510321638291124
geometry.sphere=> (volume #::{:radius "2"})
Call to #'geometry.sphere/volume did not conform to spec:
In: [0 :geometry.sphere/radius] val: "2" fails
spec: :geometry.sphere/radius
at: [:args :sphere :geometry.sphere/radius]
predicate: number?
:cljs.spec.alpha/spec #object[cljs.spec.alpha.t_cljs$spec$alpha
10508]
:cljs.spec.alpha/value (#:geometry.sphere{:radius "2"})
:cljs.spec.alpha/args (#:geometry.sphere{:radius "2"})
:cljs.spec.alpha/failure :instrument
,,,

Land of Lisp invades JS world!!

Further Reading

Clojure Clojure o cial site 日本語版 Clojureの世界と実際のWeb開発 Clojureの世界観 ClojureでREPL駆動開発を始めよう Spectacular Future with clojure.spec

• https://clojure.org/
• https://japan-clojurians.github.io/clojure-site-ja/
• https://www.slideshare.net/tsutomuyano/clojureweb
• http://boxofpapers.hatenablog.com/entry/2017/04/10/154333
• https://qiita.com/lagenorhynque/items/d68934546fa7283bad9d
• https://www.slideshare.net/KentOhashi/spectacular-future-with-clojurespec

ClojureScript ClojureScript o cial site

• https://clojurescript.org/

Reagent/re-frame Reagent Guide to Reagent re-frame Re-frame: The Guide to Building Blocks で 入門してみた ClojureScript/re-frame開発における思考フロー cf. Elm開発における思考フロー ClojureScript & Reagent React

• https://qiita.com/ababup1192/items/629585f8b2ae953a9b47
• https://github.com/reagent-project/reagent
• https://purelyfunctional.tv/guide/reagent/
• https://github.com/Day8/re-frame
• https://purelyfunctional.tv/guide/re-frame-building-blocks/
• https://qiita.com/lagenorhynque/items/7c049f3c3b967ee777ac
• https://qiita.com/lagenorhynque/items/3770e520bee0007e417c