Intro to ClojureScript (CLJS) ClojureScript? Why even? @JulioBarros - PowerPoint PPT Presentation

Intro to ClojureScript (CLJS) ClojureScript? Why even? @JulioBarros Consultant E-String.com @JulioBarros http:/ /E-String.com 1

What even is ClojureScript — Clojure (lisp) that targets JavaScript — Great interop with JS and Node (and JVM) — Runs in browsers, NodeJS, ReactNative, JavaScriptCore, etc. — ~6 years old @JulioBarros http:/ /E-String.com 2

Why ClojureScript — Simple — Functional — Immutable (data structures) — Data (value) oriented @JulioBarros http:/ /E-String.com 3

What makes languages different "Turing Completeness" "... any real-world general-purpose computer or computer language can approximately simulate the computational aspects of any other real-world general-purpose computer or computer language." -- Wikipedia @JulioBarros http:/ /E-String.com 4

Practical Differences — Syntax — Focus — Eco-system @JulioBarros http:/ /E-String.com 5

Focus What does a language/system: — Allow — Encourage — Enforce @JulioBarros http:/ /E-String.com 6

Allow "Any sufficiently complicated C or Fortran program contains an ad-hoc, informally-specified, bug-ridden, slow implementation of half of Common Lisp." -- Greenspun 's tenth rule @JulioBarros http:/ /E-String.com 7

Encourage OO and functional style @JulioBarros http:/ /E-String.com 8

Enforce Strong typing and weak typing @JulioBarros http:/ /E-String.com 9

Clojure(Script)'s Focus — Simple — Functional — Immutable (data structures) — Data (value) oriented @JulioBarros http:/ /E-String.com 10

Syntax "Parentheses are hugs for your code" @JulioBarros http:/ /E-String.com 11

How to ClojureScript Javascript myFun(x, y, z); ClojureScript (myFun x y z) @JulioBarros http:/ /E-String.com 12

Try out Klipse h ! p:/ /app.klipse.tech @JulioBarros http:/ /E-String.com 13

Lists (myFun 1 "a2") '(myFun 3 4) '(1 2 3) (def a1 '(1 2 3)) (def a2 '(1 2 3)) (= a1 a2) ;; true @JulioBarros http:/ /E-String.com 14

Vectors [a1 3.0 [1 2 3] #{1 2 3}] (let [a1 [1 2 3] a2 '(1 2 3)] (= a1 a2)) @JulioBarros http:/ /E-String.com 15

Maps { :a1 "this is double plus good" "a1" #inst "2017-07-13T16:09:33.490-00:00" + "plus adds numbers together" :plus + [1 2] '(4 5 6) } @JulioBarros http:/ /E-String.com 16

Maps { :a1 "this is double plus good", "a1" #inst "2017-07-13T16:09:33.490-00:00", + "plus adds numbers together",,,,, :plus +, [1 2] '(4 5 6), } @JulioBarros http:/ /E-String.com 17

Immutability An immutable object (data-structure) state (values) cannot be modified after it is created. @JulioBarros http:/ /E-String.com 18

With mutability @JulioBarros http:/ /E-String.com 19

With mutability a = [2 1 3] sort(a) // What is the value of a here? @JulioBarros http:/ /E-String.com 20

With mutability a = [2 1 3] foobar(a) sort(a) // What is the value of a here? @JulioBarros http:/ /E-String.com 21

With mutability a = [2 1 3] replace_id_by_photo_of_kitten_by_id(a) sort(a) // What is the value of a here? @JulioBarros http:/ /E-String.com 22

Ge ! ing anything done w/ immutability a = [2 1 3] c = a foobar(a) b = sort(a) a = reverse(sort(a)) @JulioBarros http:/ /E-String.com 23

Ge ! ing anything done w/ immutability a = [2 1 3] c = a kitten_photos = get_kittens_by_id(a) b = sort(a) a = reverse(sort(a)) @JulioBarros http:/ /E-String.com 24

Ge ! ing anything done w/ immutability a = [2 1 3] c = a kitten_photos = async_future(get_kittens_by_id(a)) b = async_future(sort(a)) a = async_future(reverse(sort(a))) @JulioBarros http:/ /E-String.com 25

Immutability Simplifies — reasoning in your programs — concurrency and parallelism — testing — functional programming @JulioBarros http:/ /E-String.com 26

Functional programming First class functions, function composition and — Pure functions ** Same input -> same ouput ** Does not rely on mutable state ** No side effects — Side effecting functions ** Necessary - minimize and control them @JulioBarros http:/ /E-String.com 27

Typical first cut update_customer get_customer if some crazy test modify customer in some crazy way save_customer @JulioBarros http:/ /E-String.com 28

Another approach business_logic if some crazy test return customer' modified in some crazy way update_customer get_customer business_logic save_customer @JulioBarros http:/ /E-String.com 29

Another approach business_logic: c if some crazy test c' = construct_new_values(c,'in some crazy way') return c' update_customer c = get_customer() updated_c = business_logic(c) save_customer(updated_c) @JulioBarros http:/ /E-String.com 30

Clojure & ClojureScript Eco-system The reach of - JavaScript - JVM @JulioBarros http:/ /E-String.com 31

Single Page Apps Reagent, Re-Frame, Figwheel (defn simple-component [] [:div [:p "I am a component!"] [:button {:on-click my-click-handler} "Push me"] [:p.someclass "I have some class"] [some-function]]) @JulioBarros http:/ /E-String.com 32

Node apps (Macchiato, Lumo, Planck) (ns hello-world.core (:require [cljs.nodejs :as nodejs])) (nodejs/enable-util-print!) (defn -main [& args] (println "Hello world!")) (set! *main-cli-fn* -main) @JulioBarros http:/ /E-String.com 33

React Native (Re-Natal) (def style #js {:flex 1 :textAlign "center"}) (def App (createClass #js {:render #(Text. #js {:style style} "Hello from Cljs")})) @JulioBarros http:/ /E-String.com 34

Serverless (cljs-lambda) (deflambda work-magic [{:keys [magic-word spell] :as input} ctx] (when (not= magic-word "hocus pocus") (throw (js/Error. "Your magic word is garbage"))) (if (= spell "echo-env") (ctx/environment ctx) (cast-async-spell input ctx))) @JulioBarros http:/ /E-String.com 35

Advanced Features — Core Async - concurency — Spec - type contracts — Google Closure Compiler - dead code elimination — Source maps — Multi-threaded, high concurrency JVM apps @JulioBarros http:/ /E-String.com 36

Summary Let's think beyond syntax. Explore immutability and functional programming. It will make you a better programmer. @JulioBarros http:/ /E-String.com 37

Resources Clojure-PDX meetup Clojure.org and ClojureScript.org Clojure For the Brave and True Clojure From The Ground Up Modern-CLJS ClojureScript Tutorial - Andrey Antukh ClojureScript Unraveled @JulioBarros http:/ /E-String.com 38

IDEs Klipse and Try Clojure Atom (with Proto-repl) Vim (Fireplace, Spacemacs) Emacs (Cider) Cursive, Nightcode, Nightlight and many more @JulioBarros http:/ /E-String.com 39

Thank you @JulioBarros Julio@E-String.com E-String.com @JulioBarros http:/ /E-String.com 40