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