Rails with Webpack

Using Webpack to build a JavaScript heavy application with Rails

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