Front End Dependency Management at CascadiaJS
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Front End Dependency Management at CascadiaJS

  • 344 views
Uploaded 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......

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?

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
344
On Slideshare
344
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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