Webbisauna - ClojureScript for Javascript Developers

ClojureScript for JavaScript developers

Juho Teperi / Metosin

Webbisauna

1.4.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● Questions / anwers● ….● Hot stuff● Cool stuff● …..● ….● ...

Clojure

● A Lisp dialect for JVM● Functional Programming

○ Immutable data● Concurrency - STM● Strongly typed, dynamic typing

○ Static typing as a library

http://clojure.org/about/rationale

But Parentheses?

Source: https://xkcd.com/297/

Lisp

Allows extending language without changing the syntax

Compare to ES7

ClojureScript

● Clojure dialect● Compiled to JavaScript● GitHub statistics

○ 5845 stars, 133 contributors○ Comparable to other compile

to JS langs

Is it useful?

Is the compiler slow?

NO

● Not lightning fast, but good enough definitely○ Improvements recently: fixes, parallel build○ Room for optimizations

● Incremental compilation

Is the resulting code large?

NO

● Google Closure Compiler optimized output (DCE, inlining…)● The result is small

Is the resulting code slow?

NO

● Usually the same● Immutable data offers benefits sometimes● http://numergent.com/2015-12/ClojureScript-performance-revisited.html

Is it production ready?

YES

● We ported our last AngularJS app to Cljs● CircleCI (https://circleci.com/blog/)

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

Dependencies

Yeah, I prefer to NPM.

Also

Using JavaScript

First class interoperability

http://cljsfiddle.com/#gist=608eb29293dcc80d9b4145966b53fc49

(js/setTimeout

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

1000)

Externs

Closure optimizations require extern files

How good development experience does ClojureScript have?

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

UI programming - Reagent

Global state: http://cljsfiddle.com/#gist=ff59b988ee1760e86ef314acaefd13d1

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

(def 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"]])

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

Some cool stuff

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

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

Community

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

○ EuroClojure○ ClojuTRE (announcements coming soon)○ ClojureX, ClojureD...

What is missing?

● Errors are not as great as in Elm○ Still provides more compile time feedback as JS

■ Missing arguments etc.● Typing?

Thanks!

Questions?

Sources & Further Material

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

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