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

Give a second change to Rails frontend!

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.

Alexey Taktarov

October 22, 2016
Tweet

More Decks by Alexey Taktarov

Other Decks in Programming

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