FRONT END DEPENDENCY
MANAGEMENT
LET'S HUG IT OUT, FRIENDS

Presented to you by Joe Sepi / @joe_sepi
I AM WHO I THINK I AM.
VP of Engineering at Novus.com where we do financial
analysis awesomely
Previously worked at The Ne...
Rene Auberjonois
WE'RE ALL IN THIS TOGETHER
HISTORY
Dojo, Modules/Transport/C, RunJS, Narwhal, etc...
WHAT ARE THE PROBLEMS WE ARE TRYING TO
SOLVE?

<citsc"."<srp>srp sc"."<srp>srp sc"."<srp>srp
srp r=..>/cit<cit r=..>/cit<c...
So those are the problems we are trying to solve, but what are
the benefits of solving these problems?
performance, stabil...
HOW DO WE GET THERE?

Modules
Tooling
Bonus: Repository
PLEASE DON'T SKIN THE CAT
AMD, RequireJS, Bower
-CommonJS, Browserify, NPM
How do we use these tools to actually solve this problem?
REQUIRE
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', uc...
BROWSERIFY
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 e...
BEEP + ROBOT?? - USING MODULE.EXPORTS OBJECT
vrrbt=rqie'oo';
a oo
eur(rbt)
vrsek=fnto ( {
a pa
ucin )
rbt'ep)
oo(be';
}
;
...
BEEP + ROBOT?? - USING EXPORTS.WHATEVS
vrrbt=rqie'oo';
a oo
eur(rbt)
eprssek=fnto ( {
xot.pa
ucin )
rbt'ep)
oo(be';
}
;
ep...
BEEP + ROBOT?? - USING REQ WITH HYBRID PATTERN
dfn(ucinrqie eprs mdl){
eiefnto(eur, xot, oue
vrrbt=rqie'oo';
a oo
eur(rbt)...
BACKBONE VIEW
dfn(
eie[
'qey,
jur'
'nesoe,
udrcr'
'akoe,
bcbn'
'ettmltseapehm'
tx!epae/xml.tl
] fnto (,_ Bcbn,eapeepae {
,...
BACKBONE VIEW
dfn(ucin(eur,eprs mdl){
eiefnto rqie xot, oue
vr$
a
=rqie'qey)
eur(jur';
vr_
a
=rqie'nesoe)
eur(udrcr';
vrBc...
HERE ARE THE WAYS IN WHICH EACH
APPROACH SHINES:
REQUIRE BIG WIN:
ASYNC MODULE LOAD
dive in quickly
debug loaded deps in console
dynamically load code
BROWSERIFY BIG WIN(S):
npm install [module-name] --save
server and browser code share
through bundling (and transforms) yo...
AMD, RequireJS, Bower
vs
CommonJS, Browserify, NPM
WHAT ABOUT ES6 MODULES?
WILL THEY SAVE US FROM OURSELVES AND SOLVE WORLD HUNGER?

I'm glad you asked!
IN CONCLUSION
Do what feels right
Come talk to me about what you think I missed or am missing
THE END
Presented to you by Joe Sepi / @joe_sepi
Upcoming SlideShare
Loading in...5
×

Front End Dependency Management at CascadiaJS

155

Published on

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?

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
155
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Front End Dependency Management at CascadiaJS

  1. 1. FRONT END DEPENDENCY MANAGEMENT LET'S HUG IT OUT, FRIENDS Presented to you by Joe Sepi / @joe_sepi
  2. 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. 3. Rene Auberjonois
  4. 4. WE'RE ALL IN THIS TOGETHER
  5. 5. HISTORY Dojo, Modules/Transport/C, RunJS, Narwhal, etc...
  6. 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. 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. 8. HOW DO WE GET THERE? Modules Tooling Bonus: Repository
  9. 9. PLEASE DON'T SKIN THE CAT
  10. 10. AMD, RequireJS, Bower -CommonJS, Browserify, NPM
  11. 11. How do we use these tools to actually solve this problem?
  12. 12. REQUIRE
  13. 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. 14. BROWSERIFY
  15. 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. 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. 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. 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. 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. 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. 21. HERE ARE THE WAYS IN WHICH EACH APPROACH SHINES:
  22. 22. REQUIRE BIG WIN: ASYNC MODULE LOAD dive in quickly debug loaded deps in console dynamically load code
  23. 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. 24. AMD, RequireJS, Bower vs CommonJS, Browserify, NPM
  25. 25. WHAT ABOUT ES6 MODULES? WILL THEY SAVE US FROM OURSELVES AND SOLVE WORLD HUNGER? I'm glad you asked!
  26. 26. IN CONCLUSION Do what feels right Come talk to me about what you think I missed or am missing
  27. 27. THE END Presented to you by Joe Sepi / @joe_sepi
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×