Convert Figma logo to code with AI

ViewComponent logoview_component

A framework for building reusable, testable & encapsulated view components in Ruby on Rails.

3,233
416
3,233
67

Top Related Projects

A framework for building reusable, testable & encapsulated view components in Ruby on Rails.

3,056

View components for Ruby and Rails.

⚡ A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Ruby webapps

3,659

🐬 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:

  1. 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")) %>
  1. 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)) %>
  1. 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:

  1. Add the ViewComponent gem to your Gemfile:
gem 'view_component'
  1. Run the following command to install the gem:
bundle install
  1. 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
  1. Use the new component in your views:
<!-- app/views/home/index.html.erb -->
<%= render(GreetingComponent.new(name: "John")) %>
  1. Customize the component as needed, adding logic, HTML, and styling.

  2. 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.

3,056

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.

3,659

🐬 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

ViewComponent logo ViewComponent logo

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.