Ruby 코드로서의 HTML 템플릿

Arkency Ecommerce project에서 우리는 서버 렌더링 뷰 전략을 선택했습니다. JavaScript 프레임워크를 다루는 대신 모든 것이 Rails 우산 아래 있습니다.

프로젝트가 매우 "비즈니스"지향적인 경우 멋진 JS UI가 필요하지 않습니다.

일반적인 보기 중 하나는 클라이언트 패널 로그인 화면이었습니다.

<div class="max-w-6xl mx-auto py-6 sm:px-6 lg:px-8">
  <%= form_tag("login", method: :post) do %>
    <div>
      <label for="client" class="block font-bold">
        Client
      </label>
      <%= select_tag(:client_id, options_from_collection_for_select(@clients, :uid, :name), id: "client", class: "mt-1 focus:ring-blue-500 focus:border-blue-500 block shadow-sm sm:text-sm border-gray-300 rounded-md") %>
      <%= button_tag('Login', class: "mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded") %>
    </div>
  <% end %>
</div>

이것은 ERB라고 하는 일반적인 Rails 보기이며 <%= %>로 래핑된 일부 특수 Ruby 스니펫이 있는 html입니다.

이러한 뷰는 훌륭하며 모든 Rails 개발자는 그것을 부분으로 모듈화하는 방법, 헬퍼를 사용하는 방법 등을 알고 있습니다.

그러나 시간이 지남에 따라 Rails 뷰는 일부 "로직"을 축적하는 경향이 있습니다. 일부if 진술을 피하는 것은 어렵습니다. 보기는 HTML보다 Ruby에 가깝습니다.

그렇기 때문에 애플리케이션의 클라이언트 패널 부분에서 다른 접근 방식을 시도하기로 결정했습니다.

Ruby에서 이러한 뷰를 작성하고 HTML을 생성하도록 합시다.

이 접근 방식에는 분명한 단점이 있습니다. 더 이상 HTML이 아니므로 프런트엔드 사람들이 수정하도록 하기가 더 어렵습니다.
그래도 전문가는 실험해볼 가치가 있습니다.

class Login < Arbre::Component
  def self.build(view_context)
    new(Arbre::Context.new(nil, view_context)).build
  end

  def build(attributes = {})
    super(attributes)
    clients = ClientOrders::Client.all
    div class: "max-w-6xl mx-auto py-6 sm:px-6 lg:px-8" do
      safe_join([
        text_node(form_tag("login", method: :post)),
        div do
          safe_join([
            select_tag(:client_id, options_from_collection_for_select(clients, :uid, :name), id: "client", class: "mt-1 focus:ring-blue-500 focus:border-blue-500 block shadow-sm sm:text-sm border-gray-300 rounded-md"),
            button_tag('Login', class: "mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded")
          ])
        end
      ])
    end
  end
end

다르지만 비슷합니다.
여기서는 [arbre](https://activeadmin.github.io/arbre/) 라이브러리를 사용하고 있습니다. 다른 것도 있지만 이것은 이미 우리 프로젝트 중 하나에서 실전 테스트를 거쳤습니다.

여기에 몇 가지 문제가 있습니다. Ruby 코드는 HTML에서 직접 번역한 것처럼 보이지만 차이점이 있습니다.
safe_join 호출에 유의하십시오. 하나 이상의 html "블록"을 결합할 때마다 필요합니다.

또 다른 하나는 text_node이며 Rails 헬퍼에 자주 필요합니다. 그렇지 않으면 태그가 렌더링되지 않을 수 있습니다.

이제 컨트롤러는 다음과 같습니다.

module Client
  class ClientsController < ApplicationController
    layout "client_panel"

    def index
      render html: Login.build(view_context), layout: true
    end

그만한 가치가 있는지 말하기에는 너무 이릅니다. 나는 이 영역에서 더 많은 보기를 돌리고 보기를 더 복잡하게 만들려고 노력할 것입니다. 그런 다음 순수한 Ruby 또는 ERB 접근 방식에서 뷰 로직을 처리하는 것이 더 나은지 확인하겠습니다.

이 진화에 대한 한 가지 희망은 이제 실제로 다른 Ruby 클래스처럼 코드를 테스트할 수 있다는 것입니다. 또한 이제 테스트 커버리지를 측정할 수 있습니다.

이 접근법에 대한 당신의 생각은 무엇입니까?