Building a Reactive UI with ClojureScript

Slides for presentation/demo given at the StatusCode (nottingham.statuscode.com) event.

Transcript

1. CLOJURESCRIPT BUILDING A REACTIVE UI WITH By Kris Leech
2. WHAT IS CLOJURE? ‣ A DYNAMIC FUNCTIONAL LANGUAGE ‣ A DIALECT OF LISP ‣ HOSTED BY THE JVM ‣ INTEROPERABILITY WITH JAVA LIBRARIES ‣ CODE IS VALID DATA ‣ MACROS FOR METAPROGRAMMING ‣ DATA IS IMMUTABLE BY DEFAULT ‣ MUTATION IS EXPLICIT AND THREADSAFE ‣ DESIGNED FOR CONCURRENCY ‣ OPTIONAL TYPING ‣ TYPE AND VALUE BASED DISPATCH ‣ PREFER LIBRARIES OVER FRAMEWORKS https://clojure.org/about/rationale 2
3. WHAT IS CLOJURESCRIPT? ‣ A DYNAMIC FUNCTIONAL LANGUAGE ‣ A DIALECT OF LISP ‣ HOSTED BY THE JAVASCRIPT VM ‣ INTEROPERABILITY WITH JAVASCRIPT LIBRARIES ‣ CODE IS VALID DATA ‣ MACROS FOR METAPROGRAMMING ‣ DATA IS IMMUTABLE BY DEFAULT ‣ MUTATION IS EXPLICIT AND THREADSAFE ‣ DESIGNED FOR CONCURRENCY ‣ OPTIONAL TYPING ‣ TYPE AND VALUE BASED DISPATCH ‣ PREFER LIBRARIES OVER FRAMEWORKS 3 https://clojure.org/about/rationale
4. “SIMPLICITY IS THE ULTIMATE SOPHISTICATION.” Leonardo da Vinci
5. CLOJURE / CLOJURESCRIPT SYNTAX ; a comment ; a list (1 2 3) ; a vector [1 2 3] ; string "Hello World" ; a symbol :something-or-other ; a map { :event "StatusCode" city: "Nottingham" } 5
6. CLOJURE / CLOJURESCRIPT SYNTAX ; invoking a function (+ 1 2 3 4) ; assign a variable (def greeting "Hi") ; declare a function (defn say [message] (println message)) ; a higher order function (map inc (1 2 3)) (reduce + (1 2 3)) ; Java/Javascript interoperability (.log js/console "Hello World") 6
7. STARTING A NEW CLOJURESCRIPT PROJECT $ brew install leiningen $ lein new figwheel statuscode $ cd statuscode $ lein figwheel $ open http://localhost:3449 http://leiningen.org/ https://github.com/bhauman/lein-figwheel 7
8. PROJECT LAYOUT README.md project.clj /src/statuscode/core.cljs /resources/public/index.html /resources/public/js/ /resources/public/css/
9. OUR FIRST COMPONENT (ns statuscode.core (:require [reagent.core :as reagent])) (defn hello-world [] [:div "Hello World"]) (reagent/render-component [hello-world] (.getElementById js/document "app")) https://reagent-project.github.io/ 9
10. OUR FIRST COMPONENT (defn hello-world [] [:div "Hello World"]) define
 function list name vector of
 arguments
 (input) element content (Hiccup) vector
 (output) 10
11. HICCUP [:div "Hello World"] [:div { :class "label" } "Hello World"] [:div.label "Hello World"] [:div { :class "label" id: "title" } "Hello World"] [:div#title.label "Hello World"] [:ul#todo-list [:li.todo-item "Buy some milk"] [:li.todo-item "Feed the kids"] [:li.todo-item "Walk the dogs"]] https://github.com/teropa/hiccups
12. GETTING REACTIVE (def db (reagent/atom { :name "Jim Bob" })) (defn hello-world [] [:div "Hello, " (:name @db)]) 12
13. ADDING EVENTS (defn handle-click [event] (println ”Clicked”)) (defn clicker [] [:button { :on-click (handle-click) } "Click me!”]) 13
14. A CLICKER COMPONENT (def db (reagent/atom { :count 0 })) (defn handle-click [event] (swap! db assoc :count inc)) (defn counter [] [:div "You have clicked" (:count @db) " times." [:button { :on-click handle-click } "Increment"]])
15. BOOTSTRAP - PROGRESSBAR 15
16. BOOTSTRAP - BUTTONS
17. DATA GRID Compose components from smaller components.
18. DIFFICULTIES FOR US ‣ BUY IN FROM THE TEAM ‣ THE SYNTAX WAS FAIRLY EASY TO LEAN ‣ THE SEMANTICS TOOK LONGER ‣ OBJECT TO DATA MINDSET ‣ STATE AND BEHAVIOUR ARE SEPARATED ‣ READING OTHERS CODE… ‣ DEBUGGING… ‣ IGNORE TESTING TO START WITH ‣ SWITCHING FROM VIM TO EMACS ‣ START SMALL, EVERYONE WRITE SOME PRODUCTION CODE 18
19. LEARNING Try Clojurescript online
 https://himera.herokuapp.com/index.html Try some puzzles
 https://www.4clojure.com/ Buy a Book
 http://www.braveclojure.com/ Watch Rich Hickey talks
 https://changelog.com/rich-hickeys-greatest-hits/ Sign up to Clojure weekly
 http://reborg.tumblr.com/
 http://www.clojuregazette.com/ Cheatsheet
 http://cljs.info/cheatsheet/
20. WHY USE CLOJURESCRIPT? ‣ deployment is very easy (e.g. S3) ‣ no backend required ‣ components are just functions ‣ and so are event handlers ‣ they are composable and reusable ‣ no Javascript idiosyncrasies ‣ encourages experimentation ‣ simple made easy 20 https://www.infoq.com/presentations/Simple-Made-Easy
21. THANKS. teamcoding.com @krisleech