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.

01bf97df3784afa10fc2b561e251a41c?s=128

Alexey Taktarov

October 22, 2016
Tweet

Transcript

  1. Give a second chance to Rails frontend!

  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
  3. resume.io

  4. None
  5. None
  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
  7. 1962 Porsche 804, https://iedeiblog.com build speed 1 Tired of waiting

    4s until page is refreshed
  8. An electrical engineering course from the 1970's, https://engineering.lafayette.edu/150th/ dependency management

    2
  9. |-- vendor `-- assets |-- javascripts |-- cookie.js |-- fontfaceobserver.js

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

    |-- imagesloaded.js `-- uri.js Gemfile jquery-rails
  11. > rails-assets.org

  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?
  13. Hewlett-Packard Archive, http://www.hparchive.com/ limited access to modern frontend tools 3

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

  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
  16. source medium.com

  17. fatigue source medium.com

  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
  19. Ybor cigar rollers ply their craft c.1920, Public Domain Build

    the right hype-chain!
  20. <%= react_component('HelloMessage', name: 'John') %> React Rails react-rails ̣ 3,505

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

    㱺 Ember Rails ember-rails ̣ 1,384 㱺
  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 㱺
  23. Direct integrations are usually useless http://www.laboiteverte.fr/

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

  25. –Johnny Appleseed Watchmen, copyright DC Comics Treat JavaScript as a

    first-class citizen!
  26. Package manager bower, npm, yarn Tests and test-runners mocha, karma

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

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

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

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

  31. C C A B C A B Commons Chunk Extraction

    C A B Hot Module Replacement C A B C* A B C
  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
  33. https://mountainx.com Hammers in the Mountain, 1900 How to use it

    in Rails project
  34. webpack-dev-server

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

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

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

  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
  39. Use any other module bundler Webpack Brunch Gulp Rollup Broccoli

  40. Texas, 1939 Public Domain Your frontend guy feels at home

    You can use webpack-rails or homemade solution (like Evil Martians do)
  41. monolithic SPA sometimes it’s hard to maintain it

  42. multiple entry points Webpack allows to use global dependencies through

    expose loader Use Commons Chunk extraction to reduce file sizes
  43. «Old School» just use the right convention

  44. |-- javascripts |-- components | |-- top-bar.js.es6 | |-- trix-editor.js.es6

    | ... `-- views |-- account-view.js.es6 |-- contact-view.js.es6 ...
  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) } })
  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
  47. None
  48. Rails 5.1 now supports Webpack and Yarn!

  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
  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
  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! !