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 interoperability Tooling and libraries Discussion Advantages of ClojureScript

I All the benefits of Clojure itself

I Clojure’s ecosystem

I Single language for the front-end and back-end Advantages of ClojureScript

I All the benefits of Clojure itself

I Clojure’s ecosystem

I Single language for the front-end and back-end Advantages of ClojureScript

I All the benefits of Clojure itself

I Clojure’s ecosystem

I Single language for the front-end and back-end 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 Disadvantages of ClojureScript

I Inaccessible Java/JVM interop (recently introduced reader conditionals address it)

I Awkward interoperability with JavaScript libraries (partially mitigated by CLJSJS) Disadvantages of ClojureScript

I Inaccessible Java/JVM interop (recently introduced reader conditionals address it)

I Awkward interoperability with JavaScript libraries (partially mitigated by CLJSJS) 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 Technology adoption

I Mature project, used in production

I Actively supported

I https://github.com/clojure/clojurescript/wiki/ Companies-Using-ClojureScript Technology adoption

I Mature project, used in production

I Actively supported

I https://github.com/clojure/clojurescript/wiki/ Companies-Using-ClojureScript Technology adoption

I Mature project, used in production

I Actively supported

I https://github.com/clojure/clojurescript/wiki/ Companies-Using-ClojureScript 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 How to begin?

I Interactive Koans (http://clojurescriptkoans.com)

I ClojureScript Tutorial (https://www.niwi.nz/cljs-workshop)

I Download a project template and start coding (https://github.com/clojure/clojurescript/wiki# project-templates) How to begin?

I Interactive Koans (http://clojurescriptkoans.com)

I ClojureScript Tutorial (https://www.niwi.nz/cljs-workshop)

I Download a project template and start coding (https://github.com/clojure/clojurescript/wiki# project-templates) How to begin?

I Interactive Koans (http://clojurescriptkoans.com)

I ClojureScript Tutorial (https://www.niwi.nz/cljs-workshop)

I Download a project template and start coding (https://github.com/clojure/clojurescript/wiki# project-templates) 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 Example applications

I CircleCI frontend (https://github.com/circleci/frontend)

I jinteki.net (https://github.com/mtgred/netrunner)

I Minkowski distance visualization (https://github.com/pewniak747/minkowski) Example applications

I CircleCI frontend (https://github.com/circleci/frontend)

I jinteki.net (https://github.com/mtgred/netrunner)

I Minkowski distance visualization (https://github.com/pewniak747/minkowski) Example applications

I CircleCI frontend (https://github.com/circleci/frontend)

I jinteki.net (https://github.com/mtgred/netrunner)

I Minkowski distance visualization (https://github.com/pewniak747/minkowski) Summary

ClojureScript follows the “compile-down” pattern of many languages. Higher-level languages compile to runtime representations:

I C++ −→ machine code

I clojure, java −→ JVM bytecode

I ClojureScript, Opal (Ruby), ScalaJS, PyJS, SharpKit (C#) −→ JavaScript Discussion

Thank you for your attention. I’ll be happy to answer any questions.