Rails nos ofrece herramientas para simplificar y mejorar el manejo de la lógica de las vistas, y en Rails 7, el uso de ViewComponent se está convirtiendo en una buena práctica que muchos desarrolladores adoptan por su rendimiento y claridad. A lo largo de este artículo, exploraremos por qué ViewComponent es una gran alternativa a los tradicionales partials y cómo manejar URLs dentro de estos componentes.

ViewComponent es una librería que permite encapsular fragmentos de vistas junto con su lógica correspondiente en un solo lugar. En otras palabras, ViewComponent nos ayuda a crear componentes reutilizables, modulares y altamente organizados. Esta idea de encapsulación mejora el orden y la mantenibilidad del código, además de tener importantes ventajas en rendimiento frente a los **partials** tradicionales de Rails.

Para comenzar a usar ViewComponent en Rails 7, primero necesitas agregar la gema a tu proyecto. En el archivo `Gemfile`, añade la siguiente línea:

gem 'view_component', '~> 3.0'

bundle install

rails generate component LinkComponent

Este comando creará un componente llamado `LinkComponent` con dos archivos principales:
- `app/components/link_component.rb`: Contendrá la lógica del componente.
- `app/components/link_component.html.erb`: Contendrá la plantilla HTML del componente.

Los partials son una herramienta muy útil en Rails, ya que permiten dividir las vistas en fragmentos más pequeños y reutilizables. Sin embargo, los partials presentan algunos inconvenientes en términos de rendimiento y claridad a medida que la aplicación crece.

1. Rendimiento General:
   - Partials: Cada vez que se llama a un partial, Rails crea una nueva instancia del contexto de la vista, lo cual aumenta el overhead y el costo de renderización. Además, los partials tienen acceso al contexto de la vista o el controlador, lo cual hace que la lógica sea más difícil de encapsular y optimizar.
   - ViewComponent: En comparación, los ViewComponents se comportan como objetos Ruby, lo que les permite ser más eficientes al encapsular tanto la lógica de presentación como el HTML. Al tener una estructura clara y ser instanciados como clases, los componentes son más rápidos de procesar y optimizan mejor el uso de la memoria.

2. Encapsulación de la Lógica:
   - Los partials dependen de variables de instancia definidas en las vistas y los controladores, lo que hace más fácil tener una lógica de presentación dispersa. Esto puede hacer difícil la refactorización y aumentar el riesgo de errores cuando las aplicaciones crecen en tamaño.
   - ViewComponent, por otro lado, nos obliga a definir claramente qué datos se necesitan al inicializar el componente. Esta separación hace que el código sea más limpio, mantenible y predecible.

3. Caché de Fragmentos:
   - Tanto partials como ViewComponent permiten el uso del fragment caching para mejorar el rendimiento. Sin embargo, ViewComponent tiene una ventaja porque al ser más modular y tener dependencias bien definidas, resulta más fácil decidir qué partes deben ser cacheadas y cómo invalidar ese caché cuando es necesario. Al definir claramente las entradas, es menos probable que invalidemos fragmentos grandes de caché innecesariamente.

Una de las características útiles de ViewComponent es cómo podemos trabajar con URLs y enlaces en las vistas. Aquí veremos cómo se puede crear un LinkComponent que genera un enlace dinámico de forma reusable.

Primero, generamos un componente llamado `LinkComponent`:

rails generate component LinkComponent

Luego, editamos el archivo `app/components/link_component.rb` para aceptar parámetros como `url` y `text`, que definan a dónde apunta el enlace y cuál es su texto:

class LinkComponent < ViewComponent::Base
  def initialize(url:, text:)
    @url = url
    @text = text
  end
end

Esto permite que el componente sea completamente dinámico y configurable.

En el archivo `app/components/link_component.html.erb`, creamos el HTML para generar el enlace:

<%= link_to @text, @url %>

Aquí usamos el helper `link_to` de Rails para definir el enlace utilizando los valores pasados al componente.

Una vez definido el componente, puedes utilizarlo en cualquier vista de la siguiente manera:

<%= render(LinkComponent.new(url: "https://rubyonrails.org", text: "Visit Rails")) %>

Esto generará un enlace con el texto "Visit Rails" que apunta a la página principal de Ruby on Rails.

También podemos extender `LinkComponent` para aceptar opciones adicionales, como clases CSS o atributos de `data`:

class LinkComponent < ViewComponent::Base
  def initialize(url:, text:, options: {})
    @url = url
    @text = text
    @options = options
  end
end

Y luego usamos esos atributos en el archivo HTML:

<%= link_to @text, @url, @options %>

De esta forma, puedes utilizar el componente para generar enlaces más flexibles y con configuraciones específicas:

<%= render(LinkComponent.new(url: posts_path, text: "View all posts", options: { class: "btn btn-primary", data: { turbo: false } })) %>

Si quieres explorar más sobre ViewComponent y cómo utilizarlo en tu proyecto, te recomiendo que consultes la documentación oficial:

Documentación Oficial de ViewComponent: https://viewcomponent.org/

Utilizando ViewComponent, puedes garantizar que tu aplicación tenga una arquitectura más limpia, modular y eficiente, y que cada fragmento de tu interfaz sea reutilizable y fácil de gestionar. Esta práctica moderna no solo te ayudará a escribir mejor código, sino que también te permitirá mejorar la experiencia de mantenimiento a largo plazo.