Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building functional Front-ends with ClojureScript

Building functional Front-ends with ClojureScript

Clojure came along into our lives in 2007 as one of the most concise and powerful Lisps, and since them it's been widely adopted by members of the community. Recently, Clojure got a new friend called ClojureScript, which allows us to use Clojure to build robust and reliable front ends. Ever wanted to use a rich data structure set, macros and take advantage of the great performance optimizations present on the JVM? You got it! In this talk I'll go through the super powers ClojureScript can add to the view layer and the benefits of functional programming.

91b0fc08849c4128f1eed542c057fd27?s=128

Isabella Silveira

June 01, 2018
Tweet

Transcript

  1. Building Functional front ends with ClojureScript @silveira_bells Isa Silveira

  2. Hi from Brazil

  3. None
  4. None
  5. None
  6. None
  7. Life as a frond-end developer since 2010 has had its

    ups and downs
  8. The ups were amazing ✨

  9. The JS community is really something else

  10. Lots of different approaches and flavors to choose from

  11. An infinity of boilerplates

  12. But the downs were painful

  13. Trying to make sense out of a messy soup of

    states and scopes
  14. None
  15. An inception of closures to desperately deal with the messy

    soup of states and scopes
  16. None
  17. Async and callback hell

  18. None
  19. Async and callback promise hell

  20. Overall, JS is great, but how can I lower its

    cost?
  21. None
  22. What if our front-end didn’t have to be imperative?

  23. Functional programming could help me with the downs big time

  24. Pure functions and function composition could help me dealing with

    state and scope
  25. None
  26. And immutability alone could take care of 3 other huge

    issues
  27. Immutability benefits 1.Asynchronous operations 2.Performance 3.Mutation tracking

  28. 1.Asynchronous operations 2.Performance 3.Mutation tracking Immutability benefits

  29. 1.Asynchronous operations 2.Performance 3.Mutation tracking Immutability benefits

  30. Null Head Obj Obj Obj

  31. Head Obj Obj Obj Null Obj

  32. 1.Asynchronous operations 2.Performance 3.Mutation tracking Immutability benefits

  33. None
  34. None
  35. “Turn and face the strange”

  36. None
  37. Enter ClojureScript

  38. So what exactly is ClojureScript?

  39. Clojure compiled to JS

  40. (((( A simple guide to LISP syntax ))))

  41. (defn add-numbers [num1 num2] (+ num1 num2))

  42. (add-numbers 3 1) ;; 4

  43. Tooling

  44. None
  45. A single tool for managing packages, project build, bootstrapping and

    scaffolding
  46. https://leiningen.org/

  47. Built-in ClojureScript REPL and live reload

  48. Figwheel https://github.com/bhauman/lein-figwheel

  49. None
  50. Native immutable data structures

  51. core.async

  52. (let [channel (chan)] (go (put! channel “hello AmsterdamJS!”)) (go (.log

    js/console (take! channel))))
  53. (let [channel (chan)] (go (put! channel “hello AmsterdamJS!”)) (go (.log

    js/console (take! channel))))
  54. (let [channel (chan)] (go (put! channel “hello AmsterdamJS!”)) (go (.log

    js/console (take! channel))))
  55. Google Closure Compiler

  56. Closure Compilers’s superpowers 1. Dead code removal 2. Cross-module code

    motion
  57. 1. Dead code removal 2. Cross-module code motion Closure Compilers’s

    superpowers
  58. None
  59. 1. Dead code removal 2. Cross-module code motion Closure Compilers’s

    superpowers
  60. utils.cljc

  61. core.cljs

  62. signup.cljs

  63. utils.cljc core.cljs signup.cljs app-state get-logged-user app-state get-field-value

  64. utils.cljc core.cljs signup.cljs app-state get-logged-user get-field-value

  65. JS interop

  66. None
  67. None
  68. vs

  69. Closure Compiler compliant libs also benefit from advanced compilation optimizations

  70. ~16% smaller React’s bundle size is https://clojurescript.org/news/2017-07-12-clojurescript-is-not-an-island-integrating-node-modules

  71. How does it look like in practice?

  72. $ brew install lein

  73. $ lein new figwheel cljs-slides

  74. None
  75. None
  76. None
  77. Back-end

  78. Front-end

  79. Shared code

  80. $ lein do clean, cljsbuild once min

  81. None
  82. None
  83. No matter what your problem is, remember to think of

    the non-obvious solutions
  84. “If all you have is a hammer, everything looks like

    a nail”
  85. You’re not a language, you’re not a framework, you’re not

    a programming paradigm
  86. @silveira_bells Thanks!