ClojureScript and React without JavaScript

Web development and modern JS ecosystem can be daunting, especially if you like simplicity, immutability and FP. Being able to create complex React Apps without using any JavaScript, but rather compiling from Clojurescript is a breath of fresh air. I'd like to share my experience writing React-powered apps using Clojurescript, Reagent and Figwheel.

ClojureScript compiles to JavaScript and, thanks to modern tools like Reagent and Figwheel, actually make writing React apps easier than with traditional React JS library. These apps are also generally faster than natively-written ones, thanks to build-in immutability and leveraging the Google Closure compiler. We need more functional programmers on the frontend side! The web is going somewhere dark, and we can help.

Transcript

1. Rakhim D. @freetonik rakhim.org
3. whoami • Software developer since 2010 • Teaching programming since 2012 • hexlet.io until 2019 • now codexpanse.com @freetonik rakhim.org
4. 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
5. React • Declarative • Component based • JS library for UI • because UI is hard • because DOM
8. Virtual DOM
9. Virtual DOM
10. Virtual DOM
11. Virtual DOM
15. https://dorey.github.io/JavaScript-Equality-Table/ a == b
16. a === b https://dorey.github.io/JavaScript-Equality-Table/
17. https://eqeq.js.org/
18. 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
23. Clojure • Dynamically typed • Compiled • Dialect of LISP • Works on top of JVM • Homoiconic
24. 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
25. Core philosophy •Data is simple •Small, composable libraries •Stable world vs
27. JS vs Clojure
28. 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
29. State
30. State in Clojure • vars • refs • agents • atoms
31. ClojureScript • Clojure -> JavaScript compiler • Takes advantage of Google Closure • (some) code sharing backend <-> frontend • Smaller than jQuery • Faster than JS for React o_O
33. lein new [TEMPLATE_NAME] PROJECT_NAME lein test [NAMESPACE] lein repl lein uberjar
34. lein new figwheel my_app -- --reagent
35. lein new figwheel my_app -- --reagent
38. HTML JSX HICCUP "Templating"
39. JS Interop
40. JS Interop
41. ClojureScript JavaScript JS Interop
42. core.async
43. demo
46. Debugging
47. Profiling
48. Testing
49. Testing
50. Testing
51. spec
52. spec
53. spec
54. Community • Clojurians Slack • /r/Clojure • StackOverflow • Conferences in Europe • Come to Finland ;-)
55. 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
56. For skeptics • Compilation adds complexity • Performance • Popularity • Parentheses
60. Thanks! Twitter @freetonik Email rakhim@rakhim.org Homepage rakhim.org