Front End Dependency Management

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?

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 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
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? < 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
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 < 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 ( ) + ' ! ' ) ; } ; } ) ;
14. BROWSERIFY
15. 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 ( ) + ' ! ' ) ; } ;
16. 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 }
17. 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 " > ' ) ; } ;
18. 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 " > ' ) ; } ; } ) ;
19. 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 ; } ) ;
20. 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 ; } ) ;
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