Modularize all the things

Publishing and reusing Javascript modules doesn't need to be hard.

This talk shows some tips on how to use Package managers, use a module definition to share your work and finally how to publish it; so the world (including yourself) can reuse it later!

Presented at JS Montreal in 12 august 2014

Transcript

1. MOD U L A R I Z E A L L T H E T H I N GS
2. B u i l d i n g t h e c a s e f o r Mo d u l a r i z a t i o n
3. R e a l w o r l d e x a mp l e s : Mo n o l i t h i c a p p l i c a t i o n s
4. T h e 2 0 1 3 w e b s i t e
5. T h e 2 0 1 3 w e b s i t e s t i c k y h e a d e r p a r a l l a x c o n t a c t f o r m c a r o u s e l
6. T h e e l e p h a n t i n t h e r o o m
7. R e i n v e n t i n g t h e w h e e l
8. R e i n v e n t i n g t h e w h e e l N o t i n v e n t e d h e r e s y n d r o me
9. R e i n v e n t i n g t h e w h e e l N o t i n v e n t e d h e r e s y n d r o me L e a r n i n g c u r v e
10. Y o u c o u l d h a v e i t s o mu c h b e t t e r
11. Mo d u l a r i z i n g
12. I d e n t i f y i n g r e u s a b l e b l o c k s
13. Wh a t i f r e u s i n g a n e l e me n t c o u l d b e a s s i mp l e a s :
14. Wh a t i f r e u s i n g a n e l e me n t c o u l d b e a s s i mp l e a s :
15. L e a v i n g t h e c o mf o r t z o n e
16. T i me f o r a n e w w o r k f l o w
17. P a c k a g e Ma n a g e r s
18. n p m: d e f a u l t N o d e . j s p a c k a g e ma n a g e r c o me s w i t h n e w N o d e . j s i n s t a l l a t i o n s
19. mo s t p o p u l a r f r o n t - e n d p a c k a g e ma n a g e r mu s t b e i n s t a l l e d u s i n g n p m
20. D i f f e r e n c e s b e t w e e n n p m a n d B o w e r
21. p a c k a g e . j s o n b o w e r . j s o n
22. Mo d u l e d e f i n i t i o n
23. w i n d o w . n a me s p a c e
24. w i n d o w . n a me s p a c e
25. C o mmo n J S
27. A MD
29. U MD
30. U MD
31. F r a me w o r k s
32. A n g u l a r J S
33. A n g u l a r h a s i t s o w n mo d u l e d e f i n i t i o n s . D i r e c t i v e s a n d S e r v i c e s a r e g r e a t !
34. N e w t e c h n o l o g i e s
35. We b c o mp o n e n t s
36. A u t o ma t i n g T a s k s
37. Y e o ma n
38. Y e o ma n i s n o t o n l y g r e a t f o r s t a r t i n g b i g p r o j e c t s . R u n a g e n e r a t o r a n d g e t y o u r mo d u l e s t r u c t u r e r e a d y i n a ma t t e r o f s e c o n d s ! g e n e r a t o r - n o d e g e n e r a t o r - a md g e n e r a t o r - a n g u l a r
39. Gr u n t
40. Y o u r Y e o ma n g e n e r a t o r w i l l c e r t a i n l y b r i n g y o u a Gr u n t f i l e w i t h ma n y u s e f u l Gr u n t t a s k s b y d e f a u l t . I mp r o v e i t w i t h t a s k s t o s p e e d u p mo d u l e r e l e a s e s : g r u n t - b u mp g r u n t - s g - r e l e a s e
41. P u b l i s h i n g
42. I t d o e s n ’ t H A V E t o b e o p e n - s o u r c e . B o t h n p m a n d B o w e r s u p p o r t s ma n y e n d p o i n t s s u c h a s Gi t , S V N , z i p , l o c a l f o l d e r , e t c . n p m p u b l i s h / b o w e r r e g i s t e r On c e o u r p a c k a g e i s p u b l i s h e d w e c a n j u s t i n s t a l l a n d u s e i t .
43. J u s t a s w e w a n t e d :
44. R e u s i n g t h i r d - p a r t y mo d u l e s
45. C e d r i c D u g a s “ C a n I c o d e i t my s e l f e a s i l y ? D o I h a v e t i me ? Wh a t b r o w s e r s i s t h i s s u p p o r t i n g ? N u mb e r o f o p e n i s s u e s ? Wh a t ’ s t h e c o d e s i z e ? D o I t r u s t t h i s g u y ( o r t e a m) ? ”
46. S h a r e y o u r mo d u l e s !
47. Me r c i ! @r u y a d o r n o h t t p : / / r u y a d o r n o . c o m
48. - P a i n t a l l t h e me me s b y S a m S p r a t t : h t t p : / / s a ms p r a t t . c o m/ - Mo n o l i t h I I I b y T i m J a r v i s : h t t p : / / w w w . ma g n a s o ma . c o . u k / # / mo n o l i t h - 3 - E l e p h a n t i n t h e r o o m p h o t o : “ B a r e l y L e g a l ” e x h i b i t i o n , S e p t e mb e r 1 5 , 2 0 0 6 . ( R E U T E R S / F r e d P r o u s e r ) - L e g o C o l o r B r i c k s b y A l a n C h i a : h t t p : / / c o mmo n s . w i k i me d i a . o r g / w i k i / F i l e : L e g o _ C o l o r _ B r i c k s . j p g - F r a n z F e r d i n a n d - Y o u C o u l d H a v e I t S o Mu c h B e t t e r a l b u m c o v e r - Go Go p h e r p a c k a g e s p h o t o b y N a t h a n Y o u n g ma n : h t t p : / / n a t h a n y . c o m/ g o - p a c k a g e s / - - P a t t e r n t i l e s b y T o n i F : h t t p s : / / w w w . f l i c k r . c o m/ p h o t o s / s t - l i t e / 2 6 6 0 9 6 6 9 5 1 - P i l e o f K i t t e n s b y P e t e r H a s s e l b o m: h t t p s : / / w w w . f l i c k r . c o m/ p h o t o s / p e t e r _ h a s s e l b o m/ 3 0 7 2 3 2 6 2 2 0 - K i t t e n k 3 b y K u b i l a y Oz v a r d a r : h t t p s : / / w w w . f l i c k r . c o m/ p h o t o s / mr k u b i / 1 2 2 2 7 3 5 1 0 7 I ma g e C r e d i t s
49. - P a c k a g e ma n a g e me n t s y s t e m: h t t p : / / e n . w i k i p e d i a . o r g / w i k i / P a c k a g e _ ma n a g e me n t _ s y s t e m - N o t I n v e n t e d h e r e : h t t p : / / e n . w i k i p e d i a . o r g / w i k i / N o t _ i n v e n t e d _ h e r e - N P M P u b l i s h : h t t p s : / / w w w . n p mj s . o r g / d o c / c l i / n p m- p u b l i s h . h t ml - B o w e r A P I : h t t p : / / b o w e r . i o / d o c s / a p i / - C o mmo n J S : h t t p : / / w w w . c o mmo n j s . o r g / - B r o w s e r i f y : h t t p : / / b r o w s e r i f y . o r g / - N o d - N o d e . j s mo d u l e s D o c : h t t p : / / n o d e j s . o r g / a p i / mo d u l e s . h t ml - A MD : h t t p s : / / g i t h u b . c o m/ a md j s / a md j s - a p i - R e q u i r e J S : h t t p : / / r e q u i r e j s . o r g / - U MD : h t t p s : / / g i t h u b . c o m/ u md j s / u md - B o w e r . j s o n s p e c : h t t p s : / / g i t h u b . c o m/ b o w e r / b o w e r . j s o n - s p e c - n p m p a c k a g e . j s o n s p e c : h t t p s : / / w w w . n p mj s . o r g / d o c / f i l e s / p a c k a g e . j s o n . h t ml - A n g u l a r J S : h t t p s : / / a n g u l a r j s . o r g / - - We b c o mp o n e n t s : h t t p : / / w e b c o mp o n e n t s . o r g / - Mo u t a n d mo d u l a r i t y : h t t p : / / b l o g . mi l l e r me d e i r o s . c o m/ mo u t - a n d - mo d u l a r i t y / - S u b s t a c k o p i n i o n s o n mo d u l e s : h t t p : / / s u b s t a c k . n e t / h o w _ I _ w r i t e _ mo d u l e s - D e a t h t o mo n o l i t h i c l i b r a r i e s b y C e d r i c D u g a s : h t t p : / / w w w . p o s i t i o n - a b s o l u t e . c o m/ a r t i c l e s / d e a t h - t o - mo n o - l i t h i c - l i b r a r i e s / L i s t o f J a v a s c r i p t P a c k a g e ma n a g e r s : - n p m: h t t p s : / / w w w . n p mj s . o r g / - B o w e r : h t t p : / / b o w e r . i o / - V o l o : h t t p : / / v o l o j s . o r g / - J a m: h t t p : / / j a mj s . o r g / - C o mp o n e n t : h t t p s : / / g i t h u b . c o m/ c o mp o n e n t / c o mp o n e n t R e f e r e n c e s