JS limpo e testável com Segregated DOM
•
4 gostaram•504 visualizações
A dor de cabeça de trabalhar com JS no front? Manipular o DOM e seus eventos de uma forma sustentável. O desânimo de lidar com o DOM acaba gerando um código mal organizado, macarrônico, ruim de manter e - o pior - impossível de testar. Com a técnica do Segregated DOM, matamos todos esses problemas e, finalmente, vamos conseguir testar unitariamente aquele ajax no qual todo seu sistema depende; porque a era de fazer JS chutado ficou pra trás!
Recomendados
Mais conteúdo relacionado
Semelhante a JS limpo e testável com Segregated DOM
Semelhante a JS limpo e testável com Segregated DOM (20)
Mais de tdc-globalcode
Mais de tdc-globalcode (20)
Último
Último (20)
JS limpo e testável com Segregated DOM
- 1. js limpo e testável com segregated DOM Luciano Ratamero TDC - Porto Alegre setembro - 2015
- 2. luciano@ratamero.com @lucianoratamero fb.com/lucianoratamero lucianoratamero.github.io tudo que for: lucianoratamero (sério)
- 6. 17 19 21
- 7. dojo UFF valeu moçada ;]
- 8. html + css
- 9. jQuery
- 11. elogroup
- 13. vantagens • revisão e sugestão de código • manutenção coletiva • menos feudos, mais referências • fim do ciúme de código • consciência geral (general conscience) sobre os projetos
- 15. python + django
- 16. python + django precisava aprender mais técnicas
- 17. python + django precisava aprender mais técnicas OO SOLID TDD BDD DDD
- 18. dificuldade
- 19. eu back
- 20. por que código de front é tão feio?
- 21. jQuery resolve
- 22. jQuery resolve | front como layout
- 23. jQuery resolve | front como layout | desorganização
- 24. js é feio e bobo *código de verdade, em produção, do projeto que peguei pra aprender js, 4 anos atrás
- 25. projetos em geral jQuery DOM $(…) $(…) $(…) $(…) $(…) $(…) manipulação caos
- 26. DOM
- 27. DOM é horrível
- 28. é o melhor que temos DOM
- 29. frameworks!
- 30. frameworks!
- 33. frameworks são ótimos… …mas nos limitam
- 34. como que faz isso aqui mesmo?
- 35. se faz assi…
- 36. esse negócio de JS não funciona não!
- 39. o desânimo de trabalhar com JS no front não vem do desconhecimento de técnicas de programação, mas da inadequação das ferramentas que se tem em relação aos desafios propostos
- 41. #comofas
- 42. front como tentativa e erro
- 43. tentativa e erro + erros - acertos + bugs
- 45. resolução: testes de JS! são um saco!
- 48. isolar o DOM
- 49. isolar o DOM encapsular o DOM
- 50. isolar o DOM encapsular o DOM segregar o DOM
- 51. Segregated DOM
- 53. que tal isso? presentation layer DOM código da aplicação intenção manipulação eventos do DOM eventos do domínio
- 54. o que você prefere? $('#id_name, #id_message, #id_email’) ou $form.getRequiredFields()
- 55. isso nos permite declarar intenção $form.isValid()
- 56. boa idéia, mas tá meio abstrato
- 57. me dá um dia. vou fazer um protótipo
- 58. primeiro passo: tirar o html do js e o js do html
- 60. BRINKS!
- 63. segundo passo: criar uma camada de apresentação (presentation layer)
- 64. prezLayer.js
- 65. prezLayer.js
- 67. depois: (contactForm.js) e essa é a única chamada no $(document).ready()
- 69. contactForm.js
- 75. e com testes, podemos pensar em refatorações…
- 80. viu? agora tá tudo testado e mais bonitinho!
- 81. tá mesmo, mas tá muito grande e confuso isso aqui
- 82. esse negócio de JS não funciona não
- 83. …
- 84. ok. me dá mais um dia!
- 85. problemas
- 87. prezLayer.js
- 89. prezLayer.js
- 90. contactForm.js
- 91. 3 - confusão entre o que deve estar na prezLayer
- 92. prezLayer.js
- 93. conclusões
- 94. o que importa é a app/página, não a prezLayer…
- 95. …porque a app pode ser decomposta!
- 97. respeito aos contratos de API
- 98. app.js
- 99. o que importa é que o elemento tenha um método append que cumpre seu papel…
- 100. não importa o framework, podemos usá-lo desde que ele esteja abstraído
- 103. events.js
- 104. services.js
- 105. prezLayer.js
- 106. app.js
- 109. manter o código a longo prazo
- 110. e agora? dá uma olhada aí
- 111. …
- 112. nossa, que tá bonito demais isso aqui, hein
- 113. dá pra entender tudo, tudo testado…
- 114. e sem aquelas pirações de angular, react
- 115. mas dá pra acoplar, se quiser. só respeitar a API e mockar os caras
- 116. dá até pra brincar com require… mas ia ser demais
- 117. recapitulando
- 119. tudo testado TDD + BDD
- 120. DOM segregado ids, classes e seletores centralizados
- 122. DRY
- 123. pitadas de DDD e MVC
- 124. liberdade de implementação === use quanto quiser os frameworks, da forma que quiser
- 125. e o melhor…
- 127. agora sou um front foda! sei fazer tudo!
- 128. ah, é, é? então coloca essa div no lugar que eu quero ver!
- 129. …
- 131. …
- 132. me dá mais dois dias.
- 133. é isso aí! Luciano Ratamero luciano@ratamero.com fb: lucianoratamero twitter: @lucianoratamero