Upload
tdc-globalcode
View
371
Download
3
Embed Size (px)
Citation preview
js limpo e testável com segregated DOM
Luciano RatameroTDC - Porto Alegresetembro - 2015
[email protected]@lucianoratamero
fb.com/lucianoratamerolucianoratamero.github.io
tudo que for:
lucianoratamero(sério)
agradecimentos
históriasemi
fictícia
17 19 21
dojo UFF
valeu moçada ;]
html+
css
jQuery
jQuery!=
javascript
elogroup
elogroup|
multidisciplinar
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
python + django
python + django
precisava aprender mais
técnicas
python + django
precisava aprender mais
técnicas
OO SOLID
TDDBDD
DDD
dificuldade
eu back
por que código de front é tão feio?
jQuery resolve
jQuery resolve|
front como layout
jQuery resolve|
front como layout|
desorganização
js é feio e bobo
*código de verdade, em produção, do projeto que peguei pra aprender js, 4 anos atrás
projetos em geral
jQuery
DOM
$(…)
$(…)
$(…) $(…)
$(…) $(…)
manipulação caos
DOM
DOMé horrível
é o melhor que temosDOM
frameworks!
frameworks!
http://www.commitstrip.com/en/2015/09/16/how-to-choose-the-right-javascript-framework/
frameworks são ótimos…
frameworks são ótimos…
…mas nos limitam
como que faz isso aqui mesmo?
se faz assi…
esse negócio de JS não funciona não!
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
ok, entendi o problema
#comofas
front como tentativa e erro
tentativa e erro
+ erros- acertos
+ bugs
resolução:
testes de JS!
resolução:
testes de JS!são um saco!
DOM(você de novo?)
isolar o DOM
isolar o DOM
encapsular o DOM
isolar o DOM
encapsular o DOM
segregar o DOM
Segregated DOM
lembram disso?
jQuery
DOM
$(…)
$(…)
$(…) $(…)
$(…) $(…)
manipulação caos
que tal isso?
presentation layer
DOM
código da aplicação
intenção
manipulação eventos do DOM
eventos do domínio
o que você prefere?
$('#id_name, #id_message, #id_email’)
ou
$form.getRequiredFields()
isso nos permite declarar intenção
$form.isValid()
boa idéia, mas tá meio abstrato
me dá um dia. vou fazer um protótipo
primeiro passo:
tirar o html do js e o js do html
BRINKS!
segundo passo:
criar uma camada de apresentação
(presentation layer)
prezLayer.js
prezLayer.js
antes: (contactForm.js)
depois: (contactForm.js)
e essa é a única chamada no $(document).ready()
terceiro passo:
testes.muitos testes.
contactForm.js
contactForm.test.js
contactForm.test.js
contactForm.test.js
contactForm.test.js
contactForm.test.js
e com testes, podemos pensar em
refatorações…
antes: contactForm.js
antes: contactForm.js
contactForm.js prezLayer.js
quarto passo:???+
profit
viu? agora tá tudo testado e mais
bonitinho!
tá mesmo, mas tá muito grande
e confuso isso aqui
esse negócio de JS não
funciona não
…
ok.me dá mais um
dia!
problemas
1 - muita redundância
prezLayer.js
2 - prezLayergigante
prezLayer.js
contactForm.js
3 - confusão entre o que deve
estar na prezLayer
prezLayer.js
conclusões
o que importa é a app/página, não a
prezLayer…
…porque a app pode ser
decomposta!
contactForm.js services.js
respeito aos contratos de API
app.js
o que importa é que o elemento tenha um método
append que cumpre seu papel…
não importa o framework,
podemos usá-lo desde que ele
esteja abstraído
com essa simplificação ficou fácil…
definir responsabilidades
events.js
services.js
prezLayer.js
app.js
organizar arquivos e diretórios
manter o código a longo prazo
e agora? dá uma olhada aí
…
nossa, que tá bonito demais
isso aqui, hein
dá pra entender tudo, tudo testado…
e sem aquelas pirações de
angular, react
mas dá pra acoplar, se quiser. só respeitar a API e mockar os caras
dá até pra brincar com require… mas ia ser demais
recapitulando
adeus ao código macarrônico
tudo testado
TDD + BDD
DOM segregado
ids, classes e seletores
centralizados
limpolegível
fácil de manter
DRY
pitadas de DDD e MVC
liberdade de implementação
===use quanto quiser os frameworks, da forma
que quiser
e o melhor…
agora sou um front foda! sei fazer
tudo!
ah, é, é? então coloca essa div no lugar que
eu quero ver!
…
…
me dá mais dois dias.
quer saber mais?http://martinfowler.com/bliki/
SegregatedDOM.html
http://radar.oreilly.com/2014/01/keeping-jquery-in-check.html
http://lucianoratamero.github.io/