There have been many heated debates about how you should structure and manage your JavaScript code; specifically what module pattern to use: RequireJS or CommonJS. One's allegiance is usually determined by environment variables -- Node or the browser. As the front end world goes barreling into the future, this distinction is beginning to get blurry. Let's take an objective look at the advantages and disadvantages of each approach and have a healthy conversation as to why you would choose one over the other. Let's hug it out. Won't you join me?

1. FRONT END DEPENDENCY
MANAGEMENT
LET'S HUG IT OUT, FRIENDS
Presented to you by Joe Sepi / @joe_sepi

2. I AM WHO I THINK I AM.
VP of Engineering at Novus.com where we do financial
analysis awesomely
Previously worked at The New York Times doing dev, dev
mgmt and dev relations
I also consider myself something of a punk
@joe_sepi on the twitter machine

3. Rene Auberjonois

4. WE'RE ALL IN THIS TOGETHER

5. HISTORY
Dojo, Modules/Transport/C, RunJS, Narwhal, etc...

6. WHAT ARE THE PROBLEMS WE ARE TRYING TO
SOLVE?
<citsc"."<srp>srp sc"."<srp>srp sc"."<srp>srp
srp r=..>/cit<cit r=..>/cit<cit r=..>/cit<cit
MApsmtigwaee.oetofr'al)
yp.oehn.htvrgn.o.a(fi';
ti ms la bfr ta btntbfr
hs ut od eoe ht u o eoe

7. So those are the problems we are trying to solve, but what are
the benefits of solving these problems?
performance, stability, sanity, reuse,

8. HOW DO WE GET THERE?
Modules
Tooling
Bonus: Repository

9. PLEASE DON'T SKIN THE CAT

10. AMD, RequireJS, Bower
-CommonJS, Browserify, NPM

11. How do we use these tools to actually solve this problem?

12. REQUIRE

13. INDEX.HTML
<citdt-an"smi"sc"srqiej"<srp>
srp aami=j/an r=j/eur.s>/cit
MAIN.JS
rqie[be' 'op] fnto(ep bo){
eur('ep, bo', ucinbe, op
be(;
ep)
bo(;
op)
};
)
BEEP.JS
dfn('oo',fnto(oo){
eie[rbt] ucinrbt
vrsek=fnto ( {
a pa
ucin )
rbt'ep)
oo(be';
}
;
rtr sek
eun pa;
};
)
ROBOT.JS
dfn(ucin){
eiefnto(
rtr fnto (){
eun ucin s
rtr cnoelgstUprae)+'';
eun osl.o(.opeCs(
!)
}
;
};
)

14. BROWSERIFY

15. IN TERMINAL
$bosrf mi.s>bnl.s
rweiy anj
udej
INDEX.HTML
<citsc"sbnl.s>/cit
srp r=j/udej"<srp>
MAIN.JS
vrbe =rqie'ep)
a ep
eur(be';
vrbo =rqie'op)
a op
eur(bo';
be(;
ep)
bo(;
op)
BEEP.JS
vrrbt=rqie'oo';
a oo
eur(rbt)
vrsek=fnto ( {
a pa
ucin )
rbt'ep)
oo(be';
}
;
mdl.xot =sek
oueeprs
pa;
ROBOT.JS
mdl.xot =fnto (){
oueeprs
ucin s
rtr cnoelgstUprae)+'';
eun osl.o(.opeCs(
!)
}
;

16. BEEP + ROBOT?? - USING MODULE.EXPORTS OBJECT
vrrbt=rqie'oo';
a oo
eur(rbt)
vrsek=fnto ( {
a pa
ucin )
rbt'ep)
oo(be';
}
;
vrdne=fnto ( {
a ac
ucin )
$'oy)apn(<m sc"acn-edrgf>)
(bd'.ped'ig r=dnigbne.i"';
}
;
mdl.xot ={
oueeprs
sek:sek
pa
pa,
dne:dne
ac
ac
}

17. BEEP + ROBOT?? - USING EXPORTS.WHATEVS
vrrbt=rqie'oo';
a oo
eur(rbt)
eprssek=fnto ( {
xot.pa
ucin )
rbt'ep)
oo(be';
}
;
eprsdne=fnto ( {
xot.ac
ucin )
$'oy)apn(<m sc"acn-edrgf>)
(bd'.ped'ig r=dnigbne.i"';
}
;

18. BEEP + ROBOT?? - USING REQ WITH HYBRID PATTERN
dfn(ucinrqie eprs mdl){
eiefnto(eur, xot, oue
vrrbt=rqie'oo';
a oo
eur(rbt)
eprssek=fnto ( {
xot.pa
ucin )
rbt'ep)
oo(be';
}
;
eprsdne=fnto ( {
xot.ac
ucin )
$'oy)apn(<m sc"acn-edrgf>)
(bd'.ped'ig r=dnigbne.i"';
}
;
};
)

19. BACKBONE VIEW
dfn(
eie[
'qey,
jur'
'nesoe,
udrcr'
'akoe,
bcbn'
'ettmltseapehm'
tx!epae/xml.tl
] fnto (,_ Bcbn,eapeepae {
, ucin $ , akoe xmlTmlt)
vrApiw=Bcbn.iwetn(
a pVe
akoeVe.xed{
e:'mi'
l #an,
tmlt:_tmlt(xmlTmlt)
epae .epaeeapeepae,
rne:fnto ( {
edr ucin )
ti.e.tlti.epae{);
hs$lhm(hstmlt(})
rtr ti;
eun hs
}
};
)
rtr Apiw
eun pVe;
};
)

20. BACKBONE VIEW
dfn(ucin(eur,eprs mdl){
eiefnto rqie xot, oue
vr$
a
=rqie'qey)
eur(jur';
vr_
a
=rqie'nesoe)
eur(udrcr';
vrBcbn
a akoe
=rqie'akoe)
eur(bcbn';
vreapeepae=rqie'ettmltseapehm';
a xmlTmlt
eur(tx!epae/xml.tl)
vrApiw=Bcbn.iwetn(
a pVe
akoeVe.xed{
e:'mi'
l #an,
tmlt:_tmlt(xmlTmlt)
epae .epaeeapeepae,
rne:fnto ( {
edr ucin )
ti.e.tlti.epae{);
hs$lhm(hstmlt(})
rtr ti;
eun hs
}
};
)
rtr Apiw
eun pVe;
};
)

21. HERE ARE THE WAYS IN WHICH EACH
APPROACH SHINES:

22. REQUIRE BIG WIN:
ASYNC MODULE LOAD
dive in quickly
debug loaded deps in console
dynamically load code

23. BROWSERIFY BIG WIN(S):
npm install [module-name] --save
server and browser code share
through bundling (and transforms) you can do most anything

24. AMD, RequireJS, Bower
vs
CommonJS, Browserify, NPM

25. WHAT ABOUT ES6 MODULES?
WILL THEY SAVE US FROM OURSELVES AND SOLVE WORLD HUNGER?
I'm glad you asked!

26. IN CONCLUSION
Do what feels right
Come talk to me about what you think I missed or am missing

27. THE END
Presented to you by Joe Sepi / @joe_sepi