The Front-end is Omakase

"Rails is omakase." DHH's classic 2012 blog post is still great reading in 2025. Here's a quote from the article that sums up his main point:

"A team of chefs picked out the ingredients, designed the APIs, and arranged the order of consumption on your behalf according to their idea of what would make for a tasty full-stack framework."

Right! And we have all benefitted enormously from the Rails core team sharing those tastes with the rest of us. The ingredients and API design decisions he's referring to fit the shape of a great deal of the web applications we might want to build. Just as we trust the omakase chef to serve a great unagi and sake pairing, we lean on the years of industry experience baked into Rails to build web applications with fewer resources.

If Rails and the Rails philosophy are omakase, the front-end world is the opposite: "okonomi," meaning "choosing what to order." Rather than picking a set of technologies, smart defaults, and conventions on your behalf, most front-end frameworks and tools expect the developer to cobble together a bunch of tools that were not necessarily designed to work with one another. The decision points are endless: Typescript or Javascript? Vite, webpack, or importmaps? SASS or Less? PostCSS or dart-sass? Tailwind, Bootstrap, or Bulma? BEM, SMACSS, OOCSS, CUBE, or HECS? Maybe CSS modules? And what about React, Vue, Angular, Svelte, or HTMX? The list goes on and on.

In my opinion, Rails needs an omakase front-end. We need a set of strong front-end opinions like we have on the back-end. This talk is an attempt at expressing my opinions around the front-end.

Transcript

