NodeJS/Express HTML / REST API Views, Routing & Controllers - @JsZgb Meetup #2

Transcript

1. JAVASCRIPT ZAGREB MEETUP #2
   NODE.JS APPS
   REST APIs & Server-side Pages
   Created by &
   

   View Slide

2. MVC APP
   Models
   Views
   Controllers
   Routing
   Data store / Database
   

   View Slide

3. ROUTING
   

   View Slide

4. ROUTING
   CONCEPT
   /
   / *
   *
   * M
   a
   i
   n s
   e
   r
   v
   e
   r
   .
   j
   s |
   | r
   o
   u
   t
   e
   r
   .
   j
   s *
   *
   * /
   /
   a
   p
   p
   .
   g
   e
   t
   (
   '
   /
   '
   , f
   u
   n
   c
   t
   i
   o
   n (
   r
   e
   q
   , r
   e
   s
   ) {
   r
   e
   s
   .
   s
   e
   n
   d
   (
   '
   H
   e
   l
   l
   o W
   o
   r
   l
   d
   '
   )
   ;
   }
   )
   ;
   a
   p
   p
   .
   g
   e
   t
   (
   '
   /
   h
   e
   l
   l
   o
   '
   , f
   u
   n
   c
   t
   i
   o
   n h
   e
   l
   l
   o
   H
   t
   m
   l
   (
   r
   e
   q
   , r
   e
   s
   ) {
   v
   a
   r n
   o
   w = n
   e
   w D
   a
   t
   e
   (
   )
   .
   t
   o
   I
   S
   O
   S
   t
   r
   i
   n
   g
   (
   )
   ;
   r
   e
   s
   .
   r
   e
   n
   d
   e
   r
   (
   '
   h
   e
   l
   l
   o
   '
   , { s
   e
   r
   v
   e
   r
   T
   i
   m
   e
   : n
   o
   w }
   )
   ;
   }
   )
   ;
   

   View Slide

5. ROUTING
   BASIC ROUTING
   /
   / *
   *
   * M
   a
   i
   n s
   e
   r
   v
   e
   r
   .
   j
   s |
   | r
   o
   u
   t
   e
   r
   .
   j
   s *
   *
   * /
   /
   v
   a
   r h
   o
   m
   e
   C
   o
   n
   t
   r
   o
   l
   l
   e
   r = r
   e
   q
   u
   i
   r
   e
   (
   '
   .
   /
   c
   o
   n
   t
   r
   o
   l
   l
   e
   r
   s
   /
   h
   o
   m
   e
   '
   )
   ;
   .
   .
   .
   a
   p
   p
   .
   g
   e
   t
   (
   '
   /
   '
   , h
   o
   m
   e
   C
   o
   n
   t
   r
   o
   l
   l
   e
   r
   .
   h
   o
   m
   e
   )
   ;
   a
   p
   p
   .
   g
   e
   t
   (
   '
   /
   h
   e
   l
   l
   o
   '
   , h
   o
   m
   e
   C
   o
   n
   t
   r
   o
   l
   l
   e
   r
   .
   h
   e
   l
   l
   o
   )
   ;
   

   View Slide

6. ROUTING
   REST API ROUTING
   /
   / *
   *
   * M
   a
   i
   n s
   e
   r
   v
   e
   r
   .
   j
   s |
   | r
   o
   u
   t
   e
   r
   .
   j
   s *
   *
   * /
   /
   v
   a
   r m
   e
   e
   t
   u
   p
   C
   o
   n
   t
   r
   o
   l
   l
   e
   r = r
   e
   q
   u
   i
   r
   e
   (
   '
   .
   /
   c
   o
   n
   t
   r
   o
   l
   l
   e
   r
   s
   /
   m
   e
   e
   t
   u
   p
   '
   )
   ;
   .
   .
   .
   a
   p
   p
   .
   g
   e
   t
   (
   '
   /
   m
   e
   e
   t
   u
   p
   s
   '
   , m
   e
   e
   t
   u
   p
   C
   o
   n
   t
   r
   o
   l
   l
   e
   r
   .
   i
   n
   d
   e
   x
   )
   ;
   a
   p
   p
   .
   p
   o
   s
   t
   (
   '
   /
   m
   e
   e
   t
   u
   p
   s
   '
   , m
   e
   e
   t
   u
   p
   C
   o
   n
   t
   r
   o
   l
   l
   e
   r
   .
   c
   r
   e
   a
   t
   e
   )
   ;
   a
   p
   p
   .
   g
   e
   t
   (
   '
   /
   m
   e
   e
   t
   u
   p
   s
   /
   :
   i
   d
   '
   , m
   e
   e
   t
   u
   p
   C
   o
   n
   t
   r
   o
   l
   l
   e
   r
   .
   s
   h
   o
   w
   )
   ;
   a
   p
   p
   .
   p
   u
   t
   (
   '
   /
   m
   e
   e
   t
   u
   p
   s
   /
   :
   i
   d
   '
   , m
   e
   e
   t
   u
   p
   C
   o
   n
   t
   r
   o
   l
   l
   e
   r
   .
   u
   p
   d
   a
   t
   e
   )
   ;
   a
   p
   p
   .
   d
   e
   l
   e
   t
   e
   (
   '
   /
   m
   e
   e
   t
   u
   p
   s
   /
   :
   i
   d
   '
   , m
   e
   e
   t
   u
   p
   C
   o
   n
   t
   r
   o
   l
   l
   e
   r
   .
   d
   e
   s
   t
   r
   o
   y
   )
   ;
   

   View Slide

