Js-bundling, css-bundling and propshaft

Slides from my talk at RoroSyd June 2022.

The demoonstration code is available at https://github.com/langsharpe/rails_bundling_example

Transcript

1. @LangSharpe - RoroSyd - 2022-06-28T08:00:00Z Js-bundling, css-bundling and propshaft
2. One of four options • Sprockets • Webpacker • Import maps • Bundling gems (this one) See "Guide to Rails 7 and the Asset Pipeline" by Breno Gazzola
3. Let's say your application contains... • Plain ES6 Javascript • Typescript • jQuery • Postcss plugins, like Autopre fi xer • Sass • Tailwind
4. ... you can create a solution from • Jsbundling-rails gem • Cssbundling-rails gem • Propshaft gem • Esbuild • Postcss • Sass, Tailwind etc.
5. After installing *bundling rails gems...
6. A new convention for assets • Two new processes to bundle js and css • Two scripts in package.json web: bin/rails server -p 3000 js: yarn build --watch css: yarn build:css --watch "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds", "build:css": "postcss --verbose ./app/assets/stylesheets/application.postcss.css -o ./ app/assets/builds/application.css" }
7. A new convention for assets • Bundlers read from /app/assets/stylesheets and /app/javascript • They output to /app/assets/builds • Nothing is happening with ruby or rails (yet) "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds", "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./ app/assets/builds/application.css --minify" }
8. <%= javascript_include_tag "application" %> <script src="/assets/application-f7a3ea23b6746875901557730d65dd62e0fd61d0.js"> Propshaft • Bundlers output to /app/assets/builds • Propshaft serves fi les from that directory
9. Demonstration
10. Benefits - Flexibility • Choice of many JS bundlers • Choice of many CSS bundlers
11. Benefits - Simplicity • Propshaft 633 lines of code • Jsbundling is 131 lines of code • Css bundling is 163 lines of code • Webpacker is 1363 lines of ruby + 1485 lines of js
12. Benefits - Separation • Separation of concerns • Clear place where ruby ends and js starts • JS and CSS pipelines are separate • Supported options other than webpack • Esbuild is a very fast JS bundler
13. Tradeoffs • Feature test support • No speci fi c support, remember to run manually • Propshaft has not reached v1.0.0 • It's used in production by Basecamp and others • You could replace it with sprockets • Documentation is lacking, maybe avoid if you are a beginner
14. @LangSharpe - RoroSyd - 2022-06-28T08:00:00Z Thank You! Any Questions?