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

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

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.

91b0fc08849c4128f1eed542c057fd27?s=128

Isabella Silveira

August 24, 2018
Tweet

Transcript

  1. (turn (and face (the strange))) @silveira_bells Isa Silveira Construido front

    ends funcionais com ClojureScript
  2. None
  3. Eu sempre quis saber desenhar

  4. Mini Isa

  5. None
  6. Vocês já tentaram desenhar?

  7. None
  8. None
  9. None
  10. None
  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
  12. Familiar?

  13. Isa Silveira @silveira_bells Desenvolvedora @Work&Co Carioca, math freak, patinadora slalom,

    senso de humor peculiar @vida
  14. Coisas que as pessoas precisam e escolhem usar todos os

    dias
  15. None
  16. None
  17. Temos vagas :)

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

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

  20. De novo, por onde começar?

  21. function bankHandler() { … }

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

  24. None
  25. Uma inception de closures pra tentar
 desesperadamente lidar com essa

    bagunça
  26. None
  27. Async e callback hell

  28. None
  29. Async e callback promise hell

  30. Como abaixar esse custo?

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

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

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

  34. None
  35. None
  36. None
  37. Imutabilidade por si só pode resolver outras 3 dores

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

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

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

    estado
  41. Null Head Obj Obj Obj

  42. Head Obj Obj Obj Null Obj

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

    estado
  44. None
  45. None
  46. None
  47. None
  48. None
  49. “Turn and face the strange”

  50. None
  51. None
  52. None
  53. None
  54. None
  55. Entra em cena o ClojureScript

  56. None
  57. Clojure compilado pra JS

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

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

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

  61. Javascript Dev Tooling

  62. None
  63. One tool to rule them all

  64. https://leiningen.org/

  65. REPL ClojureScript built-in + live reload

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

  67. None
  68. core.async

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

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

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

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

  73. Super poderes do Closure Compiler 1. Eliminação de código morto

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

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

    poderes do Closure Compiler
  77. utils.cljc app-state get-logged-user get-field-value

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

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

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

  81. None
  82. None
  83. Libs compatíveis com o closure compiler também tem otimizações da

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

  85. E como isso funciona na prática?

  86. $ brew install lein

  87. $ lein new figwheel cljs-slides

  88. None
  89. None
  90. None
  91. Back-end

  92. Front-end

  93. Código compartilhado

  94. $ lein do clean, cljsbuild once min

  95. None
  96. None
  97. Moral da história

  98. Não importa qual seja o seu problema, lembre-se de pensar

    nas soluções menos óbvias
  99. “Pra quem só tem martelo, todo problema parece prego”

  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
  101. None
  102. Muito obrigada! ✨

  103. @silveira_bells