Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
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