This document provides an overview of ClojureScript for JavaScript developers. It introduces ClojureScript and its similarities and differences compared to Clojure and JavaScript. Key points covered include ClojureScript's compilation to JavaScript, its support for immutable data, asynchronous programming using Core.async, and interoperability with JavaScript. Popular ClojureScript libraries and tools for development are also discussed. The document concludes by outlining reasons one might choose to use ClojureScript, such as its ability to target multiple platforms while sharing logic, its ecosystem, and community.

1. ClojureScript for JavaScript
Developers
Juho Teperi / Metosin
HelsinkiJS
26.5.2016

2. 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

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

4. 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

5. But Parentheses?
Source: xkcd.com/297/

6. 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

7. ClojureScript
● Clojure dialect
● Compiled to JavaScript
● GitHub statistics
○ 6034 stars, 136 contributors
○ Comparable to other compile
to JS langs

8. 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

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

10. Using JavaScript
First class interoperability
cljsfiddle.com/#gist=608eb29293dcc80d9b4145966b53fc49
(js/setTimeout
(fn [] (js/console.log "Hello World"))
1000)

11. Useful stuff

12. 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

13. How is The Development Experience?
Lets take a look at
https://github.com/Deraen/saapas

14. 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

15. 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

16. 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"]])

17. 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

18. Why should One Use ClojureScript?

19. Same Platform for Multiple Targets
● Backend - Clojure on JVM
● Web frontend - ClojureScript
● Mobile - ClojureScript with React Native

20. 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

21. 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

22. 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!

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

24. How to get started?
● github.com/clojure/clojurescript/wiki/Quick-
Start (Tool indepented basics)
● github.com/magomimmo/modern-cljs (includes
Boot tutorial)

25. 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

26. Thanks!
Questions?

27. 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

28. 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

29. Externs
Google Closure optimizations require extern files