Rails off assets pipeline

Introduce why we should deprecate assets pipeline and how to integrate webpack with your current rails app.

Transcript

1. Rails off Asset Pipeline Florian, Senior Backend Engineer @ Strikingly @fdutey
2. Quick poll • Rails application? • Using Assets Pipeline? • Not satisfied?
3. History
4. Server-side Rendering + Simple JavaScript
5. Rails Asset Pipeline • Added in Rails 3.1 (2011) • Based on Sprockets (Assets joiner for Rack)
6. Benefits • Introduce some FE good practices in BE world • Deliver a single Javascript file per page • CSS + JS minifying and image sprites • Promote compilers (less, coffee, sass…) • Very simple
7. Today
8. Client-side rendering + data API
9. • Multiple clients, single API • Web is just ONE client • Front End is (very) complex
10. Asset Pipeline Today
11. Humans behind technology
12. Dependencies
14. NPM
15. Bundles
18. CommonJS
20. Cross-pipelines references
23. What about?
24. From Assets pipeline to Module Bundler
25. Module bundlers • Broccolijs (Ember-cli default) • Gulp • Grunt • Webpack • …
26. Webpack
27. Webpack • Can do what asset pipeline does • Support modular JavaScript • Fully integrated with NPM • Even more …
28. Migrating recipe • Put your new sources in a different spot • Setup npm and webpack • Move Javascript + Images • Move CSS + Images
29. Setting up NPM + Webpack
31. webpack.config.js
32. package.json (npm)
33. Moving Javascript
34. CommonJS • Each file is a module • A module need to explicitly declare what’s visible to other modules with “exports” • Others modules can access “exports” by using “require”
37. webpack.config.js
39. External dependencies
43. Images
44. It works!!!
49. CSS
54. Move externals into Webpack
59. Shrink Gemfile Best activity ever!
60. Get rid of asset pipeline
65. Short demo
66. What else? • Minifying (with easy control) • Bundles grow super big • Optimisation and introspection tools • Easy split code tools • Semi-automatic common chunks • Bunch of loaders for (almost) any type of file
67. Recap • Rails • Good for prototyping • Good to discover FE good practices • Doesn’t fit for large javascript applications • Looked production-ready in 2011 because server- side rendering technology is very limited • Front end world • Solves its own problems :)
68. I didn’t talk about • Bower (enhanced dependencies management) • React (last FE revolution from Facebook) • ES2015 (coffeescript replacement) • Babel (ES2015 + Jsx compiler)
69. Q & A /strikingly/rails-webpack-starter/
70. ᨀᨀ!