7. CONTROLLERS
   

   View Slide

8. CONTROLLERS
   /
   / *
   *
   * c
   o
   n
   t
   r
   o
   l
   l
   e
   r
   s
   /
   h
   o
   m
   e
   .
   j
   s *
   *
   * /
   /
   f
   u
   n
   c
   t
   i
   o
   n h
   o
   m
   e
   (
   r
   e
   q
   , r
   e
   s
   ) {
   r
   e
   s
   .
   s
   e
   n
   d
   (
   '
   H
   e
   l
   l
   o W
   o
   r
   l
   d
   '
   )
   ; /
   / s
   e
   n
   d
   s t
   e
   x
   t
   /
   p
   l
   a
   i
   n
   }
   ;
   f
   u
   n
   c
   t
   i
   o
   n h
   e
   l
   l
   o
   (
   r
   e
   q
   , r
   e
   s
   ) {
   r
   e
   s
   .
   r
   e
   n
   d
   e
   r
   (
   '
   h
   e
   l
   l
   o
   '
   )
   ; /
   / r
   e
   n
   d
   e
   r
   s '
   h
   e
   l
   l
   o
   ' t
   m
   p
   l
   }
   ;
   /
   / .
   .
   .
   /
   / #
   #
   # E
   x
   p
   o
   s
   e f
   r
   o
   m t
   h
   e m
   o
   d
   u
   l
   e
   m
   o
   d
   u
   l
   e
   .
   e
   x
   p
   o
   r
   t
   s = {
   h
   o
   m
   e
   : h
   o
   m
   e
   , h
   e
   l
   l
   o
   : h
   e
   l
   l
   o
   /
   / .
   .
   .
   }
   ;
   

   View Slide

9. CONTROLLERS
   /
   / *
   *
   * c
   o
   n
   t
   r
   o
   l
   l
   e
   r
   s
   /
   m
   e
   e
   t
   u
   p
   .
   j
   s *
   *
   * /
   /
   f
   u
   n
   c
   t
   i
   o
   n i
   n
   d
   e
   x
   (
   r
   e
   q
   , r
   e
   s
   ) { /
   * .
   .
   . r
   e
   s
   .
   s
   e
   n
   d
   (
   j
   s
   o
   n
   A
   r
   r
   ) .
   .
   . *
   / }
   ;
   f
   u
   n
   c
   t
   i
   o
   n s
   h
   o
   w
   (
   r
   e
   q
   , r
   e
   s
   ) { /
   * .
   .
   . r
   e
   s
   .
   s
   e
   n
   d
   (
   j
   s
   o
   n
   ) .
   .
   . *
   / }
   ;
   f
   u
   n
   c
   t
   i
   o
   n c
   r
   e
   a
   t
   e
   (
   r
   e
   q
   , r
   e
   s
   ) { /
   * .
   .
   . *
   / }
   ;
   f
   u
   n
   c
   t
   i
   o
   n u
   p
   d
   a
   t
   e
   (
   r
   e
   q
   , r
   e
   s
   ) { /
   * .
   .
   . *
   / }
   ;
   f
   u
   n
   c
   t
   i
   o
   n d
   e
   s
   t
   r
   o
   y
   (
   r
   e
   q
   , r
   e
   s
   ) { /
   * .
   .
   . *
   / }
   ;
   /
   / #
   #
   # E
   x
   p
   o
   s
   e f
   r
   o
   m t
   h
   e m
   o
   d
   u
   l
   e
   m
   o
   d
   u
   l
   e
   .
   e
   x
   p
   o
   r
   t
   s = {
   i
   n
   d
   e
   x
   : i
   n
   d
   e
   x
   , s
   h
   o
   w
   : s
   h
   o
   w
   , c
   r
   e
   a
   t
   e
   : c
   r
   e
   a
   t
   e
   , u
   p
   d
   a
   t
   e
   : u
   p
   d
   a
   t
   e
   , d
   e
   s
   t
   r
   o
   y
   : d
   e
   s
   t
   r
   o
   y
   }
   ;
   

   View Slide

