Modern Ruby on Rails 8 Frontend - Overview for Efficient Web Development of Rails Applications
In the evolving landscape of Ruby on Rails, the introduction of Rails 7 and 8 features—such as Hotwire’s Turbo and Stimulus—has made building highly interactive, SPA-like applications more accessible than ever. With Tailwind CSS providing rapid UI development and minimal JavaScript overhead, Rails developers are well-equipped to deliver dynamic, responsive front ends while preserving the comfort and power of a Rails-first stack.
Yet, as you plan the architecture of a Rails 8 application, a critical decision emerges: How do you structure your views? Whether you use services of a Ruby on Rails development company or have an in-house Rails team, this question is essential for establishing an efficient and easily maintainable architecture for the whole project.
This article examines three popular approaches—traditional ERB templates, ViewComponent, and Phlex—against the backdrop of Tailwind CSS styling, Stimulus controllers, and Hotwire for interactivity. Our goal is to help you find the right fit for building a modern, maintainable, and responsive Rails 8 application with as many native Rails functionalities as possible.
Table of Contents
The Changing Face of Rails Views. What Tools Does Rails 8 Offer for Efficient Web Development?
Rails historically relied on ERB for templating, enabling developers to mix Ruby and HTML for rapid prototyping. While this approach is tried-and-true, modern demands—component-based UI patterns, rich interactivity without heavy JavaScript frameworks, and scalable front-end architectures—have prompted the community to rethink how we build views.
Today, you have multiple tools at your disposal:
- ERB (Embedded Ruby): The default, time-tested templating approach.
- ViewComponent: A component-based architecture by GitHub that sits nicely within the Rails ecosystem.
- Phlex: A newer, Ruby-DSL-driven technique for writing views as code rather than templates.
We’ll explore how each option fits when building a highly interactive Rails 8 application using Tailwind CSS, Stimulus, and Hotwire.
ERB: The Familiar Backbone for Modern Webdev
What is ERB?
ERB intersperses Ruby code directly into your HTML via <%= ... %> and <% ... %> tags. It’s the standard Rails approach—simple, ubiquitous, and supported by a vast ecosystem.
Advantages of using ERB
- Familiarity: Every Rails developer starts here. No additional gems or learning curves are required.
- Straightforward integration: Tailwind classes can be dropped directly into your <div> tags; Stimulus and Turbo frames can be integrated just as easily.
- Fast prototyping: Ideal for early-stage MVPs or smaller projects where developer familiarity and speed matter most.
Cons of using ERB
- Complexity and bloat: As your app grows, large ERB templates become hard to read, maintain, and test. It’s easy to blend presentation and logic.
- Difficult refactoring: Reusing UI patterns often leads to partials, which can reduce repetition but still lack a true component architecture.
When to use ERB?
Choose ERB if you want the most straightforward, fastest route from zero to a working SPA-like Rails app, and your team is comfortable managing complexity through disciplined coding patterns.
ViewComponent: Components, Tests, and a Railsy Approach
What is ViewComponent?
ViewComponent is a framework that brings component-driven architectures to Rails. Each UI element—like a card, button, or layout section—lives in its own Ruby class and template file, enabling testable, encapsulated, and reusable UI parts.
Pros of using ViewComponent
- Modularity and reusability: Tailwind-based patterns (like frequently used utility class combos) can be wrapped into a single component, reducing duplication.
- Easy testing: Components are first-class objects, making it straightforward to write unit tests that ensure predictable rendering.
- Gradual adoption: You can rewrite complex partials as components incrementally, making it a smooth transition from raw ERB templates.
Cons of using ViewComponent
- Still uses ERB: Although more structured, you’re still writing template files. If you dislike mixing logic and markup, you may find this limiting.
- Mental overhead: Components introduce a new way of thinking about views. There’s a learning curve, but it’s gentler than that of a completely new DSL.
When to use ViewComponent?
Choose ViewComponent if you want a middle ground—retaining the familiar ERB templating style while adding structure, testability, and scalable patterns. It’s ideal when building larger apps or working with teams that want cleaner code without a steep departure from Rails norms.
Phlex: Views as Code, Not Templates
What is Phlex?
Phlex is a newer library that replaces templates with pure Ruby objects that generate HTML. Instead of writing HTML with embedded Ruby, you write Ruby methods that produce markup. This approach can yield component-based, testable, and flexible views that feel closer to building React components—except it’s all server-rendered with no extra JavaScript frameworks.
Pros of using Phlex
- All in Ruby: No separate template language to learn. Everything, including your UI elements, is expressed as code.
- Clear logic separation: Conditionals, loops, and complex logic are natural in pure Ruby. This can lead to cleaner, more maintainable code.
- Component-like structure: Phlex encourages a mental model similar to modern JavaScript frameworks, enabling your team to think in terms of composable UI elements.
Cons of using Phlex
- Learning curve: Switching from ERB to a DSL to generate HTML can be jarring.
- Integration with snippets: Copying and pasting Tailwind examples from the docs requires some adaptation to the Phlex DSL.
- Community maturity: Compared to Rails defaults or ViewComponent, Phlex has a smaller ecosystem and may have fewer established best practices.
When to use Phlex?
Choose Phlex if you crave the maintainability, modularity, and clarity of a code-driven approach, don’t mind a steeper learning curve, and are excited to embrace a more “React-like” style in a pure-Rails environment.
Tailwind, Stimulus, Hotwire, and Rails 8: The Perfect Combination to Add to Rails Stack of Your New Projects
Regardless of your view approach, Rails 8 plus Tailwind, Stimulus, and Hotwire set the stage for a truly modern experience:
- TailwindCSS: Rapidly build consistent, responsive interfaces by applying utility classes directly in your components.
- Stimulus: Add just enough JavaScript to enhance interactivity without leaving Rails’ ecosystem. Stimulus controllers attach behaviors to HTML elements, making it easy to handle clicks, hovers, and dynamic UI states.
- Hotwire (Turbo): Boost responsiveness and reduce page reloads by replacing certain JavaScript front-end frameworks. Turbo lets you deliver SPA-like interactions—navigating between pages, submitting forms, and updating partials—without writing a ton of custom JavaScript.
No matter which view layer you choose, these technologies amplify Rails’ server-rendered capabilities, making it easier than ever to build apps that feel modern and snappy.
Making the Choice of View Layer Approach for Modern Web Apps
Use cases for ERB
- Pros: Simple, immediate familiarity.
- Cons: It can become messy and harder to scale.
- Recommended for: Rapid prototypes, smaller teams, or when you value simplicity over structure.
Use cases for ViewComponent
- Pros: Encourages modularity and reusable patterns and maintains ERB comfort.
- Cons: It still relies on templates and partial ERB logic.
- Recommended for: Medium-to-large projects where maintainability and testability are increasingly important but the team wants to stay close to the Rails ecosystem.
Use cases for Phlex
- Pros: A fully Ruby-driven approach, clean logic separation, and component-like patterns.
- Cons: Larger learning curve, younger ecosystem.
- Recommended for: Teams comfortable experimenting with new paradigms and seeking maximum flexibility and clarity in the long run.
The Craft of Frontend Architecture for New Rails Projects
As Rails embraces new native capabilities, the choices for your view layer multiply. While ERB provides a familiar starting point, it can lead to complexity as your app and team scale. ViewComponent offers a structured, testable, and still-familiar way to embrace a component mindset. Phlex breaks from the traditional templating mold entirely, offering a code-driven approach that may resonate with developers from modern frontend frameworks.
By carefully evaluating your team’s goals, experience, and the complexity of your project, you can select a view approach that leverages the best of Rails 8, Tailwind CSS, Stimulus, and Hotwire. Whichever path you take, Rails remains a powerful, flexible, and enjoyable framework for building responsive, SPA-like applications—fully capitalizing on native Rails features to deliver delightful user experiences.
If you need experienced Rails 8 developers to kickstart your project, augment your in-house team, or develop software for you, contact us.
