Intro to ClojureScript (CLJS)ClojureScript? Why even?

@JulioBarrosConsultantE-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 = afoobar(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 = akitten_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 = akitten_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 meetupClojure.org and ClojureScript.orgClojure For the Brave and TrueClojure From The Ground UpModern-CLJSClojureScript Tutorial - Andrey AntukhClojureScript Unraveled

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

IDEs

Klipse and Try ClojureAtom (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.comE-String.com

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