1. THE FRONT-END IS OMAKASE CAMERON C. DUTRO
4. 2018 232 2019 311 2020 603 2021 616 YEAR CONTRIBUTIONS GRAPH 2022 1,045 △ 79 △ 292 △ 13 🔥 △ 429 Birth of first daughter Birth of second daughter
5. - LEONARDO DA VINCI “ART LIVES FROM CONSTRAINTS AND DIES FROM FREEDOM.”
6. • Temperature f luctuations • Fuel e ff iciency and storage • Aerodynamics • Wing design CONCORDE SUPERSONIC JET
7. • 72 kilobytes of memory • Hand-woven wire for additional storage • Paper punch cards • Failure-tolerant • Never experienced a catastrophic failure during f light operations APOLLO 11 MISSION FLIGHT COMPUTER
8. - MARGARET HAMILTON “THERE WAS NO CHOICE BUT TO BE PIONEERS.”
10. - DAVID HEINEMEIER HANSSON “A TEAM OF CHEFS PICKED OUT THE INGREDIENTS, DESIGNED THE APIS, AND ARRANGED THE ORDER OF CONSUMPTION ON YOUR BEHALF ACCORDING TO THEIR IDEA OF WHAT WOULD MAKE FOR A TASTY FULL-STACK FRAMEWORK.”
11. - WIKIPEDIA OMAKASE (お任せ): “I’LL LEAVE IT UP TO YOU”
13. FOLDER STRUCTURE FRAMEWORKS • ACTIVE RECORD • ACTIVE JOB • ACTION MAILER • ACTION CABLE MINITEST
14. STIMULUS KAMAL THRUSTER SQLITE
15. JS FINALLY GETS IT
16. - LUCA CASONATO, CHANGELOG EPISODE 509 (OCTOBER 7TH, 2022) "...ONE OF THE CORE IDEAS OF DENO [IS] TO HAVE THIS WHOLE BATTERIES-INCLUDED RUNTIME ... AND A MILLION OTHER THINGS ... ALL IN THE SAME BINARY, MAINTAINED BY THE SAME PEOPLE, WITH THE SAME OPINIONS, TO SORT OF GIVE YOU A COHESIVE EXPERIENCE."
17. - LUCA CASONATO, CHANGELOG EPISODE 509 (OCTOBER 7TH, 2022) “ONCE YOU’VE USED IT, YOU REALIZE HOW MUCH TIME IT SAVES YOU, BY NOT HAVING TO MAKE ALL THESE DECISIONS, BUT HAVE SOMEONE ELSE MAKE THE DECISIONS FOR YOU.”
18. WHAT IS A FRAMEWORK? A SERIES OF DECISIONS MADE FOR YOU
19. THE OPPOSITE OF A FRAMEWORK? WHERE YOU MAKE ALL THE DECISIONS
20. - WIKIPEDIA OKONOMI (お好み): “HOW YOU LIKE IT”
22. You don't want to include DOM types in your Node library? Well now you just disabled the import of @types! Wanna use ES6 imports? Yeah suddenly it doesn't work because somewhere down the node_modules tree some package uses commonjs requires. All the solutions are some old answers on stackover fl ow that don't apply anymore or don't work”
24. POPULAR FRAMEWORK STARTER KITS FRONT-END DEPENDENCIES • create-next-app: 64 • create-react-router: 285 • create-rwsdk (redwood.js) : 478 • create-react-app: 1,343 🤯
25. HEAVIEST OBJECTS IN THE UNIVERSE
26. FRONT-END DECISIONS IN 2025 • npm, yarn (1.x or berry?), or pnpm? • bun, esbuild, rollup, or webpack? Maybe importmaps? • tailwind, bootstrap, bulma, postcss, or dart-sass? • TypeScript or plain JavaScript? • BEM, SMACSS, OOCSS, CUBE, or HECS? CSS modules? • React, Vue, Angular, Svelte, Solid, Stencil, or Lit? • HTMX? Inertia?
27. 16,800 POSSIBLE PERMUTATIONS
28. PROBLEMS • Decision points are endless • Cryptic build failures • Tools are often not designed to work together • Debugging process is copy/paste to StackOver f low or ask an LLM • Upgrading is nearly impossible
29. RAILS FRONT-END EVOLUTION 2004-2011 STATIC FILES <= RAILS 3.1
30. RAILS FRONT-END EVOLUTION 2004-2011 STATIC FILES <= RAILS 3.1 2011 SPROCKETS RAILS 3.2
31. RAILS FRONT-END EVOLUTION 2004-2011 STATIC FILES <= RAILS 3.1 2011 SPROCKETS RAILS 3.2 2014 OPTIONAL WEBPACK RAILS 5.1
32. RAILS FRONT-END EVOLUTION 2004-2011 STATIC FILES <= RAILS 3.1 2011 SPROCKETS RAILS 3.2 2014 OPTIONAL WEBPACK RAILS 5.1 2019 DEFAULT WEBPACK RAILS 6.0
33. RAILS FRONT-END EVOLUTION 2004-2011 STATIC FILES <= RAILS 3.1 2011 SPROCKETS RAILS 3.2 2014 OPTIONAL WEBPACK RAILS 5.1 2019 DEFAULT WEBPACK RAILS 6.0
34. RAILS FRONT-END EVOLUTION 2019 DEFAULT WEBPACK RAILS 6.0 2021 CSSBUNDLING JSBUNDLING IMPORTMAPS PROPSHAFT RAILS 7.0 2024 OKONOMI RAILS 8.0 🚨🤯
35. 🚨🤯 RAILS FRONT-END EVOLUTION 2019 DEFAULT WEBPACK RAILS 6.0 2021 CSSBUNDLING JSBUNDLING IMPORTMAPS PROPSHAFT RAILS 7.0 2024 OKONOMI RAILS 8.0 TAILWIND BOOTSTRAP BULMA POSTCSS SASS BUN ESBUILD ROLLUP WEBPACK
36. RAILS’ FRONT-END STORY COULD BE MORE COHESIVE.
37. AND WHY SHOULD WE LISTEN TO HIM? WHO IS THIS GUY? • Cameron C. Dutro • Co-maintainer (sort of) of the ViewComponent framework • Worked on GitHub’s Primer team, speci f ically primer/view_components • Author of rux and several complex View Components • Attempted to write a Ruby interpreter in TypeScript • I have lots of front-end opinions
39. GO WITH THESE TOOLS FOR A BETTER TIME • Use npm • Use a build system • Use Vite • Use PostCSS and BEM • Use TypeScript • Use Web Components, Stimulus, and Hotwire
40. AVOID THESE TOOLS FOR A BETTER TIME • Don’t use importmaps • Don’t use webpack • Don’t use a JavaScript framework
41. NPM • It’s OG • It’s good now (no, really) • Yarn 1.x is basically unmaintained • Bad experiences with yarn 2+
42. BUILD SYSTEM • #NoBuild is cool, but we aren’t there yet • You need a build system • Maybe one day we can use importmaps for real
44. VITE • Esbuild in development, Rollup in production. • Esbuild is extremely fast, makes development super nice. • Rollup is slower, but battle-tested for prod. • Love yourself. Use Vite.
46. POSTCSS • Industry-standard at this point • Rich plugin ecosystem (if you need it) • Rails generator con f igures: • Imports • Nesting • Auto-pre f ixing • You really don’t need SASS/SCSS anymore
47. TYPESCRIPT • Don’t listen to DHH: TypeScript is wonderful • It works out-of-the-box with vite • Just use a .js extension to opt-out per- f ile • Enjoy the power of types
48. HOTWIRE, STIMULUS, WEB COMPONENTS • The Rails Way™ • No extra dependencies • Less bloat than frameworks • Don’t take over the whole page • Leverage the web platform
49. YOU PROBABLY DON’T NEED A JAVASCRIPT FRAMEWORK.
50. - ALEX RUSSELL “TO SERVE USERS AT THE 75TH PERCENTILE OF DEVICES AND NETWORKS, WE CAN NOW AFFORD ~150KIB OF HTML/CSS/FONTS AND ~300-350KIB OF JAVASCRIPT” Source: https://infrequently.org/2022/12/performance-baseline-2023/
51. JAVASCRIPT BLOAT • Zoom: 6MB • Patreon: 11MB • Gitlab: 13MB • Instagram: 16MB • LinkedIn: 31MB • JIRA: 50MB Source: https://tonsky.me/blog/js-bloat/
53. - ALEX RUSSELL “FRAMEWORKISM ISN'T DELIVERING. THE ANSWER ISN'T A DIFFERENT TOOL, IT'S THE COURAGE TO DO ENGINEERING.” Source: https://infrequently.org/2024/11/if-not-react-then-what/
54. THE BOTTOM LINE • Use npm, Vite, PostCSS, Typescript, and Rails defaults • Avoid React, etc unless you actually need it • Do engineering
55. THE VELOUR GEM • Rails generator that bootstraps an omakase front-end setup for your app • Installs Vite (via vite_rails) and PostCSS (via cssbundling-rails) • Creates tscon f ig.json to con f igure Typescript • Installs Overmind (a better version of foreman) • Creates a better bin/dev script with a --debug option • Installs all JavaScript packages using npm
56. THE VELOUR GEM • https://github.com/camertron/velour • Work in progress! • Want to make the front-end even more omakase? Sumit a PR!
59. THANK YOU!