AMD, BDD e o Javali

"PROGRAMMING IS A
CRAFT NOT SCIENCE OR
ENGINEERING"
John Graham Cumming
É uma combinação de habilidades e experiência expressada por
meio de ferramentas, o artersão escolhe suas ferramentas
espe...
GIVEN THAT IT'S A CRAFT THEN IT'S NOT HARD TO SEE THAT:
experience matters
tools matter
intuition matters
AMD
Asynchronous Module Definition!
REQUIRE JS
O RequireJS surgiu em setembro de 2009, com a proposta de ser
um carregador de módulos para javascript.
Hoje ele gerencia as dependências do seu programa
O PROBLEMA: ESCREVER CÓDIGO MODULAR.
MODULARIZAÇÃO VS ACOPLAMENTO
Acoplamento:
Gera dependência
Dificulta o crescimento
Não simpatiza com TDD|BDD
Dificulta ent...
MODULARIZAÇÃO VS ACOPLAMENTO
Modularização:
Menos dependências
Fácil evolução
Facilidade na hora de testar
Simples de ler
...
ENTÃO EU SÓ CONSIGO ESCREVER JAVASCRIPT MODULAR SE
EU USAR UMA BIBLIOTECA? NÃO!
ENTÃO PORQUE REQUIREJS?
AMD IS NOT THE
ANSWER
Tom Dale
Many HTTP Requests!
Too Much Ceremony
The alternative!
PLEASE, SHOW ME THE CODE!
dfn('qey]
eie[jur',
fnto (){
ucin $
fnto Pooalr ( {
ucin htGley )
ti.hms=$'gleytub)
hstub
(.alr-hm';
ti.ihihs=$'gleyhglgt)...
dfn(
eie[
'qey
jur'
] fnto (){
, ucin $
's src'
ue tit;
$f.xadotn =fnto ( {
.nepnCnet
ucin )
ti.ahfnto(e,eeet{
hsec(ucinky...
rqiecni(
eur.ofg{
bsUl "cit/
aer: srps"
si:{
hm
"akoe:{
bcbn"
dp:[udrcr" "qey]
es "nesoe, jur",
eprs "akoe
xot: Bcbn"
}
}
...
dfn(
eie[
'br!euiyudetmltsue/ad,
hasscrtBnl/epae/srcr'
'qey
jur'
] fnto (epae $ {
, ucin tmlt, )
's src'
ue tit;
rtr fnto ...
BDD
Behavior-driven development
Desenvolvimento orientado ao comportamento
TDD
Por onde começar?
O que testar? O que não testar?
BDD!
Tests are Specs

O teste pode ser a sua documentação.
A palavra should te mantém no foco do teste.
O nome do teste aj...
"O BDD EVOLUIU DE PRÁTICA ÁGEIS"
Como um [X]
Eu quero [Y]
Para que [Z]

Dado algum contexto inicial.
Quando algum evento o...
MOCHA
UM FRAMEWORK DE TESTES JAVASCRIPT (NODE.JS E
BROWSER) PARA SIMPLIFICAR TESTES ASSÍNCRONOS
POR ONDE COMEÇAR
Você precisa escolher uma biblioteca de asserts:
should.js
expect.js
chai
better-assert
Show me the code!
dsrb(Ary,fnto( {
ecie'ra' ucin)
dsrb(#neO(' fnto({
ecie'idxf), ucin)
i(sol rtr - we tevlei ntpeet,fnto({...
rqie[
eur(
'oue/ht-alr/an
mdlspoogleymi'
] fnto (htGley{
, ucin Pooalr)
's src'
ue tit;
fnto cetDmcp ( {
ucin raeoSoe )
vr...
O seu SpecRunner:
<bd>
oy
<ln he=./oe_opnnsmcamcacs rl"tlset mda"cen /
ik rf".bwrcmoet/oh/oh.s" e=syehe" ei=sre" >
<srp sc...
Rodando seus testes:
<srp tp=tx/aacit>
cit ye"etjvsrp"
vrses=[
a pc
'pc/ouese'
sesmdl.pc,
'pc/opnn.pc,
sescmoetse'
'pc/etr...
O RESULTADO NO NAVEGADOR:
O RESULTADO NO TERMINAL:
GRUNTJS
O GRUNT É UM GERENCIADOR DE TAREFAS FRONT-END FEITO
EM JAVASCRIPT.
TAREFAS DA ROTINA DO DESENVOLVIMENTO FRONTEND

Testar
M...
PORQUE ESCOLHER O GRUNT?
A comunidade do grunt é enorme e cresce a cada dia, já são
centenas de plugins do grunt que fazem...
INSTALANDO O GRUNTJS
nmisal- gutci
p ntl g rn-l

OU
sd nmisal- gutci
uo p ntl g rn-l
Configurando o GruntJS
nmii
p nt
nmisalgut-sv-e.
p ntl rn -aedv
O PACKAGE.JSON
{
"ae:"eelj"
nm" rva.s,
"eso" "..-e"
vrin: 260dv,
"ecito" "h HM Peetto Faeok,
dsrpin: Te TL rsnain rmwr"
"o...
O GRUNTFILE.JS
mdl.xot =fnto (rn){
oueeprs
ucin gut
's src'
ue tit;
gutiiCni(
rn.ntofg{
pg gutfl.edSN'akg.sn)
k: rn.ieraJO...
GRUNT MOCHA
{
"et:{
ts"
"r" [ts/pcunrhm",
sc: "etSeRne.tl]
"pin" {
otos:
"u" fle
rn: as,
"eotr:"pc
rpre" Se"
}
}
}
GRUNT CONNECT
{
"evr:{
sre"
"pin" {
otos:
"ot:90,
pr" 01
"otae:""
hsnm" *,
"eplv" tu
keaie: re
}
}
}
GRUNT REQUIREJS
{
"opl":{
cmie
"pin":{
otos
"aer" "r/s"
bsUl: scj/,
"ae:"ieae,
nm" flnm"
"ah" {
pts:
"epae" ".tmlts"
tmlts...
"I'M NOT YOUNG ENOUGH TO KNOW
EVERYTHING"
John Graham Cumming
RAFAEL LYRA
front end developer at apontador.com

github: rafaellyra
twitter: @rafaellyra
linkedin: br.linkedin.com/in/raf...
Upcoming SlideShare
Loading in …5
×

AMD, BDD, e o Javali

1,042 views

Published on

Saiba como manter seu JavaScript modular, testado e automatizado, utilizando algumas ferramentas como: RequireJS, Mocha e GruntJS. - Rupy Brazil 2013

  • Be the first to comment

AMD, BDD, e o Javali

  1. 1. AMD, BDD e o Javali "PROGRAMMING IS A CRAFT NOT SCIENCE OR ENGINEERING" John Graham Cumming
  2. 2. É uma combinação de habilidades e experiência expressada por meio de ferramentas, o artersão escolhe suas ferramentas específicas e aprende a usá-las para criar sua arte.
  3. 3. GIVEN THAT IT'S A CRAFT THEN IT'S NOT HARD TO SEE THAT: experience matters tools matter intuition matters
  4. 4. AMD Asynchronous Module Definition!
  5. 5. REQUIRE JS
  6. 6. O RequireJS surgiu em setembro de 2009, com a proposta de ser um carregador de módulos para javascript.
  7. 7. Hoje ele gerencia as dependências do seu programa
  8. 8. O PROBLEMA: ESCREVER CÓDIGO MODULAR.
  9. 9. MODULARIZAÇÃO VS ACOPLAMENTO Acoplamento: Gera dependência Dificulta o crescimento Não simpatiza com TDD|BDD Dificulta entendimento do código Impossibilita reutilização Gera propagação de mudanças
  10. 10. MODULARIZAÇÃO VS ACOPLAMENTO Modularização: Menos dependências Fácil evolução Facilidade na hora de testar Simples de ler Facilidade de reutilização Liberdade para alterações
  11. 11. ENTÃO EU SÓ CONSIGO ESCREVER JAVASCRIPT MODULAR SE EU USAR UMA BIBLIOTECA? NÃO! ENTÃO PORQUE REQUIREJS?
  12. 12. AMD IS NOT THE ANSWER Tom Dale
  13. 13. Many HTTP Requests! Too Much Ceremony The alternative!
  14. 14. PLEASE, SHOW ME THE CODE!
  15. 15. dfn('qey] eie[jur', fnto (){ ucin $ fnto Pooalr ( { ucin htGley ) ti.hms=$'gleytub) hstub (.alr-hm'; ti.ihihs=$'gleyhglgt) hshglgt (.alr-ihih'; ti.cieht =$'gleyhglgto'; hsatvPoo (.alr-ihih.n) ti.hmso(muene' $poyti.nhmHvr ti); hstub.n'osetr, .rx(hsoTuboe, hs) } Pooalr.rttp.nhmHvr=fnto (v { htGleypooyeoTuboe ucin e) vr$urnTre =$e.urnTre) a cretagt (vcretagt, idx=$urnTre.tr'aaidx) ne cretagtat(dt-ne'; ti.cieht.eoels(o'; hsatvPoormvCas'n) ti.cieht =$ti.ihihsidx) hsatvPoo (hshglgt[ne]; ti.cieht.dCas'n) hsatvPooadls(o'; } rtr Pooalr; eun htGley } ) ;
  16. 16. dfn( eie[ 'qey jur' ] fnto (){ , ucin $ 's src' ue tit; $f.xadotn =fnto ( { .nepnCnet ucin ) ti.ahfnto(e,eeet{ hsec(ucinky lmn) vr$lmn =$eeet, a eeet (lmn) cnet syels; otn, tlCas $lmn.lc(ucineet{ eeetcikfnto(vn) eetpeeteal(; vn.rvnDfut) cnet=$lmn.tr'aacnet) otn eeetat(dt-otn'; $lmn.eoels(cikbe) eeetrmvCas'lcal'; vr$otn =$cnet; a cnet (otn) $otn.hw) cnetso(; } ) } ) } }; )
  17. 17. rqiecni( eur.ofg{ bsUl "cit/ aer: srps" si:{ hm "akoe:{ bcbn" dp:[udrcr" "qey] es "nesoe, jur", eprs "akoe xot: Bcbn" } } , pts { ah: "ot:".vno/otsc, mu" ./edrmu/r" "et:".vno/eurj-ettx" tx" ./edrrqiestx/et, "br" ".vno/eurj-adeashas, has: ./edrrqieshnlbr/br" "qey:".vno/qeyjur" jur" ./edrjur/qey, "aeok:"tp:/onc.aeokntp_Ral, fcbo" hts/cnetfcbo.e/tB/l" "efe" "tp/cnlaltscmlalt064lalt lalt: ht:/d.efej.o/efe-../efe" } }; )
  18. 18. dfn( eie[ 'br!euiyudetmltsue/ad, hasscrtBnl/epae/srcr' 'qey jur' ] fnto (epae $ { , ucin tmlt, ) 's src' ue tit; rtr fnto (otie,ue,pae){ eun ucin cnanr sr lyr vr$otie =$cnanr; a cnanr (otie) Hnlbr.eitrepr adeasrgseHle( 'ePaePitPret, gtlyronsecn' $poypae.ePitPret pae) .rx(lyrgtonsecn, lyr ) ; Hnlbr.eitrepr adeasrgseHle( 'eUeFrtae, gtsrisNm' $poyue.eFrtae ue) .rx(srgtisNm, sr ) ; $otie.tl cnanrhm( tmlt( epae{ 'sr:ue, ue' sr 'lyr:pae pae' lyr } ) ) ; } ; }; )
  19. 19. BDD Behavior-driven development Desenvolvimento orientado ao comportamento
  20. 20. TDD Por onde começar? O que testar? O que não testar?
  21. 21. BDD! Tests are Specs O teste pode ser a sua documentação. A palavra should te mantém no foco do teste. O nome do teste ajuda quando o teste falha. O should te faz questionar a premissa do teste. Qual a proxima coisa mais importante que o seu sistema não faz ainda?
  22. 22. "O BDD EVOLUIU DE PRÁTICA ÁGEIS" Como um [X] Eu quero [Y] Para que [Z] Dado algum contexto inicial. Quando algum evento ocorrer. Então verificar os resultados.
  23. 23. MOCHA
  24. 24. UM FRAMEWORK DE TESTES JAVASCRIPT (NODE.JS E BROWSER) PARA SIMPLIFICAR TESTES ASSÍNCRONOS
  25. 25. POR ONDE COMEÇAR Você precisa escolher uma biblioteca de asserts: should.js expect.js chai better-assert
  26. 26. Show me the code! dsrb(Ary,fnto( { ecie'ra' ucin) dsrb(#neO(' fnto({ ecie'idxf), ucin) i(sol rtr - we tevlei ntpeet,fnto({ t'hud eun 1 hn h au s o rsn' ucin) asr.qa(1 [,,]idxf5) seteul-, 123.neO(); asr.qa(1 [,,]idxf0) seteul-, 123.neO(); } ) } ) }; )
  27. 27. rqie[ eur( 'oue/ht-alr/an mdlspoogleymi' ] fnto (htGley{ , ucin Pooalr) 's src' ue tit; fnto cetDmcp ( { ucin raeoSoe ) vri=0 a , l=5 , d,d,d; l t d d =dcmn.raelmn(d'; l ouetcetEeet'l) fr( =0 i<l i+ 1 { o i ; ; = ) vrd =dcmn.raelmn(d'; a t ouetcetEeet't) d.lsNm + 'alr-ihih' tcasae = gleyhglgt; i ( = 0 { f i = ) d.lsNm + 'o' tcasae = n; } d.pedhl(t; lapnCidd) } fr( =0 i<l i+ 1 { o i ; ; = ) vrd =dcmn.raelmn(d'; a d ouetcetEeet'd) d.lsNm + 'alr-hm' dcasae = gleytub; d.eAtiue'aaidx,i; dsttrbt(dt-ne' ) d.pedhl(d; lapnCidd) } rtr d; eun l } dsrb(PooGley,fnto ( { ecie'ht alr' ucin ) vrpooalr,dmcp,tsAe, a htGley oSoe etra $hms $ihihs $cieihih,i l dtIdx tub, hglgt, atvHglgt , , aane; bfr(ucin( { eoefnto ) dmcp =cetDmcp(; oSoe raeoSoe) tsAe =dcmn.eEeetyd'etra) etra ouetgtlmnBI(tsAe'; tsAe.pedhl(oSoe; etraapnCiddmcp) pooalr =nwPooalr(; htGley e htGley)
  28. 28. O seu SpecRunner: <bd> oy <ln he=./oe_opnnsmcamcacs rl"tlset mda"cen / ik rf".bwrcmoet/oh/oh.s" e=syehe" ei=sre" > <srp sc".bwrcmoet/eurj/eur.s> cit r=./oe_opnnsrqiesrqiej" <srp sc".bwrcmoet/oh/oh.s> cit r=./oe_opnnsmcamcaj" <srp sc".bwrcmoet/xetepc.s> cit r=./oe_opnnsepc/xetj"
  29. 29. Rodando seus testes: <srp tp=tx/aacit> cit ye"etjvsrp" vrses=[ a pc 'pc/ouese' sesmdl.pc, 'pc/opnn.pc, sescmoetse' 'pc/etr.pc sesfauese' ] ; rqiecni( eur.ofg{ .. . }; ) mcastp'd'; oh.eu(bd) rqie ses fnto ( { eur( pc, ucin ) mcarn) oh.u( }; ) </cit srp> </oy bd>
  30. 30. O RESULTADO NO NAVEGADOR:
  31. 31. O RESULTADO NO TERMINAL:
  32. 32. GRUNTJS
  33. 33. O GRUNT É UM GERENCIADOR DE TAREFAS FRONT-END FEITO EM JAVASCRIPT. TAREFAS DA ROTINA DO DESENVOLVIMENTO FRONTEND Testar Minificar Concatenar Compilar ...
  34. 34. PORQUE ESCOLHER O GRUNT? A comunidade do grunt é enorme e cresce a cada dia, já são centenas de plugins do grunt que fazem praticamente tudo que você precisa.
  35. 35. INSTALANDO O GRUNTJS nmisal- gutci p ntl g rn-l OU sd nmisal- gutci uo p ntl g rn-l
  36. 36. Configurando o GruntJS nmii p nt nmisalgut-sv-e. p ntl rn -aedv
  37. 37. O PACKAGE.JSON { "ae:"eelj" nm" rva.s, "eso" "..-e" vrin: 260dv, "ecito" "h HM Peetto Faeok, dsrpin: Te TL rsnain rmwr" "oeae:"tp/lbhkms/eelj" hmpg" ht:/a.ai.erva-s, "udmi" "eels, sboan: rvaj" "cit" { srps: "et:"rn ts" ts" gut et, "tr" " sat: " } , "uhr:{ ato" "ae:"ai E Hta" nm" Hkm l atb, "mi" "ai.latbgalcm, eal: hkmehta@mi.o" "e" "tp/hkms" wb: ht:/ai.e } , "eoioy:{ rpstr" "ye:"i" tp" gt, "r" "i:/ihbcmhkmlrva.sgt ul: gt/gtu.o/aie/eelj.i" } , "nie" { egns: "oe:"080 nd" ~.." } , "eednis:{ dpnece" "okti" "091" sce.o: ~..3 } , "eDpnece" { dveednis: "rn-oti-ui" "022, gutcnrbqnt: ~.." "rn-oti-sit:"064, gutcnrbjhn" ~.." "rn" "040 gut: ~.." } , "iess:[ lcne"
  38. 38. O GRUNTFILE.JS mdl.xot =fnto (rn){ oueeprs ucin gut 's src' ue tit; gutiiCni( rn.ntofg{ pg gutfl.edSN'akg.sn) k: rn.ieraJO(pcaejo', rqies gutfl.edSN'ofgrqiesjo', eurj: rn.ieraJO(cni/eurj.sn) cmas gutfl.edSN'ofgcmasjo', ops: rn.ieraJO(cni/ops.sn) wth gutfl.edSN'ofgwthjo', ac: rn.ieraJO(cni/ac.sn) ulf:gutfl.edSN'ofgulf.sn) giy rn.ieraJO(cni/giyjo', csit gutfl.edSN'ofgcsitjo', sln: rn.ieraJO(cni/sln.sn) jhn:gutfl.edSN'ofgjhn.sn) sit rn.ieraJO(cni/sitjo', cnet gutfl.edSN'ofgcnetjo', onc: rn.ieraJO(cni/onc.sn) mca gutfl.edSN'ofgmcajo', oh: rn.ieraJO(cni/oh.sn) sel gutfl.edSN'ofgseljo', hl: rn.ieraJO(cni/hl.sn) rlae gutfl.edSN'ofgrlaejo' ees: rn.ieraJO(cni/ees.sn) }; ) rqie'acdp)fle(gut*)frahgutlaNmak) eur(mthe'.itr'rn-'.oEc(rn.odpTss; gutrgseTs(bid,[cmas,'eurj') rn.eitrak'ul' 'ops' rqies]; gutrgseTs(ts' [mca]; rn.eitrak'et, 'oh') } ;
  39. 39. GRUNT MOCHA { "et:{ ts" "r" [ts/pcunrhm", sc: "etSeRne.tl] "pin" { otos: "u" fle rn: as, "eotr:"pc rpre" Se" } } }
  40. 40. GRUNT CONNECT { "evr:{ sre" "pin" { otos: "ot:90, pr" 01 "otae:"" hsnm" *, "eplv" tu keaie: re } } }
  41. 41. GRUNT REQUIREJS { "opl":{ cmie "pin":{ otos "aer" "r/s" bsUl: scj/, "ae:"ieae, nm" flnm" "ah" { pts: "epae" ".tmlts" tmlts: ./epae/, "adeas:"../oe_opnnshnlbr/adeas, Hnlbr" ./.bwrcmoet/adeashnlbr" "et:"../oe_opnnsrqiestx/et, tx" ./.bwrcmoet/eurj-ettx" "br" "../oe_opnnsrqieshnlbr/br" has: ./.bwrcmoet/eurj-adeashas } , "hm:{ si" "adeas:{ Hnlbr" "xot" "adeas eprs: Hnlbr" } , "qey:{ jur" "xot" "Qey eprs: jur" } } , "u" "ulcj/anmnj" ot: pbi/smi.i.s, "piie:"giy" otmz" ulf2 } } }
  42. 42. "I'M NOT YOUNG ENOUGH TO KNOW EVERYTHING" John Graham Cumming
  43. 43. RAFAEL LYRA front end developer at apontador.com github: rafaellyra twitter: @rafaellyra linkedin: br.linkedin.com/in/rafaellyra/

×