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

Rails with Webpack

sporto
January 28, 2015

Rails with Webpack

Using Webpack to build a JavaScript heavy application with Rails

sporto

January 28, 2015
Tweet

More Decks by sporto

Other Decks in Technology

Transcript

  1. Rails with Webpack
    Sebastian Porto
    1 / 31

    View Slide

  2. The Assests Pipeline
    It is great for most Rails apps
    2 / 31

    View Slide

  3. The Assests Pipeline
    But not great for JS heavy apps
    3 / 31

    View Slide

  4. JS heavy applications
    Lots of JavaScript
    Multiple entry points
    Only include code we need on each point
    Complex dependecy tree
    4 / 31

    View Slide

  5. Dependency tree
    5 / 31

    View Slide

  6. Resolving a dependency complex tree
    Possible with the Assets Pipeline but ugly
    6 / 31

    View Slide

  7. Dependency tree: Sprockets
    In Sprockets manifest:
    /
    /
    = r
    e
    q
    u
    i
    r
    e o
    r
    d
    e
    r
    s
    /
    /
    = r
    e
    q
    u
    i
    r
    e u
    s
    e
    r
    s
    7 / 31

    View Slide

  8. Dependency tree: Sprockets
    The in JS:
    Globals
    /
    /
    = r
    e
    q
    u
    i
    r
    e l
    o
    a
    d
    e
    r
    A
    p
    p
    .
    O
    r
    d
    e
    r
    s = f
    u
    n
    c
    t
    i
    o
    n (
    ) { .
    .
    . }
    Or AMD
    /
    /
    = r
    e
    q
    u
    i
    r
    e l
    o
    a
    d
    e
    r
    r
    e
    q
    u
    i
    r
    e
    (
    [
    '
    l
    o
    a
    d
    e
    r
    '
    ]
    , f
    u
    n
    c
    t
    i
    o
    n (
    l
    o
    a
    d
    e
    r
    ) {
    .
    .
    .
    }
    ) 8 / 31

    View Slide

  9. Dependency tree: Sprockets
    /
    /
    = r
    e
    q
    u
    i
    r
    e l
    o
    a
    d
    e
    r
    r
    e
    q
    u
    i
    r
    e
    (
    [
    '
    l
    o
    a
    d
    e
    r
    '
    ]
    , f
    u
    n
    c
    t
    i
    o
    n (
    l
    o
    a
    d
    e
    r
    ) {
    .
    .
    .
    }
    )
    This is redundant coding == Hard to mantain
    9 / 31

    View Slide

  10. Wouldn’t it be nice to avoid this repetition?
    10 / 31

    View Slide

  11. What is Webpack?
    JavaScript module bundler
    11 / 31

    View Slide

  12. Webpack
    Bundle AMD, CommonJS, ES6 modules
    Resolves dependecies
    Create multiple bundles
    Loads about anything (CSS, images, fonts, …)
    12 / 31

    View Slide

  13. Webpack with Rails
    13 / 31

    View Slide

  14. Install Webpack with NPM
    n
    p
    m i
    n
    s
    t
    a
    l
    l w
    e
    b
    p
    a
    c
    k -
    g
    14 / 31

    View Slide

  15. Config file
    Specifies:
    entry points and output files
    loaders to use (e.g SASS, JSX, etc)
    15 / 31

    View Slide

  16. Write your code
    Using AMD, CommonJS or ES6
    v
    a
    r O
    r
    d
    e
    r
    s = r
    e
    q
    u
    i
    r
    e
    (
    '
    o
    r
    d
    e
    r
    s
    '
    )
    O
    r
    d
    e
    r
    s
    .
    d
    o
    S
    o
    m
    e
    t
    h
    i
    n
    g
    (
    .
    .
    .
    )
    16 / 31

    View Slide

  17. Watch
    w
    e
    b
    p
    a
    c
    k -
    -
    w
    a
    t
    c
    h
    17 / 31

    View Slide

  18. Add the bundles to the Rails assets
    18 / 31

    View Slide

  19. Require the bundles from Sprockets
    In orders.js
    /
    /
    = r
    e
    q
    u
    i
    r
    e c
    o
    m
    m
    o
    n
    -
    b
    u
    n
    d
    l
    e
    /
    /
    = r
    e
    q
    u
    i
    r
    e o
    r
    d
    e
    r
    s
    -
    b
    u
    n
    d
    l
    e
    19 / 31

    View Slide

  20. The Assets pipeline will fingerprint the JS in
    production
    But we get the benefits of using Webpack:
    Modular code
    Multiple bundles
    20 / 31

    View Slide

  21. Other benefits
    21 / 31

    View Slide

  22. Code is portable
    e.g. if we ever need to move our front-end to
    something else than Rails
    22 / 31

    View Slide

  23. Modularise all the things
    JS
    Images
    CSS / LESS / SASS
    Fonts
    23 / 31

    View Slide

  24. Better encapsulation of JS
    No Globals
    24 / 31

    View Slide

  25. Use NPM to manage FE dependencies
    With package.json
    If that appeals to you
    25 / 31

    View Slide

  26. Leverage the NPM echo system
    Easily load and use packages from there
    26 / 31

    View Slide

  27. Testing is way better
    With Rails you need to load the whole Env
    Gems like Konacha and Teaspoon help
    Slow
    27 / 31

    View Slide

  28. Testing is way better
    With Webpack you can use anything you want
    Jest, Buster, Karma, …
    Faster
    28 / 31

    View Slide

  29. Browserify?
    Mostly does the same
    Webpack = batteries included
    Browserify = Everything in plugins!
    29 / 31

    View Slide

  30. Thanks
    @sebasporto
    30 / 31

    View Slide

  31. 31 / 31

    View Slide