view_component
A framework for building reusable, testable & encapsulated view components in Ruby on Rails.
Top Related Projects
A framework for building reusable, testable & encapsulated view components in Ruby on Rails.
View components for Ruby and Rails.
⚡ A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Ruby webapps
🐬 Beautiful, performant feature flags for Ruby.
Quick Overview
ViewComponent is a Ruby gem that provides a framework for building reusable, testable, and encapsulated UI components in Ruby on Rails applications. It allows developers to create modular, self-contained UI components that can be easily shared and reused across different parts of an application.
Pros
- Modular and Reusable: ViewComponent encourages the creation of modular, self-contained UI components that can be easily reused across different parts of an application.
- Testable: ViewComponent components are designed to be easily testable, which can improve the overall quality and maintainability of the application.
- Encapsulation: ViewComponent components encapsulate their own logic, HTML, and styling, which can help to improve the separation of concerns and make the codebase more organized.
- Integration with Rails: ViewComponent is designed to work seamlessly with Ruby on Rails, leveraging the existing Rails ecosystem and conventions.
Cons
- Learning Curve: Developers who are new to ViewComponent may need to invest some time in understanding the framework and its conventions, which can be a barrier to adoption.
- Overhead: The use of ViewComponent can add some overhead to the development process, as developers need to create and manage additional files and directories for their components.
- Potential Performance Impact: Depending on the complexity and number of ViewComponent components used in an application, there may be a performance impact that needs to be considered.
- Limited Ecosystem: Compared to some other UI component frameworks, the ViewComponent ecosystem is relatively small, which may limit the availability of pre-built components or third-party integrations.
Code Examples
Here are a few examples of how to use ViewComponent in a Ruby on Rails application:
- Creating a Basic Component:
# app/components/greeting_component.rb
class GreetingComponent < ViewComponent::Base
def initialize(name:)
@name = name
end
def render?
@name.present?
end
private
attr_reader :name
end
<!-- app/views/home/index.html.erb -->
<%= render(GreetingComponent.new(name: "John")) %>
- Passing Data to a Component:
# app/components/user_profile_component.rb
class UserProfileComponent < ViewComponent::Base
def initialize(user:)
@user = user
end
private
attr_reader :user
end
<!-- app/views/users/show.html.erb -->
<%= render(UserProfileComponent.new(user: @user)) %>
- Rendering a Collection of Components:
# app/components/post_list_component.rb
class PostListComponent < ViewComponent::Base
def initialize(posts:)
@posts = posts
end
private
attr_reader :posts
end
<!-- app/views/posts/index.html.erb -->
<%= render(PostListComponent.new(posts: @posts)) %>
Getting Started
To get started with ViewComponent in a Ruby on Rails application, follow these steps:
- Add the ViewComponent gem to your Gemfile:
gem 'view_component'
- Run the following command to install the gem:
bundle install
- Generate a new ViewComponent:
rails generate component GreetingComponent name:string
This will create a new file app/components/greeting_component.rb
with the following content:
class GreetingComponent < ViewComponent::Base
def initialize(name:)
@name = name
end
end
- Use the new component in your views:
<!-- app/views/home/index.html.erb -->
<%= render(GreetingComponent.new(name: "John")) %>
-
Customize the component as needed, adding logic, HTML, and styling.
-
Write tests for the component using the built-in testing utilities provided by ViewComponent.
Competitor Comparisons
A framework for building reusable, testable & encapsulated view components in Ruby on Rails.
Pros of view_component
- More actively maintained and updated
- Larger community and contributor base
- Better documentation and examples
Cons of view_component
- Potentially more complex due to additional features
- May have a steeper learning curve for beginners
Code Comparison
view_component:
class MyComponent < ViewComponent::Base
def initialize(title:)
@title = title
end
end
view_component:
class MyComponent < ViewComponent::Base
def initialize(title:)
@title = title
end
end
Summary
Both view_component and view_component are Ruby gems for building reusable, testable, and encapsulated view components in Rails applications. They share the same core functionality and syntax, as seen in the code comparison.
The main difference lies in the development activity and community support. view_component is more actively maintained, has a larger community, and provides better documentation. This can lead to more frequent updates, bug fixes, and feature additions.
However, view_component might be slightly more complex due to its additional features, which could result in a steeper learning curve for beginners. Developers should consider their project requirements and team expertise when choosing between the two.
Ultimately, both gems serve the same purpose and can be effective tools for building modular and maintainable Rails applications.
View components for Ruby and Rails.
Pros of Cells
- More mature and established project with a longer history
- Offers a wider range of features and customization options
- Supports multiple view templating engines (ERB, Haml, Slim)
Cons of Cells
- Steeper learning curve due to more complex API
- Less integrated with Rails' default conventions
- Slower performance compared to ViewComponent in some scenarios
Code Comparison
Cells:
class UserCell < Cell::ViewModel
def show
render
end
private
def user_name
model.name
end
end
ViewComponent:
class UserComponent < ViewComponent::Base
def initialize(user:)
@user = user
end
private
attr_reader :user
end
Both libraries aim to provide a component-based approach to views in Ruby on Rails applications. Cells offers more flexibility and features but may require more setup and learning. ViewComponent is designed to integrate seamlessly with Rails and provides a simpler API, making it easier to adopt for teams already familiar with Rails conventions.
ViewComponent is gaining popularity due to its official support from the Rails team and its focus on performance. However, Cells remains a powerful option for projects requiring more advanced features or those already using other Trailblazer gems.
Ultimately, the choice between the two depends on project requirements, team expertise, and desired level of customization.
⚡ A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Ruby webapps
Pros of Kaminari
- Specialized for pagination, offering a comprehensive solution for this specific need
- Highly customizable with various styling options and configuration settings
- Seamless integration with ORMs like ActiveRecord and Mongoid
Cons of Kaminari
- Limited to pagination functionality, less versatile for other UI components
- May require additional setup for complex pagination scenarios
- Less suitable for building reusable, encapsulated UI components
Code Comparison
Kaminari (pagination):
<%= paginate @users %>
<%= page_entries_info @users %>
ViewComponent (reusable component):
<%= render(UserListComponent.new(users: @users)) %>
Summary
Kaminari excels in providing a robust pagination solution for Ruby on Rails applications, offering extensive customization options and ORM integrations. However, it's focused solely on pagination, which limits its versatility compared to ViewComponent.
ViewComponent, on the other hand, is a more general-purpose tool for building reusable UI components. It allows developers to create encapsulated, testable components for various UI elements, not just pagination. This makes ViewComponent more flexible for overall application design but may require more setup for specific functionalities like pagination.
The choice between the two depends on the project's needs: Kaminari for specialized pagination or ViewComponent for a broader component-based architecture.
🐬 Beautiful, performant feature flags for Ruby.
Pros of Flipper
- Feature flagging system with multiple backends (Redis, ActiveRecord, etc.)
- Provides a web UI for managing feature flags
- Supports percentage rollouts and user targeting
Cons of Flipper
- More complex setup and configuration
- Potentially higher performance overhead
- Limited to feature flagging functionality
Code Comparison
Flipper:
Flipper.enable :new_feature
Flipper.enabled? :new_feature
Flipper.enable_percentage_of_actors :new_feature, 25
View Component:
class MyComponent < ViewComponent::Base
def initialize(title:)
@title = title
end
end
Summary
Flipper is a feature flagging system that allows for gradual rollouts and user targeting, while View Component is a framework for building reusable, testable, and encapsulated view components in Ruby on Rails applications. Flipper offers more flexibility in feature management but requires more setup, whereas View Component focuses on improving view organization and reusability with a simpler implementation. The choice between the two depends on whether you need feature flagging capabilities or improved view component structure in your Rails application.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
A framework for building reusable, testable & encapsulated view components in Ruby on Rails.
Documentation
See viewcomponent.org for documentation.
Contributing
This project is intended to be a safe, welcoming space for collaboration. Contributors are expected to adhere to the Contributor Covenant code of conduct. We recommend reading the contributing guide as well.
License
ViewComponent is available as open source under the terms of the MIT License.
Top Related Projects
A framework for building reusable, testable & encapsulated view components in Ruby on Rails.
View components for Ruby and Rails.
⚡ A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Ruby webapps
🐬 Beautiful, performant feature flags for Ruby.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot