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

Modern front-end with the eyes of a PHP developer - Dutch PHP Conference 2014

Modern front-end with the eyes of a PHP developer - Dutch PHP Conference 2014

Unless you're lucky (?) enough to work with PHP only, chances there that you deal also with HTML, CSS, and JavaScript. In the wild, PHP developers are supposed to know and be proficient at front-end too. For this reason, we should stay up-to-date and efficient in this field. Front-end is heavily changed in the last 2 years due to the introduction and the growth of tools like Grunt, Bower and Yeoman.

In this talk, you'll discover what they are and how they can help you to enhance your workflow, paying attention to highlight the similarities and the differences with their task-related PHP software.

Aurelio De Rosa

June 28, 2014
Tweet

More Decks by Aurelio De Rosa

Other Decks in Programming

Transcript

  1. MODERN FRONT-END WITH THE EYES OF A
    PHP DEVELOPER
    Aurelio De Rosa
    Amsterdam, Netherlands - 28 June 2014

    View Slide

  2. ABOUT ME
    (THE MOST BORING PART OF THE TALK!)

    View Slide

  3. WEB & APP DEVELOPER
    Previously employed at the University of Salerno,
    I'm now self-employed.

    View Slide

  4. PROJECTS I'VE CONTRIBUTED TO
    ...
    jQuery
    CanIUse
    PureCSS

    View Slide

  5. WRITE ARTICLES FOR

    View Slide

  6. AUTHORED BOOKS
    JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS
    (Shameless self-promotion!)

    View Slide

  7. QUESTIONS TIME!

    View Slide

  8. HOW MANY FULL-STACK
    DEVELOPERS?

    View Slide

  9. HOW MANY KNOW
    JAVASCRIPT?

    View Slide

  10. LET'S START!

    View Slide

  11. WE

    View Slide

  12. BUT...

    View Slide

  13. PEOPLE EXPECT HIGHLY INTERACTIVE
    WEBSITES

    View Slide

  14. WEB ≅ PHP + HTML + CSS + JS

    View Slide

  15. View Slide

  16. LUCKY ?

    View Slide

  17. GOAL
    Compare PHP tools with front-end tools to understand the latter
    faster

    View Slide

  18. LET THE UPGRADE BEGIN!

    View Slide

  19. A TYPICAL PROJECT
    f
    o
    r (
    i = 0
    ; i < n
    ; i
    +
    +
    ) {
    /
    / C
    o
    d
    e h
    e
    r
    e
    }

    View Slide

  20. A TYPICAL PROJECT
    SCAFFOLD DEVELOP TEST BUILD

    View Slide

  21. DEPENDENCIES
    MANAGEMENT

    View Slide

  22. UNLESS YOUR PROJECT
    LOOKS LIKE
    <
    ?
    p
    h
    p
    e
    c
    h
    o '
    H
    e
    l
    l
    o w
    o
    r
    l
    d
    !
    '
    ;
    ?
    >

    View Slide

  23. COMPOSER
    https://getcomposer.org

    View Slide

  24. DEPENDENCY MANAGER
    FOR PHP

    View Slide

  25. PACKAGES
    1. Zend Framework
    2. Simfony
    3. Doctrine
    4. Twig
    5. Monolog
    6. Swift Mailer
    7. PHPUnit
    8. Guzzle
    9. Components for these projects
    10. ...

    View Slide

  26. BOWER

    View Slide

  27. A PACKAGE MANAGER
    FOR THE WEB

    View Slide

  28. PACKAGES
    1. jQuery
    2. jQuery UI
    3. Normalize.css
    4. Reset.css
    5. Bootstrap
    6. Angular.js
    7. HTML5 Boilerplate
    8. Backbone.js
    9. Plugins for these projects
    10. ...

    View Slide

  29. View Slide

  30. SOUNDS FAMILIAR...

    View Slide

  31. View Slide

  32. LIMITATIONS
    Only main libraries and frameworks
    Almost no plugins
    Not the right tool for the job™

    View Slide

  33. DEPENDECY MANAGER: PHP VS JS & CSS
    Feature Composer Bower
    Config.
    format
    JSON JSON
    Dependency
    Package
    website
    Folder vendor bower_components
    Package
    structure
    v
    e
    n
    d
    o
    r
    /
    p
    r
    o
    j
    e
    c
    t p
    r
    o
    j
    e
    c
    t
    Main
    commands
    i
    n
    s
    t
    a
    l
    l
    , u
    p
    d
    a
    t
    e
    ,
    s
    e
    a
    r
    c
    h
    i
    n
    s
    t
    a
    l
    l
    , u
    p
    d
    a
    t
    e
    ,
    s
    e
    a
    r
    c
    h
    PHP Node.js
    Packagist Bower

    View Slide

  34. DEVELOPMENT

    View Slide

  35. WEB UI

    View Slide

  36. HAVE YOU HEARD OF
    /
    (
    S
    A
    |
    L
    E
    )
    S
    S
    /
    ?

    View Slide

  37. WTF IS THIS?

    View Slide

  38. BASIC EXAMPLE (SASS)
    /
    * S
    a
    s
    s *
    /
    $
    f
    o
    n
    t
    -
    s
    t
    a
    c
    k
    : H
    e
    l
    v
    e
    t
    i
    c
    a
    , s
    a
    n
    s
    -
    s
    e
    r
    i
    f
    $
    g
    r
    e
    e
    n
    : #
    7
    5
    B
    7
    3
    C
    $
    r
    e
    d
    : #
    F
    D
    5
    B
    5
    5
    b
    o
    d
    y
    f
    o
    n
    t
    : 1
    0
    0
    % $
    f
    o
    n
    t
    -
    s
    t
    a
    c
    k
    c
    o
    l
    o
    r
    : $
    g
    r
    e
    e
    n
    p
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    -
    c
    o
    l
    o
    r
    : $
    g
    r
    e
    e
    n
    c
    o
    l
    o
    r
    : $
    r
    e
    d
    /
    * C
    o
    m
    p
    i
    l
    e
    d C
    S
    S *
    /
    b
    o
    d
    y {
    f
    o
    n
    t
    : 1
    0
    0
    % H
    e
    l
    v
    e
    t
    i
    c
    a
    , s
    a
    n
    s
    -
    s
    e
    r
    i
    f
    ;
    c
    o
    l
    o
    r
    : #
    7
    5
    b
    7
    3
    c
    ;
    }
    p {
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    -
    c
    o
    l
    o
    r
    : #
    7
    5
    b
    7
    3
    c
    ;
    c
    o
    l
    o
    r
    : #
    f
    d
    5
    b
    5
    5
    ;
    }

    View Slide

  39. WEB UI

    View Slide

  40. WHAT ABOUT THE
    (FRONT-END) BUSINESS
    LOGIC?

    View Slide

  41. BUSINESS LOGIC

    View Slide

  42. DID YOU SAY TEST ?

    View Slide

  43. CODE STYLE
    PHP CODE SNIFFER
    $ p
    h
    p
    c
    s -
    s /
    p
    a
    t
    h
    /
    t
    o
    /
    c
    o
    d
    e
    /
    m
    y
    f
    i
    l
    e
    .
    p
    h
    p
    F
    I
    L
    E
    : /
    p
    a
    t
    h
    /
    t
    o
    /
    c
    o
    d
    e
    /
    m
    y
    f
    i
    l
    e
    .
    p
    h
    p
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    F
    O
    U
    N
    D 5 E
    R
    R
    O
    R
    (
    S
    ) A
    N
    D 1 W
    A
    R
    N
    I
    N
    G
    (
    S
    ) A
    F
    F
    E
    C
    T
    I
    N
    G 5 L
    I
    N
    E
    (
    S
    )
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    2 | E
    R
    R
    O
    R | M
    i
    s
    s
    i
    n
    g f
    i
    l
    e d
    o
    c c
    o
    m
    m
    e
    n
    t (
    P
    E
    A
    R
    .
    C
    o
    m
    m
    e
    n
    t
    i
    n
    g
    .
    F
    i
    l
    e
    C
    o
    m
    m
    e
    n
    t
    )
    2
    0 | E
    R
    R
    O
    R | P
    H
    P k
    e
    y
    w
    o
    r
    d
    s m
    u
    s
    t b
    e l
    o
    w
    e
    r
    c
    a
    s
    e
    ; e
    x
    p
    e
    c
    t
    e
    d "
    f
    a
    l
    s
    e
    " b
    u
    t f
    o
    u
    n
    d
    | | "
    F
    A
    L
    S
    E
    " (
    G
    e
    n
    e
    r
    i
    c
    .
    P
    H
    P
    .
    L
    o
    w
    e
    r
    C
    a
    s
    e
    C
    o
    n
    s
    t
    a
    n
    t
    )
    4
    7 | E
    R
    R
    O
    R | L
    i
    n
    e n
    o
    t i
    n
    d
    e
    n
    t
    e
    d c
    o
    r
    r
    e
    c
    t
    l
    y
    ; e
    x
    p
    e
    c
    t
    e
    d 4 s
    p
    a
    c
    e
    s b
    u
    t f
    o
    u
    n
    d 1
    | | (
    P
    E
    A
    R
    .
    W
    h
    i
    t
    e
    S
    p
    a
    c
    e
    .
    S
    c
    o
    p
    e
    I
    n
    d
    e
    n
    t
    )
    4
    7 | W
    A
    R
    N
    I
    N
    G | E
    q
    u
    a
    l
    s s
    i
    g
    n n
    o
    t a
    l
    i
    g
    n
    e
    d w
    i
    t
    h s
    u
    r
    r
    o
    u
    n
    d
    i
    n
    g a
    s
    s
    i
    g
    n
    m
    e
    n
    t
    s
    | | (
    G
    e
    n
    e
    r
    i
    c
    .
    F
    o
    r
    m
    a
    t
    t
    i
    n
    g
    .
    M
    u
    l
    t
    i
    p
    l
    e
    S
    t
    a
    t
    e
    m
    e
    n
    t
    A
    l
    i
    g
    n
    m
    e
    n
    t
    )
    5
    1 | E
    R
    R
    O
    R | M
    i
    s
    s
    i
    n
    g f
    u
    n
    c
    t
    i
    o
    n d
    o
    c c
    o
    m
    m
    e
    n
    t
    | | (
    P
    E
    A
    R
    .
    C
    o
    m
    m
    e
    n
    t
    i
    n
    g
    .
    F
    u
    n
    c
    t
    i
    o
    n
    C
    o
    m
    m
    e
    n
    t
    )
    8
    8 | E
    R
    R
    O
    R | L
    i
    n
    e n
    o
    t i
    n
    d
    e
    n
    t
    e
    d c
    o
    r
    r
    e
    c
    t
    l
    y
    ; e
    x
    p
    e
    c
    t
    e
    d 9 s
    p
    a
    c
    e
    s b
    u
    t f
    o
    u
    n
    d 6
    | | (
    P
    E
    A
    R
    .
    W
    h
    i
    t
    e
    S
    p
    a
    c
    e
    .
    S
    c
    o
    p
    e
    I
    n
    d
    e
    n
    t
    )
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    View Slide

  44. CODE STYLE
    PSR-1 AND PSR-2

    View Slide

  45. CODE QUALITY
    PHP MESS DETECTOR
    $ p
    h
    p
    m
    d . t
    e
    x
    t c
    o
    d
    e
    s
    i
    z
    e
    ,
    u
    n
    u
    s
    e
    d
    c
    o
    d
    e
    /
    s
    r
    c
    /
    b
    a
    s
    e
    /
    M
    o
    d
    e
    l
    .
    p
    h
    p
    :
    7
    5 T
    h
    e m
    e
    t
    h
    o
    d _
    _
    t
    o
    A
    r
    r
    a
    y
    (
    ) h
    a
    s a C
    y
    c
    l
    o
    m
    a
    t
    i
    c C
    o
    m
    p
    l
    e
    x
    i
    t
    y
    o
    f 1
    2
    . T
    h
    e c
    o
    n
    f
    i
    g
    u
    r
    e
    d c
    y
    c
    l
    o
    m
    a
    t
    i
    c c
    o
    m
    p
    l
    e
    x
    i
    t
    y t
    h
    r
    e
    s
    h
    o
    l
    d i
    s 1
    0
    .
    /
    s
    r
    c
    /
    c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    /
    U
    s
    e
    r
    s
    .
    p
    h
    p
    :
    2
    3
    5 A
    v
    o
    i
    d u
    n
    u
    s
    e
    d p
    a
    r
    a
    m
    e
    t
    e
    r
    s s
    u
    c
    h a
    s '
    $
    r
    e
    q
    u
    e
    s
    t
    '
    .
    /
    s
    r
    c
    /
    c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    /
    U
    s
    e
    r
    s
    .
    p
    h
    p
    :
    2
    4
    6 A
    v
    o
    i
    d u
    n
    u
    s
    e
    d l
    o
    c
    a
    l v
    a
    r
    i
    a
    b
    l
    e
    s s
    u
    c
    h a
    s '
    $
    x
    '
    .
    /
    s
    r
    c
    /
    c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    /
    U
    s
    e
    r
    s
    .
    p
    h
    p
    :
    2
    4
    6 A
    v
    o
    i
    d u
    n
    u
    s
    e
    d l
    o
    c
    a
    l v
    a
    r
    i
    a
    b
    l
    e
    s s
    u
    c
    h a
    s '
    $
    t
    e
    s
    t
    '
    .
    /
    s
    r
    c
    /
    b
    a
    s
    e
    /
    C
    o
    n
    t
    r
    o
    l
    l
    e
    r
    .
    p
    h
    p U
    n
    e
    x
    p
    e
    c
    t
    e
    d t
    o
    k
    e
    n
    : [
    , l
    i
    n
    e
    : 8
    8
    , c
    o
    l
    : 5
    6
    , f
    i
    l
    e
    :
    /
    s
    r
    c
    /
    b
    a
    s
    e
    /
    C
    o
    n
    t
    r
    o
    l
    l
    e
    r
    .
    p
    h
    p
    .

    View Slide

  46. UNIT TESTING
    PHPUNIT
    p
    h
    p
    u
    n
    i
    t -
    -
    v
    e
    r
    b
    o
    s
    e D
    e
    p
    e
    n
    d
    e
    n
    c
    y
    F
    a
    i
    l
    u
    r
    e
    T
    e
    s
    t
    P
    H
    P
    U
    n
    i
    t 3
    .
    7
    .
    0 b
    y S
    e
    b
    a
    s
    t
    i
    a
    n B
    e
    r
    g
    m
    a
    n
    n
    .
    F
    S
    T
    i
    m
    e
    : 0 s
    e
    c
    o
    n
    d
    s
    , M
    e
    m
    o
    r
    y
    : 5
    .
    0
    0
    M
    b
    T
    h
    e
    r
    e w
    a
    s 1 f
    a
    i
    l
    u
    r
    e
    :
    1
    ) D
    e
    p
    e
    n
    d
    e
    n
    c
    y
    F
    a
    i
    l
    u
    r
    e
    T
    e
    s
    t
    :
    :
    t
    e
    s
    t
    O
    n
    e
    F
    a
    i
    l
    e
    d a
    s
    s
    e
    r
    t
    i
    n
    g t
    h
    a
    t f
    a
    l
    s
    e i
    s t
    r
    u
    e
    .
    /
    h
    o
    m
    e
    /
    s
    b
    /
    D
    e
    p
    e
    n
    d
    e
    n
    c
    y
    F
    a
    i
    l
    u
    r
    e
    T
    e
    s
    t
    .
    p
    h
    p
    :
    6
    T
    h
    e
    r
    e w
    a
    s 1 s
    k
    i
    p
    p
    e
    d t
    e
    s
    t
    :
    1
    ) D
    e
    p
    e
    n
    d
    e
    n
    c
    y
    F
    a
    i
    l
    u
    r
    e
    T
    e
    s
    t
    :
    :
    t
    e
    s
    t
    T
    w
    o
    T
    h
    i
    s t
    e
    s
    t d
    e
    p
    e
    n
    d
    s o
    n "
    D
    e
    p
    e
    n
    d
    e
    n
    c
    y
    F
    a
    i
    l
    u
    r
    e
    T
    e
    s
    t
    :
    :
    t
    e
    s
    t
    O
    n
    e
    " t
    o p
    a
    s
    s
    .
    F
    A
    I
    L
    U
    R
    E
    S
    !
    T
    e
    s
    t
    s
    : 1
    , A
    s
    s
    e
    r
    t
    i
    o
    n
    s
    : 1
    , F
    a
    i
    l
    u
    r
    e
    s
    : 1
    , S
    k
    i
    p
    p
    e
    d
    : 1
    .

    View Slide

  47. TESTING: PHP VS JAVASCRIPT
    Type PHP JavaScript
    Code style
    Code quality
    Unit testing
    PHP Code Sniffer JSLint
    PHP Mess Detector JSHint
    PHPUnit QUnit
    Other libraries worth looking at: , ,
    Mocha Jasmine Phantom.js

    View Slide

  48. EXAMPLE JSLINT (CODE)
    f
    u
    n
    c
    t
    i
    o
    n P
    e
    r
    s
    o
    n
    (
    n
    a
    m
    e
    , s
    u
    r
    n
    a
    m
    e
    ) {
    v
    a
    r n
    a
    m
    e = n
    a
    m
    e
    ;
    _
    s
    u
    r
    n
    a
    m
    e = s
    u
    r
    n
    a
    m
    e
    ;
    f
    u
    n
    c
    t
    i
    o
    n p
    r
    i
    n
    t
    N
    a
    m
    e
    (
    )
    {
    r
    e
    t
    u
    r
    n n
    a
    m
    e + ' ' + s
    u
    r
    n
    a
    m
    e
    ;
    }
    }

    View Slide

  49. EXAMPLE JSLINT (RESULTS)
    M
    i
    s
    s
    i
    n
    g '
    u
    s
    e s
    t
    r
    i
    c
    t
    ' s
    t
    a
    t
    e
    m
    e
    n
    t
    .
    v
    a
    r n
    a
    m
    e = n
    a
    m
    e
    ;
    l
    i
    n
    e 2 c
    h
    a
    r
    a
    c
    t
    e
    r 9 '
    n
    a
    m
    e
    ' i
    s a
    l
    r
    e
    a
    d
    y d
    e
    f
    i
    n
    e
    d
    .
    v
    a
    r n
    a
    m
    e = n
    a
    m
    e
    ;
    l
    i
    n
    e 2 c
    h
    a
    r
    a
    c
    t
    e
    r 1
    6 '
    n
    a
    m
    e
    ' u
    s
    e
    d o
    u
    t o
    f s
    c
    o
    p
    e
    .
    v
    a
    r n
    a
    m
    e = n
    a
    m
    e
    ;
    l
    i
    n
    e 3 c
    h
    a
    r
    a
    c
    t
    e
    r 5 U
    n
    e
    x
    p
    e
    c
    t
    e
    d d
    a
    n
    g
    l
    i
    n
    g '
    _
    ' i
    n '
    _
    s
    u
    r
    n
    a
    m
    e
    '
    .
    _
    s
    u
    r
    n
    a
    m
    e = s
    u
    r
    n
    a
    m
    e
    ;
    l
    i
    n
    e 3 c
    h
    a
    r
    a
    c
    t
    e
    r 5 '
    _
    s
    u
    r
    n
    a
    m
    e
    ' w
    a
    s u
    s
    e
    d b
    e
    f
    o
    r
    e i
    t w
    a
    s d
    e
    f
    i
    n
    e
    d
    .
    _
    s
    u
    r
    n
    a
    m
    e = s
    u
    r
    n
    a
    m
    e
    ;
    l
    i
    n
    e 6 c
    h
    a
    r
    a
    c
    t
    e
    r 5 E
    x
    p
    e
    c
    t
    e
    d e
    x
    a
    c
    t
    l
    y o
    n
    e s
    p
    a
    c
    e b
    e
    t
    w
    e
    e
    n '
    )
    ' a
    n
    d '
    {
    '
    .
    {
    l
    i
    n
    e 7 c
    h
    a
    r
    a
    c
    t
    e
    r 6 E
    x
    p
    e
    c
    t
    e
    d '
    r
    e
    t
    u
    r
    n
    ' a
    t c
    o
    l
    u
    m
    n 1
    3
    , n
    o
    t c
    o
    l
    u
    m
    n 6
    .
    r
    e
    t
    u
    r
    n n
    a
    m
    e + ' ' + s
    u
    r
    n
    a
    m
    e
    ;
    l
    i
    n
    e 8 c
    h
    a
    r
    a
    c
    t
    e
    r 5 E
    x
    p
    e
    c
    t
    e
    d '
    }
    ' a
    t c
    o
    l
    u
    m
    n 9
    , n
    o
    t c
    o
    l
    u
    m
    n 5
    .
    }

    View Slide

  50. EXAMPLE JSHINT (CODE)
    f
    u
    n
    c
    t
    i
    o
    n (
    p
    a
    r
    a
    m
    ) {
    v
    a
    r m
    y
    A
    r
    r
    a
    y = n
    e
    w A
    r
    r
    a
    y
    (
    )
    ;
    m
    y
    O
    b
    j = n
    e
    w O
    b
    j
    e
    c
    t
    (
    )
    ;
    i
    f (
    p
    a
    r
    a
    m =
    = n
    u
    l
    l
    ) {
    r
    e
    t
    u
    r
    n n
    u
    l
    l
    ;
    }
    f
    o
    r
    (
    v
    a
    r i = 0
    ; i < l
    .
    l
    e
    n
    g
    t
    h
    ; i
    +
    +
    ) {
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    {
    /
    / D
    o s
    o
    m
    e
    t
    h
    i
    n
    g
    .
    .
    .
    }
    )
    (
    )
    ;
    }
    }

    View Slide

  51. EXAMPLE JSHINT (RESULTS)
    M
    e
    t
    r
    i
    c
    s
    T
    h
    e
    r
    e a
    r
    e 2 f
    u
    n
    c
    t
    i
    o
    n
    s i
    n t
    h
    i
    s f
    i
    l
    e
    .
    F
    u
    n
    c
    t
    i
    o
    n w
    i
    t
    h t
    h
    e l
    a
    r
    g
    e
    s
    t s
    i
    g
    n
    a
    t
    u
    r
    e t
    a
    k
    e 1 a
    r
    g
    u
    m
    e
    n
    t
    s
    , w
    h
    i
    l
    e t
    h
    e m
    e
    d
    i
    a
    n i
    s 0
    .
    5
    .
    L
    a
    r
    g
    e
    s
    t f
    u
    n
    c
    t
    i
    o
    n h
    a
    s 6 s
    t
    a
    t
    e
    m
    e
    n
    t
    s i
    n i
    t
    , w
    h
    i
    l
    e t
    h
    e m
    e
    d
    i
    a
    n i
    s 3
    .
    T
    h
    e m
    o
    s
    t c
    o
    m
    p
    l
    e
    x f
    u
    n
    c
    t
    i
    o
    n h
    a
    s a c
    y
    c
    l
    o
    m
    a
    t
    i
    c c
    o
    m
    p
    l
    e
    x
    i
    t
    y v
    a
    l
    u
    e o
    f 3 w
    h
    i
    l
    e t
    h
    e m
    e
    d
    i
    a
    n i
    s 2
    .
    F
    i
    v
    e w
    a
    r
    n
    i
    n
    g
    s
    1 M
    i
    s
    s
    i
    n
    g n
    a
    m
    e i
    n f
    u
    n
    c
    t
    i
    o
    n d
    e
    c
    l
    a
    r
    a
    t
    i
    o
    n
    .
    2 T
    h
    e a
    r
    r
    a
    y l
    i
    t
    e
    r
    a
    l n
    o
    t
    a
    t
    i
    o
    n [
    ] i
    s p
    r
    e
    f
    e
    r
    a
    b
    l
    e
    .
    3 T
    h
    e o
    b
    j
    e
    c
    t l
    i
    t
    e
    r
    a
    l n
    o
    t
    a
    t
    i
    o
    n {
    } i
    s p
    r
    e
    f
    e
    r
    a
    b
    l
    e
    .
    4 U
    s
    e '
    =
    =
    =
    ' t
    o c
    o
    m
    p
    a
    r
    e w
    i
    t
    h '
    n
    u
    l
    l
    '
    .
    1
    0 D
    o
    n
    '
    t m
    a
    k
    e f
    u
    n
    c
    t
    i
    o
    n
    s w
    i
    t
    h
    i
    n a l
    o
    o
    p
    .
    T
    w
    o u
    n
    d
    e
    f
    i
    n
    e
    d v
    a
    r
    i
    a
    b
    l
    e
    s
    3 m
    y
    O
    b
    j
    7 l
    T
    w
    o u
    n
    u
    s
    e
    d v
    a
    r
    i
    a
    b
    l
    e
    s
    1 u
    n
    d
    e
    f
    i
    n
    e
    d
    2 m
    y
    A
    r
    r
    a
    y

    View Slide

  52. EXAMPLE QUNIT (CODE)
    f
    u
    n
    c
    t
    i
    o
    n i
    s
    E
    v
    e
    n
    (
    v
    a
    l
    ) {
    r
    e
    t
    u
    r
    n v
    a
    l % 2 =
    =
    = 0
    ;
    }
    t
    e
    s
    t
    (
    '
    i
    s
    E
    v
    e
    n
    (
    )
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    o
    k
    (
    i
    s
    E
    v
    e
    n
    (
    0
    )
    , '
    Z
    e
    r
    o i
    s e
    v
    e
    n
    '
    )
    ;
    o
    k
    (
    i
    s
    E
    v
    e
    n
    (
    2
    )
    , '
    S
    o i
    s t
    w
    o
    '
    )
    ;
    o
    k
    (
    !
    i
    s
    E
    v
    e
    n
    (
    1
    )
    , '
    O
    n
    e i
    s n
    o
    t e
    v
    e
    n
    '
    )
    ;
    o
    k
    (
    !
    i
    s
    E
    v
    e
    n
    (
    7
    )
    , '
    S
    e
    v
    e
    n i
    s n
    o
    t e
    v
    e
    n
    '
    )
    ;
    o
    k
    (
    i
    s
    E
    v
    e
    n
    (
    3
    )
    , '
    T
    h
    r
    e
    e i
    s e
    v
    e
    n
    '
    )
    ;
    }
    )

    View Slide

  53. EXAMPLE QUNIT (RESULTS)

    View Slide

  54. BUILD

    View Slide

  55. BUILD (BACKEND)
    1. Configure
    2. Move / Copy / Rename files
    3. Test
    4. (Optional) Package
    5. Deploy

    View Slide

  56. SO BORING...

    View Slide

  57. AUTOMATION

    View Slide

  58. PHING
    http://www.phing.info

    View Slide

  59. A BUILD TOOL BASED ON ​
    APACHE ANT

    View Slide

  60. FRONT-END ISN'T MUCH
    DIFFERENT...

    View Slide

  61. BUILD (FRONT-END)
    1. Test JavaScript
    2. (Optional) Compile Sass or Less
    3. Concatenate CSS and JavaScript
    4. Minify CSS, JavaScript and HTML
    5. Create sprites of images
    6. Optimize images
    7. (Optional) Other project's specific tasks
    8. Deploy

    View Slide

  62. FRONT-END TOOLS
    Grunt.js
    Gulp.js
    Broccoli
    Brunch
    And much, much more...

    View Slide

  63. View Slide

  64. A TASK RUNNER FOR
    JAVASCRIPT

    View Slide

  65. AUTOMATION: PHING VS GRUNT
    Feature Phing Grunt
    Scope Build Develop + Build
    Config.
    format
    XML JavaScript
    Installation
    Config. file build.xml Gruntfile.js
    Terminology Target, Task,
    Property
    Target, Task,
    Property
    PEAR npm

    View Slide

  66. MOST USED TASKS
    ...
    grunt-contrib-clean
    grunt-contrib-copy
    grunt-contrib-concat
    grunt-contrib-cssmin
    grunt-contrib-csslint
    grunt-contrib-watch
    grunt-uncss
    grunt-contrib-jshint
    grunt-contrib-uglify
    grunt-contrib-imagemin
    grunt-contrib-htmlmin

    View Slide

  67. GRUNT WATCH IS FOR

    View Slide

  68. GRUNT WATCH IS FOR

    View Slide

  69. GRUNT UNCSS CAN DO

    View Slide

  70. EXAMPLE 1 - CONCAT
    g
    r
    u
    n
    t
    .
    i
    n
    i
    t
    C
    o
    n
    f
    i
    g
    (
    {
    c
    o
    n
    c
    a
    t
    : {
    d
    i
    s
    t
    : {
    s
    r
    c
    : [
    '
    s
    r
    c
    /
    f
    i
    r
    s
    t
    .
    j
    s
    '
    ,
    '
    s
    r
    c
    /
    s
    e
    c
    o
    n
    d
    .
    j
    s
    '
    ,
    '
    s
    r
    c
    /
    t
    h
    i
    r
    d
    .
    j
    s
    '
    ]
    ,
    d
    e
    s
    t
    : '
    d
    i
    s
    t
    /
    b
    u
    i
    l
    t
    .
    j
    s
    '
    }
    }
    }
    )
    ;

    View Slide

  71. EXAMPLE 2 - UGLIFY
    g
    r
    u
    n
    t
    .
    i
    n
    i
    t
    C
    o
    n
    f
    i
    g
    (
    {
    u
    g
    l
    i
    f
    y
    : {
    d
    i
    s
    t {
    f
    i
    l
    e
    s
    : {
    '
    d
    e
    s
    t
    /
    o
    u
    t
    p
    u
    t
    .
    m
    i
    n
    .
    j
    s
    '
    : [
    '
    s
    r
    c
    /
    i
    n
    p
    u
    t
    1
    .
    j
    s
    '
    ,
    '
    s
    r
    c
    /
    i
    n
    p
    u
    t
    2
    .
    j
    s
    '
    ]
    }
    }
    }
    }
    )
    ;

    View Slide

  72. I HAVE ASSETIC!

    View Slide

  73. CONSIDERATIONS
    You're mixing different environments (will you lint your JS via
    PHP ?)
    It doesn't come with all you need (e.g. the YUI compressor)
    Several filters aren't from the official vendors (e.g. JSLint)
    Several filters are just wrapper for Node.js modules (e.g.
    JSHint)
    Front-end engineers have less control over the process
    ...and they should understand PHP
    Make harder to optmize performance (multiple places to look)

    View Slide

  74. ME...SOMETIMES

    View Slide

  75. LESSON:
    DON'T USE THINGS THAT PRETEND TO BE
    OTHERS

    View Slide

  76. IT'S NOT ALL ABOUT
    BUILDING TOOLS

    View Slide

  77. SCAFFOLDING

    View Slide

  78. PHP ECOSYSTEM HAS
    LIMITS

    View Slide

  79. 1 FRAMEWORK
    =
    1 SCAFFOLDING SYSTEM
    Not valid for all the frameworks

    View Slide

  80. JAVASCRIPT ECOSYSTEM
    HAS MOVED A STEP
    FORWARD

    View Slide

  81. YO

    View Slide

  82. CLI TOOL FOR
    SCAFFOLDING

    View Slide

  83. SETUP A PROJECT USING
    GENERATORS

    View Slide

  84. GENERATORS
    ...
    WebApp
    Ember
    Angular.js
    Backbone
    Chrome-extension
    jQuery (plugin)
    Cordova
    BUT ALSO...

    View Slide

  85. GENERATORS
    ...
    Symfony 2
    WordPress
    Magento
    Phalcon
    Laravel
    Slim

    View Slide

  86. View Slide

  87. CREATE A WEB APP IN 4
    STEPS WITH YO
    1. Install
    2. $ n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g y
    o
    3. $ n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g g
    e
    n
    e
    r
    a
    t
    o
    r
    -
    w
    e
    b
    a
    p
    p
    4. $ y
    o w
    e
    b
    a
    p
    p
    Node.js
    DONE!

    View Slide

  88. View Slide

  89. HEY, WHAT HAPPENED
    TO THAT
    YEO...SOMETHING ?

    View Slide

  90. YEOMAN

    View Slide

  91. A WORKFLOW MADE OF

    View Slide

  92. View Slide

  93. CONCLUSIONS
    Front-end has become complex
    ...but tools can help us
    Scaffold with Yo
    Manage dependencies with Bower
    Test and build with Grunt

    View Slide

  94. PHP!

    View Slide

  95. YEOMAN!

    View Slide

  96. THE WEB!

    View Slide

  97. THANK YOU!

    View Slide

  98. QUESTIONS?

    View Slide

  99. CONTACTS
    Website:
    Email:
    Twitter:
    www.audero.it
    [email protected]
    @AurelioDeRosa

    View Slide