webbisauna - clojurescript for javascript developers
TRANSCRIPT
![Page 1: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/1.jpg)
ClojureScript for JavaScript developers
Juho Teperi / Metosin
Webbisauna
1.4.2016
![Page 2: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/2.jpg)
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
![Page 3: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/3.jpg)
Contents
● Basics● Questions / anwers● ….● Hot stuff● Cool stuff● …..● ….● ...
![Page 4: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/4.jpg)
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
![Page 6: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/6.jpg)
Lisp
Allows extending language without changing the syntax
Compare to ES7
![Page 7: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/7.jpg)
ClojureScript
● Clojure dialect● Compiled to JavaScript● GitHub statistics
○ 5845 stars, 133 contributors○ Comparable to other compile
to JS langs
![Page 8: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/8.jpg)
Is it useful?
![Page 9: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/9.jpg)
Is the compiler slow?
NO
● Not lightning fast, but good enough definitely○ Improvements recently: fixes, parallel build○ Room for optimizations
● Incremental compilation
![Page 10: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/10.jpg)
Is the resulting code large?
NO
● Google Closure Compiler optimized output (DCE, inlining…)● The result is small
![Page 11: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/11.jpg)
Is the resulting code slow?
NO
● Usually the same● Immutable data offers benefits sometimes● http://numergent.com/2015-12/ClojureScript-performance-revisited.html
![Page 12: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/12.jpg)
Is it production ready?
YES
● We ported our last AngularJS app to Cljs● CircleCI (https://circleci.com/blog/)
![Page 13: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/13.jpg)
Useful stuff
![Page 14: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/14.jpg)
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
![Page 15: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/15.jpg)
Dependencies
Yeah, I prefer to NPM.
Also
![Page 16: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/16.jpg)
Using JavaScript
First class interoperability
http://cljsfiddle.com/#gist=608eb29293dcc80d9b4145966b53fc49
(js/setTimeout
(fn [] (js/console.log "Hello World"))
1000)
![Page 17: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/17.jpg)
Externs
Closure optimizations require extern files
![Page 18: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/18.jpg)
How good development experience does ClojureScript have?
Lets take a look at
https://github.com/Deraen/saapas
![Page 19: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/19.jpg)
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
![Page 20: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/20.jpg)
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"]])
![Page 21: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/21.jpg)
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
![Page 22: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/22.jpg)
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/
![Page 23: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/23.jpg)
Community
● Active Slack community, 5500 members● Google groups● /r/clojure● Multiple conferences in Europe
○ EuroClojure○ ClojuTRE (announcements coming soon)○ ClojureX, ClojureD...
![Page 24: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/24.jpg)
What is missing?
● Errors are not as great as in Elm○ Still provides more compile time feedback as JS
■ Missing arguments etc.● Typing?
![Page 25: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/25.jpg)
Thanks!
Questions?
![Page 26: Webbisauna - ClojureScript for Javascript Developers](https://reader034.vdocuments.us/reader034/viewer/2022051520/58f0db141a28ab8f788b45e9/html5/thumbnails/26.jpg)
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