O documento aborda a importância do desenvolvimento modular e da utilização de ferramentas como RequireJS para gerenciar dependências em JavaScript. Também discute práticas de desenvolvimento orientadas ao comportamento (BDD) e a utilização de frameworks de testes como Mocha para simplificar testes assíncronos. Além disso, destaca a relevância do Grunt como um gerenciador de tarefas no desenvolvimento front-end.

1. AMD, BDD e o Javali
"PROGRAMMING IS A
CRAFT NOT SCIENCE OR
ENGINEERING"
John Graham Cumming

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. GIVEN THAT IT'S A CRAFT THEN IT'S NOT HARD TO SEE THAT:
experience matters
tools matter
intuition matters

4. AMD
Asynchronous Module Definition!

5. REQUIRE JS

6. O RequireJS surgiu em setembro de 2009, com a proposta de ser
um carregador de módulos para javascript.

7. Hoje ele gerencia as dependências do seu programa

8. O PROBLEMA: ESCREVER CÓDIGO MODULAR.

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. 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. ENTÃO EU SÓ CONSIGO ESCREVER JAVASCRIPT MODULAR SE
EU USAR UMA BIBLIOTECA? NÃO!
ENTÃO PORQUE REQUIREJS?

12. AMD IS NOT THE
ANSWER
Tom Dale

13. Many HTTP Requests!
Too Much Ceremony
The alternative!

14. PLEASE, SHOW ME THE CODE!

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. 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. 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. 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. BDD
Behavior-driven development
Desenvolvimento orientado ao comportamento

20. TDD
Por onde começar?
O que testar? O que não testar?

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. "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. MOCHA

24. UM FRAMEWORK DE TESTES JAVASCRIPT (NODE.JS E
BROWSER) PARA SIMPLIFICAR TESTES ASSÍNCRONOS

25. POR ONDE COMEÇAR
Você precisa escolher uma biblioteca de asserts:
should.js
expect.js
chai
better-assert

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. 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. 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. 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. O RESULTADO NO NAVEGADOR:

31. O RESULTADO NO TERMINAL:

32. GRUNTJS

33. O GRUNT É UM GERENCIADOR DE TAREFAS FRONT-END FEITO
EM JAVASCRIPT.
TAREFAS DA ROTINA DO DESENVOLVIMENTO FRONTEND
Testar
Minificar
Concatenar
Compilar
...

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. INSTALANDO O GRUNTJS
nmisal- gutci
p ntl g rn-l
OU
sd nmisal- gutci
uo p ntl g rn-l

36. Configurando o GruntJS
nmii
p nt
nmisalgut-sv-e.
p ntl rn -aedv

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. 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. GRUNT MOCHA
{
"et:{
ts"
"r" [ts/pcunrhm",
sc: "etSeRne.tl]
"pin" {
otos:
"u" fle
rn: as,
"eotr:"pc
rpre" Se"
}
}
}

40. GRUNT CONNECT
{
"evr:{
sre"
"pin" {
otos:
"ot:90,
pr" 01
"otae:""
hsnm" *,
"eplv" tu
keaie: re
}
}
}

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. "I'M NOT YOUNG ENOUGH TO KNOW
EVERYTHING"
John Graham Cumming

43. RAFAEL LYRA
front end developer at apontador.com
github: rafaellyra
twitter: @rafaellyra
linkedin: br.linkedin.com/in/rafaellyra/