Give a second change to Rails frontend!

Oh, the shenanigans in the front-end community lately! It's hard to say if they are caused by the "fatigue or enlightenment" from JavaScript, but one thing is clear — front-end development is ahead of the curve, devouring everything in its path.

At the same time, web projects are business as usual. Rails' approach to front-end development is hopelessly outdated: building assets via Sprockets is slow, uncomfortable and inflexible.

In my talk, I will touch base on the current state of front-end development and speak about acute Rails assets building problems. We'll have an insight into modern build systems, such as Webpack, Gulp, Brunch and Rollup — and into how does one integrate them with the Rails ecosystem, through real-world examples.

The talk is intended for back-end and front-end developers, and may also be useful for project managers with an interest in improving their software development process.

Transcript

1. Give a second chance
   to Rails frontend!
   

   View Slide

2. theseguys.io
   · Uses Rails, React, Ember.js
   · Worked in Smartomato and Evil Martians
   Who is Alexey Taktarov?
   · Code Hipsters community and ficus.io
   · Now one of These Guys, working on resume.io
   

   View Slide

3. resume.io
   

   View Slide

4. View Slide

5. View Slide

6. Famous record setter Sir Malcom Campbell with a Bugatti in a garage setting,
   http://theoldmotor.com/
   Sprockets —
   is a traditional way
   to build assets in Rails
   

   View Slide

7. 1962 Porsche 804, https://iedeiblog.com
   build
   speed
   1 Tired of waiting 4s until
   page is refreshed
   

   View Slide

8. An electrical engineering course from the 1970's, https://engineering.lafayette.edu/150th/
   dependency
   management
   2
   

   View Slide

9. |-- vendor
   `-- assets
   |-- javascripts
   |-- cookie.js
   |-- fontfaceobserver.js
   |-- imagesloaded.js
   `-- uri.js
   

   View Slide

10. |-- vendor
    `-- assets
    |-- javascripts
    |-- cookie.js
    |-- fontfaceobserver.js
    |-- imagesloaded.js
    `-- uri.js
    Gemfile
    jquery-rails
    

    View Slide

11. > rails-assets.org
    

    View Slide

12. H. G. J. Moseley in the Balliol-Trinity Laboratories, Oxford, 1910. http://akkadium.com/
    What about require order?
    How do I include images/fonts?
    Is it scalable?
    

    View Slide

13. Hewlett-Packard Archive, http://www.hparchive.com/
    limited access to
    modern frontend tools
    3
    

    View Slide

14. NY Central Railroad c.1910, Public Domain
    FRONTEND
    inevitable
    is
    

    View Slide

15. Everybody is tired of JavaScript…
    This weekend I wanted to make a feather app with the service
    worker containing the logic and virtual DOM inside. First day
    I was looking for a library which computes diffs and makes
    patching separately, the second day I was fighting Rollup and
    Buble making a conclusion that I cannot avoid Webpack no
    matter how much I wanted to.
    Victor Suzdalev · Code Hipsters
    

    View Slide

16. source medium.com
    

    View Slide

17. fatigue
    source medium.com
    

    View Slide

18. React
    VirtualDOM Babel
    Webpack
    Promise
    ES2016 ServiceWorker
    fetch module bundler
    NPM yarn
    tree shaking
    async/await Redux
    isomorphic web app
    Flow
    GraphQL
    ble Immut
    TypeS
    deco
    s
    

    View Slide

19. Ybor cigar rollers ply their craft c.1920, Public Domain
    Build the right
    hype-chain!
    

    View Slide

20. <%= react_component('HelloMessage', name: 'John') %>
    React Rails react-rails ̣ 3,505
    㱺
    

    View Slide

21. <%= react_component('HelloMessage', name: 'John') %>
    React Rails react-rails ̣ 3,505
    㱺
    Ember Rails ember-rails ̣ 1,384
    㱺
    

    View Slide

22. React Redux react-redux-rails
    Rails 㱺
    A Rails wrapper for the react-redux React
    wrapper for redux
    <%= react_component('HelloMessage', name: 'John') %>
    React Rails react-rails ̣ 3,505
    㱺
    Ember Rails ember-rails ̣ 1,384
    㱺
    

    View Slide

23. Direct integrations are usually useless
    http://www.laboiteverte.fr/
    

    View Slide

24. They don’t scale well
    and make everything complicated
    http://www.laboiteverte.fr/
    

    View Slide

25. –Johnny Appleseed
    Watchmen, copyright DC Comics
    Treat JavaScript as a
    first-class citizen!
    

    View Slide

26. Package manager
    bower, npm, yarn
    Tests and test-runners
    mocha, karma …
    Linters
    eslint, stylelint …
    Builders and module bundlers
    Grunt, Gulp, Brocolli, Brunch, Webpack …
    

    View Slide

27. JS
    JS JS
    CSS
    PNG
    CSS JS JS
    WOFF
    https://frontend.center/
    Webpack
    

    View Slide

