AMD, BDD, e o Javali

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
específicas e aprende a usá-las para criar sua arte.

GIVEN THAT IT'S A CRAFT THEN IT'S NOT HARD TO SEE THAT:
experience matters
tools matter
intuition matters

AMD
Asynchronous Module Definition!

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 entendimento do código
Impossibilita reutilização
Gera propagação de mudanças

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

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!

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
}
)
;

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(;
}
)
}
)
}
};
)

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"
}
};
)

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
}
)
)
;
}
;
};
)

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 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?

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

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({
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();
}
)
}
)
};
)

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)

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"

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>

O GRUNT É UM GERENCIADOR DE TAREFAS FRONT-END FEITO
EM JAVASCRIPT.
TAREFAS DA ROTINA DO DESENVOLVIMENTO FRONTEND

Testar
Minificar
Concatenar
Compilar
...

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.

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

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')
}
;

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: ./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
}
}
}

"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/rafaellyra/

AMD, BDD, e o Javali

Recomendados

Recomendados

Más contenido relacionado

Similar a AMD, BDD, e o Javali

Similar a AMD, BDD, e o Javali (20)

AMD, BDD, e o Javali