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

▶

Aug 14, 2023 175 likes •579 views

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

SLIDE 1

Intro to ClojureScript (CLJS)

ClojureScript? Why even?

@JulioBarros Consultant E-String.com

@JulioBarros http:/ /E-String.com 1

SLIDE 2

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

SLIDE 3

Why ClojureScript — Simple — Functional — Immutable (data structures) — Data (value) oriented

@JulioBarros http:/ /E-String.com 3

SLIDE 4

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

SLIDE 5

Practical Differences — Syntax — Focus — Eco-system

@JulioBarros http:/ /E-String.com 5

SLIDE 6

Focus What does a language/system: — Allow — Encourage — Enforce

@JulioBarros http:/ /E-String.com 6

SLIDE 7

Allow "Any sufficiently complicated C or Fortran program contains an ad-hoc, informally-specified, bug-ridden, slow implementation

f half of Common Lisp." -- Greenspun's tenth rule

@JulioBarros http:/ /E-String.com 7

SLIDE 8

Encourage OO and functional style

@JulioBarros http:/ /E-String.com 8

SLIDE 9

Enforce Strong typing and weak typing

@JulioBarros http:/ /E-String.com 9

SLIDE 10

Clojure(Script)'s Focus — Simple — Functional — Immutable (data structures) — Data (value) oriented

@JulioBarros http:/ /E-String.com 10

SLIDE 11

Syntax "Parentheses are hugs for your code"

@JulioBarros http:/ /E-String.com 11

SLIDE 12

How to ClojureScript Javascript

myFun(x, y, z);

ClojureScript

(myFun x y z)

@JulioBarros http:/ /E-String.com 12

SLIDE 13

Try out Klipse h!p:/ /app.klipse.tech

@JulioBarros http:/ /E-String.com 13

SLIDE 14

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

SLIDE 15

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

SLIDE 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 16

SLIDE 17

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

SLIDE 18

Immutability An immutable object (data-structure) state (values) cannot be modified after it is created.

@JulioBarros http:/ /E-String.com 18

SLIDE 19

With mutability

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

SLIDE 20

With mutability

a = [2 1 3] sort(a) // What is the value of a here?

@JulioBarros http:/ /E-String.com 20

SLIDE 21

With mutability

a = [2 1 3] foobar(a) sort(a) // What is the value of a here?

@JulioBarros http:/ /E-String.com 21

SLIDE 22

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

SLIDE 23

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

SLIDE 24

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

SLIDE 25

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

SLIDE 26

Immutability Simplifies — reasoning in your programs — concurrency and parallelism — testing — functional programming

@JulioBarros http:/ /E-String.com 26

SLIDE 27

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

SLIDE 28

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

SLIDE 29

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

SLIDE 30

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

SLIDE 31

Clojure & ClojureScript Eco-system The reach of

JavaScript
JVM

@JulioBarros http:/ /E-String.com 31

SLIDE 32

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

SLIDE 33

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

SLIDE 34

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

SLIDE 35

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

SLIDE 36

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

SLIDE 37

Summary Let's think beyond syntax. Explore immutability and functional programming. It will make you a better programmer.

@JulioBarros http:/ /E-String.com 37

SLIDE 38

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

SLIDE 39

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

SLIDE 40

Thank you @JulioBarros Julio@E-String.com E-String.com

@JulioBarros http:/ /E-String.com 40

Intro to ClojureScript (CLJS)

ClojureScript? Why even?

@JulioBarros Consultant E-String.com

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

Why ClojureScript — Simple — Functional — Immutable (data structures) — Data (value) oriented

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

Practical Differences — Syntax — Focus — Eco-system

Focus What does a language/system: — Allow — Encourage — Enforce

Allow "Any sufficiently complicated C or Fortran program contains an ad-hoc, informally-specified, bug-ridden, slow implementation

Encourage OO and functional style

Enforce Strong typing and weak typing

Clojure(Script)'s Focus — Simple — Functional — Immutable (data structures) — Data (value) oriented

Syntax "Parentheses are hugs for your code"

How to ClojureScript Javascript

myFun(x, y, z);

ClojureScript

(myFun x y z)

Try out Klipse h!p:/ /app.klipse.tech

Lists

(myFun 1 "a2") '(myFun 3 4) '(1 2 3) (def a1 '(1 2 3)) (def a2 '(1 2 3)) (= a1 a2) ;; true

Vectors

[a1 3.0 [1 2 3] #{1 2 3}] (let [a1 [1 2 3] a2 '(1 2 3)] (= a1 a2))

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) }

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), }

Immutability An immutable object (data-structure) state (values) cannot be modified after it is created.

With mutability

With mutability

a = [2 1 3] sort(a) // What is the value of a here?

With mutability

a = [2 1 3] foobar(a) sort(a) // What is the value of a here?

With mutability

a = [2 1 3] replace_id_by_photo_of_kitten_by_id(a) sort(a) // What is the value of a here?

Ge!ing anything done w/ immutability

a = [2 1 3] c = a foobar(a) b = sort(a) a = reverse(sort(a))

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))

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)))

Immutability Simplifies — reasoning in your programs — concurrency and parallelism — testing — functional programming

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

Typical first cut

update_customer get_customer if some crazy test modify customer in some crazy way save_customer

Another approach

business_logic if some crazy test return customer' modified in some crazy way update_customer get_customer business_logic save_customer

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)

Clojure & ClojureScript Eco-system The reach of

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]])

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)

React Native (Re-Natal)

(def style #js {:flex 1 :textAlign "center"}) (def App (createClass #js {:render #(Text. #js {:style style} "Hello from Cljs")}))

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)))

Advanced Features — Core Async - concurency — Spec - type contracts — Google Closure Compiler - dead code elimination — Source maps — Multi-threaded, high concurrency JVM apps

Summary Let's think beyond syntax. Explore immutability and functional programming. It will make you a better programmer.

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

IDEs Klipse and Try Clojure Atom (with Proto-repl) Vim (Fireplace, Spacemacs) Emacs (Cider) Cursive, Nightcode, Nightlight and many more

Thank you @JulioBarros Julio@E-String.com E-String.com

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

(ns hello-world.core (:require [cljs.nodejs :as nodejs])) (nodejs/enable-util-print!) (defn -main [& args] (println "Hello world!")) (set! main-cli-fn -main)