Save 37% off PRO during our Black Friday Sale! »

ClojureScript and React without JavaScript

6d58a00433af7f304cbb0d4999cf647f?s=47 Rakhim
February 21, 2019

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.

6d58a00433af7f304cbb0d4999cf647f?s=128

Rakhim

February 21, 2019
Tweet

Transcript

  1. Rakhim D. @freetonik rakhim.org

  2. None
  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
  6. None
  7. None
  8. Virtual DOM

  9. Virtual DOM

  10. Virtual DOM

  11. Virtual DOM

  12. None
  13. None
  14. None
  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
  19. None
  20. None
  21. None
  22. None
  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
  26. None
  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
  32. None
  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

  36. None
  37. None
  38. HTML JSX HICCUP "Templating"

  39. JS Interop

  40. JS Interop

  41. ClojureScript JavaScript JS Interop

  42. core.async

  43. demo

  44. None
  45. None
  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
  57. None
  58. None
  59. None
  60. Thanks! Twitter @freetonik Email rakhim@rakhim.org Homepage rakhim.org