ClojureScript { Clojure in the browser Tomasz Pewi´nski Programming Technologies Lecture Pozna´n,7 Jan 2016 Table of Contents Introduction Pros and Cons What is ClojureScript? Advantages of ClojureScript Rationale Disadvantages of Comparison ClojureScript Similarities to Clojure Reality check Differences with Clojure Technology adoption Usage How to begin? Compilation to JavaScript Example applications JavaScript interoperability Tooling and libraries Discussion Table of Contents Introduction Pros and Cons What is ClojureScript? Advantages of ClojureScript Rationale Disadvantages of Comparison ClojureScript Similarities to Clojure Reality check Differences with Clojure Technology adoption Usage How to begin? Compilation to JavaScript Example applications JavaScript interoperability Tooling and libraries Discussion What is ClojureScript? I It's a compiler I Compiles Clojure code to JavaScript code I Clojure in the browser and the server What is ClojureScript? I It's a compiler I Compiles Clojure code to JavaScript code I Clojure in the browser and the server What is ClojureScript? I It's a compiler I Compiles Clojure code to JavaScript code I Clojure in the browser and the server Short history 1 I Announced in 2011 by Rich Hickey, creator of Clojure I Latest version 1.7.170, Nov 5 2015 I Tooling, libraries, community 1 http://blip.tv/clojure/rich-hickey-unveils-clojurescript-5399498 Short history 1 I Announced in 2011 by Rich Hickey, creator of Clojure I Latest version 1.7.170, Nov 5 2015 I Tooling, libraries, community 1 http://blip.tv/clojure/rich-hickey-unveils-clojurescript-5399498 Short history 1 I Announced in 2011 by Rich Hickey, creator of Clojure I Latest version 1.7.170, Nov 5 2015 I Tooling, libraries, community 1 http://blip.tv/clojure/rich-hickey-unveils-clojurescript-5399498 Table of Contents Introduction Pros and Cons What is ClojureScript? Advantages of ClojureScript Rationale Disadvantages of Comparison ClojureScript Similarities to Clojure Reality check Differences with Clojure Technology adoption Usage How to begin? Compilation to JavaScript Example applications JavaScript interoperability Tooling and libraries Discussion Rationale I JavaScript runs everywhere I Client-side browser applications I JavaScript is fast I JavaScript may not be adequate I Clojure ecosystem Rationale I JavaScript runs everywhere I Client-side browser applications I JavaScript is fast I JavaScript may not be adequate I Clojure ecosystem Rationale I JavaScript runs everywhere I Client-side browser applications I JavaScript is fast I JavaScript may not be adequate I Clojure ecosystem Rationale I JavaScript runs everywhere I Client-side browser applications I JavaScript is fast I JavaScript may not be adequate I Clojure ecosystem Rationale I JavaScript runs everywhere I Client-side browser applications I JavaScript is fast I JavaScript may not be adequate I Clojure ecosystem Table of Contents Introduction Pros and Cons What is ClojureScript? Advantages of ClojureScript Rationale Disadvantages of Comparison ClojureScript Similarities to Clojure Reality check Differences with Clojure Technology adoption Usage How to begin? Compilation to JavaScript Example applications JavaScript interoperability Tooling and libraries Discussion Similarities to Clojure I Clojure semantics I Standard library Persistent collections, Seqs, Namespaces ... I Macros Similarities to Clojure I Clojure semantics I Standard library Persistent collections, Seqs, Namespaces ... I Macros Similarities to Clojure I Clojure semantics I Standard library Persistent collections, Seqs, Namespaces ... I Macros Table of Contents Introduction Pros and Cons What is ClojureScript? Advantages of ClojureScript Rationale Disadvantages of Comparison ClojureScript Similarities to Clojure Reality check Differences with Clojure Technology adoption Usage How to begin? Compilation to JavaScript Example applications JavaScript interoperability Tooling and libraries Discussion Differences with Clojure I Primitives implemented using JavaScript (= 0 0.0) ; => true I Support for concurency JavaScript VM runs single thread Atoms and core.async are available Differences with Clojure I Primitives implemented using JavaScript (= 0 0.0) ; => true I Support for concurency JavaScript VM runs single thread Atoms and core.async are available Table of Contents Introduction Pros and Cons What is ClojureScript? Advantages of ClojureScript Rationale Disadvantages of Comparison ClojureScript Similarities to Clojure Reality check Differences with Clojure Technology adoption Usage How to begin? Compilation to JavaScript Example applications JavaScript interoperability Tooling and libraries Discussion Compilation to JavaScript I .cljs file extension I Standalone compiler, commandline I leiningen plugins I Supports automatic recompilation Compilation to JavaScript I .cljs file extension I Standalone compiler, commandline I leiningen plugins I Supports automatic recompilation Compilation to JavaScript I .cljs file extension I Standalone compiler, commandline I leiningen plugins I Supports automatic recompilation Compilation to JavaScript I .cljs file extension I Standalone compiler, commandline I leiningen plugins I Supports automatic recompilation Compilation to JavaScript ClojureScript is meant to be used with Google Closure optimizer. I Hello World without optimizations: 1.9MB I Hello World with optimizations: 99KB I Dead code elimination Compilation to JavaScript ClojureScript is meant to be used with Google Closure optimizer. I Hello World without optimizations: 1.9MB I Hello World with optimizations: 99KB I Dead code elimination Compilation to JavaScript ClojureScript is meant to be used with Google Closure optimizer. I Hello World without optimizations: 1.9MB I Hello World with optimizations: 99KB I Dead code elimination Table of Contents Introduction Pros and Cons What is ClojureScript? Advantages of ClojureScript Rationale Disadvantages of Comparison ClojureScript Similarities to Clojure Reality check Differences with Clojure Technology adoption Usage How to begin? Compilation to JavaScript Example applications JavaScript interoperability Tooling and libraries Discussion JavaScript interoperability I use js/ syntax to call JavaScript functions e.g. js/alert, js/jQuery I ClojureScript collections are not exactly JS objects watch out when integrating with external libraries I Converter functions: js->clj, clj->js I Source maps JavaScript interoperability I use js/ syntax to call JavaScript functions e.g. js/alert, js/jQuery I ClojureScript collections are not exactly JS objects watch out when integrating with external libraries I Converter functions: js->clj, clj->js I Source maps JavaScript interoperability I use js/ syntax to call JavaScript functions e.g. js/alert, js/jQuery I ClojureScript collections are not exactly JS objects watch out when integrating with external libraries I Converter functions: js->clj, clj->js I Source maps JavaScript interoperability I use js/ syntax to call JavaScript functions e.g. js/alert, js/jQuery I ClojureScript collections are not exactly JS objects watch out when integrating with external libraries I Converter functions: js->clj, clj->js I Source maps Table of Contents Introduction Pros and Cons What is ClojureScript? Advantages of ClojureScript Rationale Disadvantages of Comparison ClojureScript Similarities to Clojure Reality check Differences with Clojure Technology adoption Usage How to begin? Compilation to JavaScript Example applications JavaScript interoperability Tooling and libraries Discussion Tooling and libraries I lein-cljsbuild I figwheel { live coding I domina { DOM manipulation I om { reactjs wrapper I schema { data validation I cljs.test { testing I many many more online https://github.com/clojure/clojurescript/wiki#libraries Tooling and libraries I lein-cljsbuild I figwheel { live coding I domina { DOM manipulation I om { reactjs wrapper I schema { data validation I cljs.test { testing I many many more online https://github.com/clojure/clojurescript/wiki#libraries Tooling and libraries I lein-cljsbuild I figwheel { live coding I domina { DOM manipulation I om { reactjs wrapper I schema { data validation I cljs.test { testing I many many more online https://github.com/clojure/clojurescript/wiki#libraries Tooling and libraries I lein-cljsbuild I figwheel { live coding I domina { DOM manipulation I om { reactjs wrapper I schema { data validation I cljs.test { testing I many many more online https://github.com/clojure/clojurescript/wiki#libraries Tooling and libraries I lein-cljsbuild I figwheel { live coding I domina { DOM manipulation I om { reactjs wrapper I schema { data validation I cljs.test { testing I many many more online https://github.com/clojure/clojurescript/wiki#libraries Tooling and libraries I lein-cljsbuild I figwheel { live coding I domina { DOM manipulation I om { reactjs wrapper I schema { data validation I cljs.test { testing I many many more online https://github.com/clojure/clojurescript/wiki#libraries Tooling and libraries I lein-cljsbuild I figwheel { live coding I domina { DOM manipulation I om { reactjs wrapper I schema { data validation I cljs.test { testing I many many more online https://github.com/clojure/clojurescript/wiki#libraries Table of Contents Introduction Pros and Cons What is ClojureScript? Advantages of ClojureScript Rationale Disadvantages of Comparison ClojureScript Similarities to Clojure Reality check Differences with Clojure Technology adoption Usage How to begin? Compilation to JavaScript Example applications JavaScript