Ruby on Rails вже давно є улюбленцем серед веб-розробників завдяки інструментам, які роблять розробку додатків ефективною та приємною. Один з таких інструментів, який змінив мій підхід до фронтенд-розробки — це Rails ViewComponents. У цій статті я поділюсь, чому я люблю використовувати ViewComponents і як ви можете впровадити їх у свої Rails проекти.
Ruby on Rails ViewComponent
Що таке Rails ViewComponents?
ViewComponents — це фреймворк для створення багаторазових, тестованих і інкапсульованих компонентів UI в Rails. Замість того, щоб безпосередньо змішувати Ruby і HTML у вигляді, ViewComponents відокремлюють логіку та презентацію, що дає змогу отримати чистіший і більш підтримуваний код.
Чому я люблю Rails ViewComponents
- Багаторазовість ♻️
Компоненти дозволяють інкапсулювати шаблони UI в окремі модулі. Наприклад, якщо у вас є кнопка, яка використовується на кількох сторінках, один ViewComponent може опрацювати її. - Тестованість 🧪
На відміну від традиційних ERB-видів, ViewComponents значно легше тестувати. Ви можете написати юніт-тести для окремих компонентів, щоб переконатися, що вони коректно рендеряться в різних умовах. - Покращена підтримуваність 🛠️
З ViewComponents ваші види стають більш модульними. Замість довгих і заплутаних шаблонів ви можете розділити їх на менші, зручніші частини. - Покращена продуктивність 🚀
ViewComponents підтримують такі функції, як кешування, що значно підвищує час рендерингу для складних компонентів.
Як впровадити ViewComponents у Rails
Крок 1: Додайте гем ViewComponent
Якщо у вашому Rails додатку ще немає ViewComponents, додайте гем у ваш Gemfile:
gem 'view_component'
Запустіть команду bundle install, щоб встановити гем.
Крок 2: Створіть новий компонент
Створіть новий ViewComponent за допомогою генератора Rails:
rails generate component Button
Це створить два файли:
app/components/button_component.rb(логіка)app/components/button_component.html.erb(шаблон)
Крок 3: Визначте логіку компонента
У файлі button_component.rb визначте логіку для вашої кнопки:
class ButtonComponent < ViewComponent::Base
def initialize(label:, url:, style: "primary")
@label = label
@url = url
@style = style
end
end
Крок 4: Створіть шаблон компонента
У файлі button_component.html.erb визначте HTML для кнопки:
<%= @label %>
Крок 5: Використовуйте компонент у вашому виді
Тепер ви можете використовувати компонент у своїх виглядах ось так:
<%= render ButtonComponent.new(label: "Click Me", url: "/dashboard", style: "success") %>
Розширені можливості
- Слоти для вкладеного контенту
ViewComponents підтримують слоти, що дозволяє передавати вкладений контент. Наприклад, компонент модального вікна може мати слоти для заголовка, тіла і футера. - Кешування
Для покращення продуктивності ви можете кешувати компоненти, використовуючи вбудовані методи кешування Rails. - Тестування ViewComponents
Ви можете тестувати компоненти, використовуючи RSpec або Minitest. Ось приклад простого тесту на RSpec:
require "rails_helper"
RSpec.describe ButtonComponent, type: :component do
it "renders a button with the correct label" do
render_inline(ButtonComponent.new(label: "Submit", url: "/submit"))
expect(rendered_content).to include("Submit")
end
end
Чому варто почати використовувати ViewComponents
Rails ViewComponents надають структуру і ясність вашому фронтенд-коду. Підтримуючи багаторазовість, тестованість та підтримуваність, вони значно полегшують створення масштабованих додатків. Незалежно від того, чи створюєте ви невелику функцію, чи цілий інтерфейс, ViewComponents гарантують, що ваш код залишатиметься чистим і ефективним.
Висновок
Rails ViewComponents — це не просто інструмент, а філософія, яка заохочує до створення модульного та підтримуваного коду. Якщо ви ще не спробували їх, зараз ідеальний час, щоб почати.
Починайте з маленьких компонентів, і ви швидко побачите, наскільки вони полегшують ваш процес розробки.
Який у вас досвід роботи з ViewComponents? Поділіться в коментарях, і не соромтесь ділитися своїми порадами та хитрощами для максимального використання цього потужного фреймворку!
Перекладено з: Why I Love Rails ViewComponents and How to Implement Them