Lighting talk o ClojureScript z ne-konference jOpenSpace 2016

1. ClojureScript
Jakub Kočí

2. Clojure(Script)
• 2007 - Clojure
• LISP , funkcionální, dynamický
• hostovaný (JVM, .NET, JS - ClojureScript)
• 2011 - ClojureScript
• Clojure kompilovaný do JavaScriptu
• Browser, NodeJS

3. Clojure(Script) - syntaxe
;; identifier
(def x 1)
;; => 2
;; functions
(+ 1 2 3)
;; => 6
;; function declaration
(defn sum [a b c]
(+ a b c))
;; function call
(sum 1 2 3)

4. Clojure(Script) - datové struktury
;; list
(1 2 3 4)
;; vector
[1 2 3 4]
;; map
{:a 1 :b 2 :c 3 :d 4}
;; set
#{1 2 3 :foo :bar}

5. JavaScripte, přede mnou se neschováš
;; constructor
(def date (js/Date. “2016-09-09"))
(def regexp (js/RegExp. "^foo$"))
;; method calls
(.log js/console "Hello, World!")
;; access properties
(.-name user)
(set! (.-name user) "John")

6. JavaScripte, přede mnou se neschováš
;; parsing between js objects/arrays and cljs maps/vectors
(def js-object (clj->js {:name "John" :age 20}))
;; => {name: "John", age: "20"}
(def json "{"name": "John", "age": "20"}")
(def cljs-map (js->clj (js/JSON.parse json)))
;; => {:name "John" :age "20"}
;; DOM manipulation
(def box (.getElementById js/document “box"))
(def title (.createElement js/document "span"))
(.appendChild box title)

7. Reagent + Re-frame jako React + Redux
(def initial-state {:records []
:record {}})
(register-sub :record-query
(fn [db _]
(reaction (:record @db))))
(defn record-form []
(let [record (subscribe [:record-query])]
[:div.record-form
[:input {:type "text"
:value (:title @record)}]
[:button {:type "button"
:on-click #(dispatch [:save-record])} "Save"]]))

8. Reagent + Re-frame jako React + Redux
(register-handler :save-record
(fn [db _]
(POST
(str backend-url "/records")
{:handler #(dispatch [:save-record-success %1])
:error-handler #(dispatch [:save-record-error %1])
:format :json})
db))
(register-handler :save-record-success
(fn [db [_ record]]
(assoc-in db [:records] (conj (:records db) (js->clj record)))))

9. Proč je to super?
• Google Closure Library + spousta Clojure funkcí
• Google Closure Compiler
• nepotřebujete HTML ani CSS
• Immutable data
• Figwheel
• Hot-reload

10. A když to nestačí…
• Material-UI, cljs-react-material-ui
• ClojureScript + Clojure + Datomic = super-full-stack
• React Native
• Om, Om Next, Rum, Quiescent, Omniscient, ale néé,
zase ta únava

11. Není všechno zlato co se třpití
• syntaxe a funkcionální přemýšlení
• málo zdrojů (oproti JS nesrovnatelně)
• "^{:key index}” a teď to zkus vygúglit
• chybové hlášky
• no je tam ta mezivrstva JavaScriptu

12. Stále jsem trochu skeptický…
ClojureScript for Skeptics - Derek Slager

13. Chci to vyzkoušet
• ClojureScript.io
• KLIPSE
• Figwheel

14. Díky za pozornost
jakub.koci@gmail.com
@jakubkoci
*Jo a taky nabíráme (iOS, web, backend - Scala, Java)
Dotaz na dotazy