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