Turn and face the strange: Construindo front ends funcionais com Clojurescript

O Clojure entrou nas nossas vidas em 2007 como uma das variações mais poderosas e consistentes do Lisp, e desde então tem sido amplamente adotada pelos membros da comunidade funcional. Recentemente o Clojure ganhou um novo amigo chamado ClojureScript, que nos permite usar Clojure pra construir front ends robustos, confiáveis e funcionais. Você se vê frequentemente lutando contra um escopo bagunçado ou o famoso callback hell em javascript? Sempre quis usar um conjunto ricos de estruturas de dados nativas, macros e ainda levar de brinde as otimizações de performance da JVM? Trago ótimas notícias pra você! Nessa talk veremos como se utilizar dos super poderes que o ClojureScript pode trazer para o front end e os benefícios da programação funcional.

Transcript

1. (turn (and face (the strange)))
   @silveira_bells
   Isa Silveira
   Construido front ends funcionais com ClojureScript
   

   View Slide

2. View Slide

3. Eu sempre quis saber desenhar
   

   View Slide

4. Mini Isa
   

   View Slide

5. View Slide

6. Vocês já tentaram desenhar?
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. Descobertas
    1. Composição de partes menores para formar o todo
    2. Reutilização de partes ou desenhos menores
    3. Evolução de um desenho a partir de um novo
    

    View Slide

12. Familiar?
    

    View Slide

13. Isa Silveira
    @silveira_bells
    Desenvolvedora @Work&Co
    Carioca, math freak, patinadora slalom,
    senso de humor peculiar @vida
    

    View Slide

14. Coisas que as pessoas precisam e
    escolhem usar todos os dias
    

    View Slide

15. View Slide

16. View Slide

17. Temos vagas :)
    

    View Slide

18. E javascript? Vocês já usaram?
    

    View Slide

19. “Preciso fazer um internet banking inteiro em JS”
    

    View Slide

20. De novo, por onde começar?
    

    View Slide

21. function bankHandler() {
    …
    }
    

    View Slide

22. View Slide

23. Tentar fazer sentido de uma
    sopa de escopos e contextos
    

    View Slide

24. View Slide

25. Uma inception de closures pra tentar

    desesperadamente lidar com essa bagunça
    

    View Slide

26. View Slide

27. Async e callback hell
    

    View Slide

28. View Slide

29. Async e callback promise hell
    

    View Slide

30. Como abaixar esse custo?
    

    View Slide

31. E se o código front end não
    tivesse que ser imperativo?
    

    View Slide

32. A programação funcional nos dá uma ótima
    solução pra vários desses problemas
    

    View Slide

33. Funções puras e composição de funções
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. Imutabilidade por si só pode
    resolver outras 3 dores
    

    View Slide

38. Benefícios da imutabilidade
    1.Operações assíncronas
    2.Performance
    3.Monitoramento de mutações de estado
    

    View Slide

39. Benefícios da imutabilidade
    1.Operações assíncronas
    2.Performance
    3.Monitoramento de mutações de estado
    

    View Slide

40. Benefícios da imutabilidade
    1.Operações assíncronas
    2.Performance
    3.Monitoramento de mutações de estado
    

    View Slide

41. Null
    Head
    Obj Obj Obj
    

    View Slide

42. Head
    Obj Obj Obj Null
    Obj
    

    View Slide

43. Benefícios da imutabilidade
    1.Operações assíncronas
    2.Performance
    3.Monitoramento de mutações de estado
    

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. “Turn and face the strange”
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. Entra em cena o ClojureScript
    

    View Slide

56. View Slide

57. Clojure compilado pra JS
    

    View Slide

58. (((( Um guia rápido de LISP ))))
    

    View Slide

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

    View Slide

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

    View Slide

61. Javascript Dev
    Tooling
    

    View Slide

62. View Slide

63. One tool to rule them all
    

    View Slide

64. https://leiningen.org/
    

    View Slide

65. REPL ClojureScript built-in + live reload
    

    View Slide

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

    View Slide

67. View Slide

68. core.async
    

    View Slide

69. (let [channel (chan)]
    (go (put! channel “Olá BrazilJS!”))
    (go (.log js/console (take! channel))))
    

    View Slide

70. (let [channel (chan)]
    (go (put! channel “Olá BrazilJS!”))
    (go (.log js/console (take! channel))))
    

    View Slide

71. (let [channel (chan)]
    (go (put! channel “Olá BrazilJS!”))
    (go (.log js/console (take! channel))))
    

    View Slide

72. Google Closure Compiler
    

    View Slide

73. Super poderes do Closure Compiler
    1. Eliminação de código morto
    2. Cross-module code motion
    

    View Slide

74. 1. Eliminação de código morto
    2. Cross-module code motion
    Super poderes do Closure Compiler
    

    View Slide

75. View Slide

76. 1. Eliminação de código morto
    2. Cross-module code motion
    Super poderes do Closure Compiler
    

    View Slide

77. utils.cljc
    app-state
    get-logged-user
    get-field-value
    

    View Slide

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

    View Slide

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

    View Slide

80. “Show de bola, mas e a minha lib JS favorita?”
    

    View Slide

81. View Slide

82. View Slide

83. Libs compatíveis com o closure compiler
    também tem otimizações da compilação avançada ✨
    

    View Slide

84. ~16%
    menor
    O bundle final do react é
    https://clojurescript.org/news/2017-07-12-clojurescript-is-not-an-island-integrating-node-modules
    

    View Slide

85. E como isso funciona na prática?
    

    View Slide

86. $ brew install lein
    

    View Slide

87. $ lein new figwheel cljs-slides
    

    View Slide

88. View Slide

89. View Slide

90. View Slide

91. Back-end
    

    View Slide

92. Front-end
    

    View Slide

93. Código compartilhado
    

    View Slide

94. $ lein do clean, cljsbuild once min
    

    View Slide

95. View Slide

96. View Slide

97. Moral da história
    

    View Slide

98. Não importa qual seja o seu problema,
    lembre-se de pensar nas soluções menos óbvias
    

    View Slide

99. “Pra quem só tem martelo,
    todo problema parece prego”
    

    View Slide

100. Você não é uma linguagem,
     você não é um framework,
     você não é um paradigma de programação
     You’re the all-singing, all-dancing crap of the world
     

     View Slide

101. View Slide

102. Muito obrigada! ✨
     

     View Slide

103. @silveira_bells
     

     View Slide