ClojureScript and React without JavaScript

Slide 1

Slide 1 text

Rakhim D. @freetonik rakhim.org

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

whoami • Software developer since 2010 • Teaching programming since 2012 • hexlet.io until 2019 • now codexpanse.com @freetonik rakhim.org

Slide 4

Slide 4 text

Agenda 1.Agenda  2.JavaScript  3.Clojure  4.ClojureScript 1.Tools 2.Templating 3.JavaScript interop 4.core.async 5.Testing 6.Debugging 7.Spec  5.Ecosystem, community, resources

Slide 5

Slide 5 text

React • Declarative • Component based • JS library for UI • because UI is hard • because DOM

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Virtual DOM

Slide 9

Slide 9 text

Virtual DOM

Slide 10

Slide 10 text

Virtual DOM

Slide 11

Slide 11 text

Virtual DOM

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

https://dorey.github.io/JavaScript-Equality-Table/ a == b

Slide 16

Slide 16 text

a === b https://dorey.github.io/JavaScript-Equality-Table/

Slide 17

Slide 17 text

https://eqeq.js.org/

Slide 18

Slide 18 text

Avoid JS? • TypeScript • Optional static typing • Elm • Influenced by Haskell, ML, OCaml, F# • Static typing + static type checking • Immutable data, persistent data structures • ReasonML • OCaml + static typing

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Clojure • Dynamically typed • Compiled • Dialect of LISP • Works on top of JVM • Homoiconic

Slide 24

Slide 24 text

Clojure • Dynamic • Compiled • Dialect of LISP • Works on top of JVM • Homoiconic • Data-driven • lists '(a b c) • vectors [a b c] • maps {:a "foo" :b "boo"} • sets #{a b c} • Immutable

Slide 25

Slide 25 text

Core philosophy •Data is simple •Small, composable libraries •Stable world vs

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

JS vs Clojure

Slide 28

Slide 28 text

Simple infrastructure JavaScript Clojure Scaffolding Grunt, Yeoman, Slush Leiningen, Boot Building Webpack, Grunt, Gulp Leiningen, Boot Package management npm, yarn, bower Leiningen, Boot or deps.edn

Slide 29

Slide 29 text

State

Slide 30

Slide 30 text

State in Clojure • vars • refs • agents • atoms

Slide 31

Slide 31 text

ClojureScript • Clojure -> JavaScript compiler • Takes advantage of Google Closure • (some) code sharing backend <-> frontend • Smaller than jQuery • Faster than JS for React o_O

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

lein new [TEMPLATE_NAME] PROJECT_NAME lein test [NAMESPACE] lein repl lein uberjar

Slide 34

Slide 34 text

lein new figwheel my_app -- --reagent

Slide 35

Slide 35 text

lein new figwheel my_app -- --reagent

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

HTML JSX HICCUP "Templating"

Slide 39

Slide 39 text

JS Interop

Slide 40

Slide 40 text

JS Interop

Slide 41

Slide 41 text

ClojureScript JavaScript JS Interop

Slide 42

Slide 42 text

core.async

Slide 43

Slide 43 text

demo

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Debugging

Slide 47

Slide 47 text

Profiling

Slide 48

Slide 48 text

Testing

Slide 49

Slide 49 text

Testing

Slide 50

Slide 50 text

Testing

Slide 51

Slide 51 text

spec

Slide 52

Slide 52 text

spec

Slide 53

Slide 53 text

spec

Slide 54

Slide 54 text

Community • Clojurians Slack • /r/Clojure • StackOverflow • Conferences in Europe • Come to Finland ;-)

Slide 55

Slide 55 text

Resources Clojure(Script) • Rich Hickey's talks (at least "Simple Made Easy") • Clojure For The Brave • Luminus “Framework" ClojureScript • https: //clojurescript.io/ • Reagent intro docs • re-frame docs

Slide 56

Slide 56 text

For skeptics • Compilation adds complexity • Performance • Popularity • Parentheses