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

More Decks by Alexey Taktarov

Other Decks in Programming


  1. 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
  2. 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
  3. |-- vendor `-- assets |-- javascripts |-- cookie.js |-- fontfaceobserver.js

    |-- imagesloaded.js `-- uri.js Gemfile jquery-rails
  4. 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?
  5. 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
  6. 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
  7. 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 㱺
  8. Package manager bower, npm, yarn Tests and test-runners mocha, karma

    … Linters eslint, stylelint … Builders and module bundlers Grunt, Gulp, Brocolli, Brunch, Webpack …
  9. JS JS JS CSS PNG CSS JS JS WOFF https://frontend.center/

    Webpack it can load everything, just write a loader
  10. C C A B C A B Commons Chunk Extraction

    C A B Hot Module Replacement C A B C* A B C
  11. 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
  12. # 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
  13. Texas, 1939 Public Domain Your frontend guy feels at home

    You can use webpack-rails or homemade solution (like Evil Martians do)
  14. multiple entry points Webpack allows to use global dependencies through

    expose loader Use Commons Chunk extraction to reduce file sizes
  15. |-- javascripts |-- components | |-- top-bar.js.es6 | |-- trix-editor.js.es6

    | ... `-- views |-- account-view.js.es6 |-- contact-view.js.es6 ...
  16. 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) } })
  17. 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
  18. |-- 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
  19. 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