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.

Transcript

1. Building Functional front ends with ClojureScript @silveira_bells Isa Silveira
2. Hi from Brazil
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
15. An inception of closures to desperately deal with the messy soup of states and scopes
17. Async and callback hell
19. Async and callback promise hell
20. Overall, JS is great, but how can I lower its cost?
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
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
35. “Turn and face the strange”
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
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
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
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
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
77. Back-end
78. Front-end
79. Shared code
80. $ lein do clean, cljsbuild once min
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!