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
   

   View Slide

2. Hi from Brazil
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. Life as a frond-end developer since 2010
   has had its ups and downs
   

   View Slide

8. The ups were amazing ✨
   

   View Slide

9. The JS community is really something else
   

   View Slide

10. Lots of different approaches
    and flavors to choose from
    

    View Slide

11. An infinity of boilerplates
    

    View Slide

12. But the downs were painful
    

    View Slide

13. Trying to make sense out of a messy soup
    of states and scopes
    

    View Slide

14. View Slide

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

    View Slide

16. View Slide

17. Async and callback hell
    

    View Slide

18. View Slide

19. Async and callback promise hell
    

    View Slide

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

    View Slide

21. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. View Slide

26. And immutability alone could take care
    of 3 other huge issues
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. Null
    Head
    Obj Obj Obj
    

    View Slide

31. Head
    Obj Obj Obj Null
    Obj
    

    View Slide

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

    View Slide

33. View Slide

34. View Slide

35. “Turn and face the strange”
    

    View Slide

36. View Slide

37. Enter ClojureScript
    

    View Slide

38. So what exactly is ClojureScript?
    

    View Slide

39. Clojure compiled to JS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. Tooling
    

    View Slide

44. View Slide

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

    View Slide

46. https://leiningen.org/
    

    View Slide

47. Built-in ClojureScript REPL
    and live reload
    

    View Slide

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

    View Slide

49. View Slide

50. Native immutable data structures
    

    View Slide

51. core.async
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. Google Closure Compiler
    

    View Slide

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

    View Slide

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

    View Slide

58. View Slide

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

    View Slide

60. utils.cljc
    

    View Slide

61. core.cljs
    

    View Slide

62. signup.cljs
    

    View Slide

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

    View Slide

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

    View Slide

65. JS interop
    

    View Slide

66. View Slide

67. View Slide

68. vs
    

    View Slide

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

    View Slide

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

    View Slide

71. How does it look like in practice?
    

    View Slide

72. $ brew install lein
    

    View Slide

73. $ lein new figwheel cljs-slides
    

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. Back-end
    

    View Slide

78. Front-end
    

    View Slide

79. Shared code
    

    View Slide

80. $ lein do clean, cljsbuild once min
    

    View Slide

81. View Slide

82. View Slide

83. No matter what your problem is,
    remember to think of the non-obvious solutions
    

    View Slide

84. “If all you have is a hammer,
    everything looks like a nail”
    

    View Slide

85. You’re not a language,
    you’re not a framework,
    you’re not a programming paradigm
    

    View Slide

86. @silveira_bells
    Thanks!
    

    View Slide