Front End Dependency Management at CascadiaJS
0 likes492 views
The document, presented by Joe Sepi, discusses front-end dependency management, focusing on the challenges and benefits of various module systems such as AMD, CommonJS, and ES6 modules. It highlights tools like RequireJS, Browserify, and npm for managing dependencies while emphasizing performance, stability, and reusability. The presentation invites discussion on approaches and future directions in dependency management.
![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(
!)
}
;
};
)](https://image.slidesharecdn.com/modules-131122085108-phpapp01/85/Front-End-Dependency-Management-at-CascadiaJS-13-320.jpg)
![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;
};
)](https://image.slidesharecdn.com/modules-131122085108-phpapp01/85/Front-End-Dependency-Management-at-CascadiaJS-19-320.jpg)
![BROWSERIFY BIG WIN(S):
npm install [module-name] --save
server and browser code share
through bundling (and transforms) you can do most anything](https://image.slidesharecdn.com/modules-131122085108-phpapp01/85/Front-End-Dependency-Management-at-CascadiaJS-23-320.jpg)
Front End Dependency Management at CascadiaJS
- 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
- 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