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 where we do financial analysis awesomely Previously worked at doing dev, dev mgmt and dev relations I also consider myself something of a on the twitter machine Novus.com The New York Times punk @joe_sepi 

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? < s c r i p t s r c = " . . . " > < / s c r i p t > < s c r i p t s r c = " . . . " > < / s c r i p t > < s c r i p t s r c = " . . . " > < / s c r i p t > < s c r i p t M y A p p . s o m e t h i n g . w h a t e v e r . g o n e . t o o . f a r ( ' f a i l ' ) ; t h i s m u s t l o a d b e f o r e t h a t b u t n o t b e f o r e 

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

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 < s c r i p t d a t a - m a i n = " j s / m a i n " s r c = " j s / r e q u i r e . j s " > < / s c r i p t > MAIN.JS r e q u i r e ( [ ' b e e p ' , ' b o o p ' ] , f u n c t i o n ( b e e p , b o o p ) { b e e p ( ) ; b o o p ( ) ; } ) ; BEEP.JS d e f i n e ( [ ' r o b o t ' ] , f u n c t i o n ( r o b o t ) { v a r s p e a k = f u n c t i o n ( ) { r o b o t ( ' b e e p ' ) ; } ; r e t u r n s p e a k ; } ) ; ROBOT.JS d e f i n e ( f u n c t i o n ( ) { r e t u r n f u n c t i o n ( s ) { r e t u r n c o n s o l e . l o g ( s . t o U p p e r C a s e ( ) + ' ! ' ) ; } ; } ) ; 

BROWSERIFY 

IN TERMINAL $ b r o w s e r i f y m a i n . j s > b u n d l e . j s INDEX.HTML < s c r i p t s r c = " j s / b u n d l e . j s " > < / s c r i p t > MAIN.JS v a r b e e p = r e q u i r e ( ' b e e p ' ) ; v a r b o o p = r e q u i r e ( ' b o o p ' ) ; b e e p ( ) ; b o o p ( ) ; BEEP.JS v a r r o b o t = r e q u i r e ( ' r o b o t ' ) ; v a r s p e a k = f u n c t i o n ( ) { r o b o t ( ' b e e p ' ) ; } ; m o d u l e . e x p o r t s = s p e a k ; ROBOT.JS m o d u l e . e x p o r t s = f u n c t i o n ( s ) { r e t u r n c o n s o l e . l o g ( s . t o U p p e r C a s e ( ) + ' ! ' ) ; } ; 

BEEP + ROBOT?? - USING MODULE.EXPORTS OBJECT v a r r o b o t = r e q u i r e ( ' r o b o t ' ) ; v a r s p e a k = f u n c t i o n ( ) { r o b o t ( ' b e e p ' ) ; } ; v a r d a n c e = f u n c t i o n ( ) { $ ( ' b o d y ' ) . a p p e n d ( ' < i m g s r c = " d a n c i n g - b e n d e r . g i f " > ' ) ; } ; m o d u l e . e x p o r t s = { s p e a k : s p e a k , d a n c e : d a n c e } 

BEEP + ROBOT?? - USING EXPORTS.WHATEVS v a r r o b o t = r e q u i r e ( ' r o b o t ' ) ; e x p o r t s . s p e a k = f u n c t i o n ( ) { r o b o t ( ' b e e p ' ) ; } ; e x p o r t s . d a n c e = f u n c t i o n ( ) { $ ( ' b o d y ' ) . a p p e n d ( ' < i m g s r c = " d a n c i n g - b e n d e r . g i f " > ' ) ; } ; 

BEEP + ROBOT?? - USING REQ WITH HYBRID PATTERN d e f i n e ( f u n c t i o n ( r e q u i r e , e x p o r t s , m o d u l e ) { v a r r o b o t = r e q u i r e ( ' r o b o t ' ) ; e x p o r t s . s p e a k = f u n c t i o n ( ) { r o b o t ( ' b e e p ' ) ; } ; e x p o r t s . d a n c e = f u n c t i o n ( ) { $ ( ' b o d y ' ) . a p p e n d ( ' < i m g s r c = " d a n c i n g - b e n d e r . g i f " > ' ) ; } ; } ) ; 

BACKBONE VIEW d e f i n e ( [ ' j q u e r y ' , ' u n d e r s c o r e ' , ' b a c k b o n e ' , ' t e x t ! t e m p l a t e s / e x a m p l e . h t m l ' ] , f u n c t i o n ( $ , _ , B a c k b o n e , e x a m p l e T e m p l a t e ) { v a r A p p V i e w = B a c k b o n e . V i e w . e x t e n d ( { e l : ' # m a i n ' , t e m p l a t e : _ . t e m p l a t e ( e x a m p l e T e m p l a t e ) , r e n d e r : f u n c t i o n ( ) { t h i s . $ e l . h t m l ( t h i s . t e m p l a t e ( { } ) ) ; r e t u r n t h i s ; } } ) ; r e t u r n A p p V i e w ; } ) ; 

BACKBONE VIEW d e f i n e ( f u n c t i o n ( r e q u i r e , e x p o r t s , m o d u l e ) { v a r $ = r e q u i r e ( ' j q u e r y ' ) ; v a r _ = r e q u i r e ( ' u n d e r s c o r e ' ) ; v a r B a c k b o n e = r e q u i r e ( ' b a c k b o n e ' ) ; v a r e x a m p l e T e m p l a t e = r e q u i r e ( ' t e x t ! t e m p l a t e s / e x a m p l e . h t m l ' ) ; v a r A p p V i e w = B a c k b o n e . V i e w . e x t e n d ( { e l : ' # m a i n ' , t e m p l a t e : _ . t e m p l a t e ( e x a m p l e T e m p l a t e ) , r e n d e r : f u n c t i o n ( ) { t h i s . $ e l . h t m l ( t h i s . t e m p l a t e ( { } ) ) ; r e t u r n t h i s ; } } ) ; r e t u r n A p p V i e w ; } ) ; 

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) you can do most anything 

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