Download to read offline
![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](https://image.slidesharecdn.com/2016-05-26helsinkijs-clojurescriptforjavascriptdevelopers-160526170740/85/HelsinkiJS-Clojurescript-for-Javascript-Developers-8-320.jpg)
![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)](https://image.slidesharecdn.com/2016-05-26helsinkijs-clojurescriptforjavascriptdevelopers-160526170740/85/HelsinkiJS-Clojurescript-for-Javascript-Developers-9-320.jpg)
![Using JavaScript
First class interoperability
cljsfiddle.com/#gist=608eb29293dcc80d9b4145966b53fc49
(js/setTimeout
(fn [] (js/console.log "Hello World"))
1000)](https://image.slidesharecdn.com/2016-05-26helsinkijs-clojurescriptforjavascriptdevelopers-160526170740/85/HelsinkiJS-Clojurescript-for-Javascript-Developers-10-320.jpg)
![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"]])](https://image.slidesharecdn.com/2016-05-26helsinkijs-clojurescriptforjavascriptdevelopers-160526170740/85/HelsinkiJS-Clojurescript-for-Javascript-Developers-16-320.jpg)
![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](https://image.slidesharecdn.com/2016-05-26helsinkijs-clojurescriptforjavascriptdevelopers-160526170740/75/HelsinkiJS-Clojurescript-for-Javascript-Developers-8-2048.jpg)
![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)](https://image.slidesharecdn.com/2016-05-26helsinkijs-clojurescriptforjavascriptdevelopers-160526170740/75/HelsinkiJS-Clojurescript-for-Javascript-Developers-9-2048.jpg)
![Using JavaScript
First class interoperability
cljsfiddle.com/#gist=608eb29293dcc80d9b4145966b53fc49
(js/setTimeout
(fn [] (js/console.log "Hello World"))
1000)](https://image.slidesharecdn.com/2016-05-26helsinkijs-clojurescriptforjavascriptdevelopers-160526170740/75/HelsinkiJS-Clojurescript-for-Javascript-Developers-10-2048.jpg)
![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"]])](https://image.slidesharecdn.com/2016-05-26helsinkijs-clojurescriptforjavascriptdevelopers-160526170740/75/HelsinkiJS-Clojurescript-for-Javascript-Developers-16-2048.jpg)
Uploaded byJuho Teperi
HelsinkiJS - Clojurescript for Javascript Developers
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.
More Related Content
![[JEEConf 2015] Lessons from Building a Modern B2C System in Scala](https://cdn.slidesharecdn.com/ss_thumbnails/yuriyguts-lessonsfrombuildingamodernb2csysteminscalav2-150526144611-lva1-app6892-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to HelsinkiJS - Clojurescript for Javascript Developers
HelsinkiJS - Clojurescript for Javascript Developers
- 1. ClojureScript for JavaScript Developers JuhoTeperi / 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 ofprogramming 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.
- 6. Clojure ● A Lispdialect 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 ● ImmutableData 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 classinteroperability cljsfiddle.com/#gist=608eb29293dcc80d9b4145966b53fc49 (js/setTimeout (fn [] (js/console.log "Hello World")) 1000)
- 11.
- 12. Build Tooling Boot ● Extendedusing 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 TheDevelopment 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 OneUse ClojureScript?
- 19. Same Platform forMultiple Targets ● Backend - Clojure on JVM ● Web frontend - ClojureScript ● Mobile - ClojureScript with React Native
- 20. Shared Logic ● Sharedlogic 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 ThanJS? ● 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 latestand 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 Slackcommunity, 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 getstarted? ● 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.
- 27. Sources & FurtherMaterial ● 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 Clojureand 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 optimizationsrequire extern files