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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. T
   h
   e 2
   0
   1
   3
   w
   e
   b
   s
   i
   t
   e
   

   View Slide

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
   

   View Slide

6. T
   h
   e e
   l
   e
   p
   h
   a
   n
   t
   i
   n t
   h
   e r
   o
   o
   m
   

   View Slide

7. R
   e
   i
   n
   v
   e
   n
   t
   i
   n
   g t
   h
   e w
   h
   e
   e
   l
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. Mo
    d
    u
    l
    a
    r
    i
    z
    i
    n
    g
    

    View Slide

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
    

    View Slide

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
    :
    

    View Slide

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
    :
    

    View Slide

15. L
    e
    a
    v
    i
    n
    g t
    h
    e
    c
    o
    mf
    o
    r
    t
    z
    o
    n
    e
    

    View Slide

16. T
    i
    me f
    o
    r
    a
    n
    e
    w
    w
    o
    r
    k
    f
    l
    o
    w
    

    View Slide

17. P
    a
    c
    k
    a
    g
    e
    Ma
    n
    a
    g
    e
    r
    s
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

21. p
    a
    c
    k
    a
    g
    e
    .
    j
    s
    o
    n b
    o
    w
    e
    r
    .
    j
    s
    o
    n
    

    View Slide

22. Mo
    d
    u
    l
    e
    d
    e
    f
    i
    n
    i
    t
    i
    o
    n
    

    View Slide

23. w
    i
    n
    d
    o
    w
    .
    n
    a
    me
    s
    p
    a
    c
    e
    

    View Slide

24. w
    i
    n
    d
    o
    w
    .
    n
    a
    me
    s
    p
    a
    c
    e
    

    View Slide

25. C
    o
    mmo
    n
    J
    S
    

    View Slide

26. View Slide

27. A
    MD
    

    View Slide

28. View Slide

29. U
    MD
    

    View Slide

30. U
    MD
    

    View Slide

31. F
    r
    a
    me
    w
    o
    r
    k
    s
    

    View Slide

32. A
    n
    g
    u
    l
    a
    r
    J
    S
    

    View Slide

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
    !
    

    View Slide

34. N
    e
    w t
    e
    c
    h
    n
    o
    l
    o
    g
    i
    e
    s
    

    View Slide

35. We
    b c
    o
    mp
    o
    n
    e
    n
    t
    s
    

    View Slide

36. A
    u
    t
    o
    ma
    t
    i
    n
    g
    T
    a
    s
    k
    s
    

    View Slide

37. Y
    e
    o
    ma
    n
    

    View Slide

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
    

    View Slide

39. Gr
    u
    n
    t
    

    View Slide

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
    

    View Slide

41. P
    u
    b
    l
    i
    s
    h
    i
    n
    g
    

    View Slide

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
    .
    

    View Slide

43. J
    u
    s
    t
    a
    s
    w
    e w
    a
    n
    t
    e
    d
    :
    

    View Slide

44. R
    e
    u
    s
    i
    n
    g
    t
    h
    i
    r
    d
    -
    p
    a
    r
    t
    y
    mo
    d
    u
    l
    e
    s
    

    View Slide

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)
    ?
    ”
    

    View Slide

46. S
    h
    a
    r
    e y
    o
    u
    r
    mo
    d
    u
    l
    e
    s
    !
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide