Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modularize all the things

Ruy Adorno
August 12, 2014

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

Ruy Adorno

August 12, 2014
Tweet

More Decks by Ruy Adorno

Other Decks in Programming

Transcript

  1. MOD
    U
    L
    A
    R
    I
    Z
    E
    A
    L
    L T
    H
    E T
    H
    I
    N
    GS

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  34. 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 full-size slide

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

    View full-size slide

  36. 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 full-size slide

  37. -
    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 full-size slide

  38. -
    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 full-size slide