js limpo e testável com segregated DOM

Luciano RatameroTDC - Porto Alegresetembro - 2015

luciano@ratamero.com@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.

é isso aí!

Luciano Ratameroluciano@ratamero.com

fb: lucianoratamero twitter: @lucianoratamero

quer saber mais?http://martinfowler.com/bliki/

SegregatedDOM.html

http://radar.oreilly.com/2014/01/keeping-jquery-in-check.html

http://lucianoratamero.github.io/