10. REST API - JSON 'VIEWS'
    

    View Slide

11. REST API - JSON 'VIEWS'
    /
    / *
    *
    * c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    s
    /
    m
    e
    e
    t
    u
    p
    .
    j
    s *
    *
    * /
    /
    v
    a
    r _ = r
    e
    q
    u
    i
    r
    e
    (
    '
    l
    o
    d
    a
    s
    h
    '
    )
    ,
    m
    e
    e
    t
    u
    p
    s
    ;
    m
    e
    e
    t
    u
    p
    s = [
    { i
    d
    : '
    f
    a
    0
    1
    '
    , l
    a
    b
    e
    l
    : '
    J
    s
    Z
    g
    b M
    e
    e
    t
    u
    p N
    o
    .
    1
    '
    , d
    a
    t
    e
    : '
    2
    0
    1
    3
    -
    1
    1
    -
    0
    6
    ' }
    ,
    { i
    d
    : '
    c
    d
    0
    2
    '
    , l
    a
    b
    e
    l
    : '
    J
    s
    Z
    g
    b M
    e
    e
    t
    u
    p N
    o
    .
    2
    '
    , d
    a
    t
    e
    : '
    2
    0
    1
    3
    -
    1
    2
    -
    0
    4
    ' }
    ,
    { i
    d
    : '
    a
    b
    0
    3
    '
    , l
    a
    b
    e
    l
    : '
    J
    s
    Z
    g
    b M
    e
    e
    t
    u
    p N
    o
    .
    3
    '
    , d
    a
    t
    e
    : '
    T
    B
    A
    ' }
    ]
    ;
    /
    / .
    .
    .
    

    View Slide

12. REST API - JSON 'VIEWS'
    /
    / *
    *
    * c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    s
    /
    m
    e
    e
    t
    u
    p
    .
    j
    s *
    *
    * /
    /
    f
    u
    n
    c
    t
    i
    o
    n i
    n
    d
    e
    x
    (
    r
    e
    q
    , r
    e
    s
    ) {
    r
    e
    s
    .
    s
    e
    n
    d
    (
    m
    e
    e
    t
    u
    p
    s
    )
    ;
    }
    ;
    f
    u
    n
    c
    t
    i
    o
    n s
    h
    o
    w
    (
    r
    e
    q
    , r
    e
    s
    ) {
    v
    a
    r i
    d = p
    a
    r
    s
    e
    I
    n
    t
    (
    r
    e
    q
    .
    p
    a
    r
    a
    m
    s
    .
    i
    d
    , 1
    0
    )
    , m
    e
    e
    t
    u
    p = _
    .
    f
    i
    n
    d
    (
    m
    e
    e
    t
    u
    p
    s
    , { i
    d
    : i
    d }
    )
    ;
    r
    e
    s
    .
    s
    e
    n
    d
    (
    m
    e
    e
    t
    u
    p
    )
    ;
    }
    ;
    /
    / .
    .
    .
    /
    / #
    #
    # E
    x
    p
    o
    s
    e f
    r
    o
    m t
    h
    e m
    o
    d
    u
    l
    e
    m
    o
    d
    u
    l
    e
    .
    e
    x
    p
    o
    r
    t
    s = {
    i
    n
    d
    e
    x
    : i
    n
    d
    e
    x
    , s
    h
    o
    w
    : s
    h
    o
    w
    /
    / .
    .
    .
    }
    ;
    

    View Slide

13. REST API - JSON 'VIEWS'
    API ERRORS
    /
    / *
    *
    * c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    s
    /
    s
    o
    m
    e
    C
    o
    n
    t
    r
    o
    l
    l
    e
    r
    .
    j
    s *
    *
    * /
    /
    f
    u
    n
    c
    t
    i
    o
    n i
    n
    d
    e
    x
    (
    r
    e
    q
    , r
    e
    s
    ) {
    r
    e
    s
    .
    s
    e
    n
    d
    (
    2
    0
    0
    , m
    e
    e
    t
    u
    p
    s
    )
    ; /
    / e
    v
    e
    r
    y
    t
    h
    i
    n
    g O
    K
    }
    ;
    f
    u
    n
    c
    t
    i
    o
    n s
    h
    o
    w
    (
    r
    e
    q
    , r
    e
    s
    ) {
    r
    e
    s
    .
    s
    e
    n
    d
    (
    4
    0
    4
    , "
    S
    o
    r
    r
    y
    , c
    a
    n
    '
    t f
    i
    n
    d y
    o
    u
    r m
    e
    e
    t
    u
    p
    "
    )
    ;
    }
    ;
    f
    u
    n
    c
    t
    i
    o
    n c
    r
    e
    a
    t
    e
    (
    r
    e
    q
    , r
    e
    s
    ) {
    r
    e
    s
    .
    s
    e
    n
    d
    (
    5
    0
    0
    , { e
    r
    r
    o
    r
    : "
    O
    h
    , m
    y g
    o
    d
    ! O
    u
    r D
    B i
    s o
    n f
    i
    r
    e
    !
    " }
    )
    ;
    }
    ;
    f
    u
    n
    c
    t
    i
    o
    n d
    e
    s
    t
    r
    o
    y
    (
    r
    e
    q
    , r
    e
    s
    ) {
    r
    e
    s
    .
    s
    e
    n
    d
    (
    4
    0
    3
    , { e
    r
    r
    o
    r
    : "
    D
    u
    d
    e
    , d
    o
    n
    '
    t y
    o
    u d
    a
    r
    e
    !
    " }
    )
    ;
    }
    ;
    

    View Slide

14. HTML VIEWS
    jade (Express default)
    not bundled, npm install:
    $ s
    u
    d
    o n
    p
    m i
    n
    s
    t
    a
    l
    l j
    a
    d
    e -
    -
    s
    a
    v
    e
    

    View Slide

15. HTML VIEWS
    JADE - CONFIG
    /
    / *
    *
    * M
    a
    i
    n s
    e
    r
    v
    e
    r
    .
    j
    s *
    *
    * /
    /
    /
    / .
    .
    .
    a
    p
    p
    .
    c
    o
    n
    f
    i
    g
    u
    r
    e
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    /
    / .
    .
    .
    a
    p
    p
    .
    s
    e
    t
    (
    "
    v
    i
    e
    w
    s
    "
    , _
    _
    d
    i
    r
    n
    a
    m
    e + "
    /
    v
    i
    e
    w
    s
    "
    )
    ; /
    / v
    i
    e
    w
    s d
    i
    r
    a
    p
    p
    .
    s
    e
    t
    (
    '
    v
    i
    e
    w e
    n
    g
    i
    n
    e
    '
    , '
    j
    a
    d
    e
    '
    )
    ; /
    / r
    e
    g
    . d
    e
    f
    a
    u
    l
    t v
    i
    e
    w e
    x
    t
    e
    n
    s
    i
    o
    n
    /
    / .
    .
    .
    }
    )
    ;
    /
    / .
    .
    .
    a
    p
    p
    .
    l
    i
    s
    t
    e
    n
    (
    3
    0
    0
    0
    )
    ;
    

    View Slide

16. HTML VIEWS
    OTHER ENGINE - CONFIG
    /
    / *
    *
    * M
    a
    i
    n s
    e
    r
    v
    e
    r
    .
    j
    s *
    *
    * /
    /
    /
    / .
    .
    .
    a
    p
    p
    .
    c
    o
    n
    f
    i
    g
    u
    r
    e
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    /
    / .
    .
    .
    /
    / #
    #
    # r
    e
    g
    i
    s
    t
    e
    r a
    n
    d s
    e
    t u
    p a
    n
    o
    t
    h
    e
    r v
    i
    e
    w e
    n
    g
    i
    n
    e
    ; (
    n
    p
    m i
    n
    s
    t
    a
    l
    l i
    t b
    e
    f
    o
    r
    e
    !
    !
    )
    a
    p
    p
    .
    e
    n
    g
    i
    n
    e
    (
    '
    h
    t
    m
    l
    '
    , r
    e
    q
    u
    i
    r
    e
    (
    '
    l
    o
    d
    a
    s
    h
    i
    n
    e
    x
    p
    r
    e
    s
    s
    '
    )
    .
    _
    _
    e
    x
    p
    r
    e
    s
    s
    )
    ;
    a
    p
    p
    .
    s
    e
    t
    (
    "
    v
    i
    e
    w
    s
    "
    , _
    _
    d
    i
    r
    n
    a
    m
    e + "
    /
    v
    i
    e
    w
    s
    "
    )
    ; /
    / v
    i
    e
    w
    s d
    i
    r
    a
    p
    p
    .
    s
    e
    t
    (
    '
    v
    i
    e
    w e
    n
    g
    i
    n
    e
    '
    , '
    h
    t
    m
    l
    '
    )
    ; /
    / r
    e
    g
    . d
    e
    f
    a
    u
    l
    t v
    i
    e
    w e
    x
    t
    e
    n
    s
    i
    o
    n
    /
    / .
    .
    .
    }
    )
    ;
    /
    / .
    .
    .
    a
    p
    p
    .
    l
    i
    s
    t
    e
    n
    (
    3
    0
    0
    0
    )
    ;
    

    View Slide

17. A WORD ON VIEW ENGINES
    

    View Slide

18. ;
    JAVASCRIPT ZAGREB
    | |
    @zladuric @tomislavcapan @jszgb
    

    View Slide