ClojureScript for JavaScript Developers

Juho Teperi / Metosin

HelsinkiJS

26.5.2016

Who?

● Juho Teperi / Deraen○ Mongo, Express, AngularJS, Node.js...○ Grunt, Gulp○ 2.5 years Clojure, 1.5 years ClojureScript○ Open source contributor: Boot & tasks, Cljsjs...

● Metosin○ Founded 2012○ Around 11 people○ World headquarters at Tampere, southern Finland branch at Helsinki○ Consulting, Software development, Clojure training

Contents

● Basics● ….● Hot stuff● Cool stuff● …● Why should One Use ClojureScript?

Lisp

Old family of programming languages

List is a data-structure

(list is represented using parentheses)

Code is expressed as lists

Macros can modify the code

Allows extending language without changing the syntax

But Parentheses?

Source: xkcd.com/297/

Clojure

● A Lisp dialect for JVM○ Benefits from Java ecosystem

● Functional Programming○ Immutable data

● Concurrency - STM● Strongly typed, dynamic typing

○ Static typing as a library

clojure.org/about/rationale

ClojureScript

● Clojure dialect● Compiled to JavaScript● GitHub statistics

○ 6034 stars, 136 contributors○ Comparable to other compile

to JS langs

Immutable Data

● Immutable Data is built-in, used by all libraries

(def a {:a-map "This is a map"})

(def b (assoc a :map-is-like "an Object"))

(let [c ["a" "vector" "is" "like" "an" "array"]

d (map clojure.string/upper-case c))]

d) ;; => ("A" "VECTOR" ...)

;; Map is lazy and the result is only realized when needed

(reduce + 0 [1 2 3]) ;; => 6

Async Programming

(go

(let [response (<! (http/get "/url"))]

(if (http/success? response)

(do-something response)

(js/console.error response))))

Core.async provides “Go blocks”

Allows writing async code that looks like synchronous code

(It looks quite similar to ES7 Await)

Using JavaScript

First class interoperability

cljsfiddle.com/#gist=608eb29293dcc80d9b4145966b53fc49

(js/setTimeout

(fn [] (js/console.log "Hello World"))

1000)

Useful stuff

Build Tooling

Boot● Extended using tasks● Tasks are functions, using

middleware pattern● Tasks can be composed

Leiningen● Extended using plugins● Declarative configuration● Plugins don’t really compose

How is The Development Experience?

Lets take a look at

https://github.com/Deraen/saapas

What was that?

● Boot, boot-cljs, boot-reload etc.(inspired by Figwheel, a Leiningen plugin)

● Live reload without losing state● Browser REPL integrated with editor

Common Libraries

● Schema, declarative data description and validation● Core.async, Go style asynchronous programming● Om, React wrapper● Om.next, like ^ and Relay style declarative data

requirements● Reagent, React wrapper with FRP style features● Re-frame, Redux/Elm style architecture model and

implementation for Reagent (great documentation!)● EDN, extensible data notation (data format)● Transit, JSON based data format● Garden, Create CSS from Clojure datastructures

UI programming - Reagent

Global state: cljsfiddle.com/#gist=5aa5101e3f207595ce96a1e1276b0bcb

Local state in closure: cljsfiddle.com/#gist=8716f35f9eb042fe963d5ce9b0dca35b

(defonce beers (atom 0))

(defn beer-counter [{:keys [name]}]

[:div

[:h1 "Hello, " name]

[:p "You have drank " @beers " beers"]

[:button

{:on-click #(swap! beers inc)}

"Drink a beer"]])

Some Cool Stuff

● ClojureScript-in-ClojureScript: clojurescript.net● CLJS Fiddle: cljsfiddle.com ● Stand-alone OS X REPL using JSC: github.

com/mfikes/planck ● React Native: cljsrn.org

Why should One Use ClojureScript?

Same Platform for Multiple Targets

● Backend - Clojure on JVM● Web frontend - ClojureScript● Mobile - ClojureScript with React Native

Shared Logic

● Shared logic between the apps● For example, we often define the Domain

objects using Schema○ These are used to define backend endpoints○ Frontend form validation

Better Language Than JS?

● Less syntax -> Better syntax?● Very effective for data manipulation

○ Read data, manipulate, manipulate, …, write somewhere / show to user

○ Lodash / Immutable.js etc. built-in

Ecosystem

● The latest and greatest ideas from JavaScript will probably be available in ClojureScript

● Sometimes new ideas are developed at the same time for ClojureScript!

● Sometimes the features are available in ClojureScript first!

Community

● Active Slack community, 5500 6100 members● Google groups● /r/clojure● Multiple conferences in Europe

○ EuroClojure○ ClojuTRE, Sep 10th 2016○ ClojureX (London), ClojureD (Berlin), ClojureDays

(Amsterdam)...

How to get started?

● github.com/clojure/clojurescript/wiki/Quick-Start (Tool indepented basics)

● github.com/magomimmo/modern-cljs (includes Boot tutorial)

The Missing Parts

● Compile time errors are not as great as in Elm○ But provides more feedback than JS

● Static typing○ Core.typed, currently targets JVM first

Thanks!

Questions?

Sources & Further Material

● ClojureScript for Skeptics - Derek Slager, ClojureConj 2015: www.youtube.com/watch?v=gsffg5xxFQI

● ClojureScript: Lisp’s Revenge - David Nolen, GOTO 2014: www.youtube.com/watch?v=MTawgp3SKy8

Dependencies

● Piggiebacks Clojure and Java: packaged as JARs and deployed to Maven repositories○ Reliable, easy to reason about dependency tree○ Battle tested over 11 years (vs. NPM 6 years)

● Clojars: Easy Clojure community Maven repository with ○ Integrated to tooling○ Less restrictuve

Externs

Google Closure optimizations require extern files