28. JS
    JS JS
    CSS
    PNG
    CSS JS JS
    WOFF
    https://frontend.center/
    Webpack
    

    View Slide

29. JS
    JS JS
    CSS
    PNG
    CSS JS JS
    WOFF
    https://frontend.center/
    Webpack
    it can load everything,
    just write a loader
    

    View Slide

30. C C
    A B
    C
    A B
    Commons Chunk
    Extraction
    

    View Slide

31. C C
    A B
    C
    A B
    Commons Chunk
    Extraction
    C
    A
    B
    Hot Module
    Replacement
    C
    A
    B C*
    A
    B
    C
    

    View Slide

32. C C
    A B
    C
    A B
    Commons Chunk
    Extraction
    C
    A
    B
    Hot Module
    Replacement
    C
    A
    B C*
    A
    B
    C
    A
    Code
    Splitting
    A
    B C
    A
    B
    async
    require.ensure
    async
    require.ensure
    

    View Slide

33. https://mountainx.com
    Hammers in the Mountain, 1900
    How to use it
    in Rails project
    

    View Slide

34. webpack-dev-server
    

    View Slide

35. webpack-dev-server
    manifest.json
    Build status, errors and
    entry points
    plugin, e.g.
    webpack-stats-plugin
    

    View Slide

36. Rails
    Is everything ok?
    <%= webpack_include_tag %>
    webpack-dev-server
    manifest.json
    

    View Slide

37. Rails
    Cool! http://localhost:3535/
    <%= webpack_include_tag %>
    webpack-dev-server
    manifest.json
    

    View Slide

38. # public
    # `-- webpack
    # |-- application-14dc232d.js
    # `-- manifest.json
    def webpack_asset_paths(bundle)
    manifest = Manifest.load
    if manifest.build_errors?
    # ... show build errors
    end
    if Rails.env.production?
    # ~> public/webpack/application-14dc232d.js
    manifest.path_for(bundle)
    else
    # ~> http://localhost:3808/webpack/application.js
    manifest.dev_server_path_for(bundle)
    end
    end
    

    View Slide

39. Use any other module bundler Webpack
    Brunch
    Gulp
    Rollup
    Broccoli
    

    View Slide

40. Texas, 1939
    Public Domain
    Your frontend guy
    feels at home
    You can use webpack-rails or
    homemade solution
    (like Evil Martians do)
    

    View Slide

41. monolithic SPA
    sometimes it’s hard to maintain it
    

    View Slide

42. multiple entry points
    Webpack allows to use global
    dependencies through expose loader
    Use Commons Chunk extraction to
    reduce file sizes
    

    View Slide

43. «Old School»
    just use the right convention
    

    View Slide

44. |-- javascripts
    |-- components
    | |-- top-bar.js.es6
    | |-- trix-editor.js.es6
    | ...
    `-- views
    |-- account-view.js.es6
    |-- contact-view.js.es6
    ...
    

    View Slide

45. class AccountView {
    constructor (el) {
    this.rootEl = el
    // listen for events
    }
    handleLogoClick (event) {
    // ...
    }
    }
    document.addEventListener('DOMContentLoaded', () => {
    const viewEl = document.querySelector('.account-view')
    if (viewEl) {
    const view = new AccountView(viewEl)
    }
    })
    

    View Slide

46. Chinatown by Roman Polanski
    tools you use should be
    simple and understandable
    choose them based on team
    size and the budget
    frontend = first-class
    citizen
    

    View Slide

47. View Slide

48. Rails 5.1 now
    supports Webpack
    and Yarn!
    

    View Slide

49. |-- app
    |-- front
    | |-- src
    | | `-- application.js
    | `-- webpack.config.js
    |-- node_modules
    `-- package.json
    localhost:3808/webpack/application.js
    |-- app
    | - packs
    | |-- editor.js
    | `-- payment.js
    |-- config
    | - webpack.config.js
    |-- public
    | - packs
    | |-- editor.js
    | `-- payment.js
    `-- vendor
    |-- node_modules
    `-- package.json
    rails/webpacker resume.io
    RAILS_ENV=development
    

    View Slide

50. rails/webpacker resume.io
    RAILS_ENV=production
    |-- app
    | - packs
    | |-- editor.js
    | `-- payment.js
    |-- config
    | - webpack.config.js
    |-- public
    | - packs
    | |-- editor-8c3423.js
    | `-- payment-f92348.js
    `-- vendor
    |-- node_modules
    `-- package.json
    |-- app
    |-- front
    | |-- src
    | | `-- application.js
    | `-- webpack.config.js
    |-- node_modules
    |-- package.json
    `-- public
    `-- webpack
    |-- application-087e34.js
    `-- manifest.json
    

    View Slide

51. References
    github.com/mipearson/webpack-rails
    frontend.center
    rails-assets.org
    github.com/rails/webpacker
    Contact
    github.com/molefrog
    ficus.io
    resume.io
    theseguys.io
    сodehipsters.com
    hot!
    !
    

    View Slide