Ruby on Rails 변형으로 UI 변경 미리보기

라이브 애플리케이션을 위한 새로운 디자인을 구현할 때 우리는 일반적으로 사용자가 미완성 구현을 보는 것을 원하지 않지만 디자이너, 제품 소유자를 위해 일부 사용자가 라이브(프로덕션 또는 스테이징) 환경에서 미리 볼 수 있는 기능을 제공할 수 있습니다. , 우리의 가장 충성스러운 고객.

다음은 복잡한 기능 전환 메커니즘을 도입하지 않고 이를 수행하는 가장 간단한 방법 중 하나입니다.

레일 방식

다행스럽게도 Ruby on Rails는 view variants의 도움으로 이 문제를 해결했습니다. 즉, 동일한 컨트롤러 작업에 대해 여러 가지 다른 보기 템플릿을 정의하고 컨트롤러 수준에서 렌더링해야 하는 템플릿을 결정할 수 있습니다.

Dashboard#show가 있고 데이터가 표시되는 방식을 변경하려고 한다고 가정해 보겠습니다. 그런 다음 새 보기show.html+redesign.erb를 만들어야 하므로 동일한 작업에 대해 두 개의 보기가 생성됩니다.

app/views/dashboard/show.html.erb
app/views/dashboard/show.html+redesign.erb

새로운 디자인으로 대시보드를 렌더링하기 위해 변형 이름을 작업 렌더러에 명시적으로 전달할 수 있습니다.

def show
  render variants: [:redesign]
end

하지만 주문형으로만 사용하고 다른 사용자에게 영향을 주고 싶지 않기 때문에 켜고 끌 수 있는 방법이 필요합니다. 사용자에게 요청과 함께 미리보기 매개변수를 전달하도록 요구함으로써 이를 수행할 수 있습니다.

def show
  render variants: [:redesign] if params[:preview]
end

재사용 가능하게 만들기

다른 페이지에 쉽게 재사용할 수 있도록 우려 사항으로 추출하고 기존 코드를 가능한 한 적게 수정하려고 합니다.

또한 세션에 미리보기 플래그를 저장할 수 있으므로 사용자는 각 요청에 preview 매개변수를 전달할 필요가 없습니다.

module RedesignPreview
  extend ActiveSupport::Concern

  included { before_action :set_redesign_preview }

  class_methods do
    def with_redesign_preview(options = {})
      before_action(options) { set_redesign_variant }
    end
  end

  private

  def set_redesign_variant
    request.variant = :redesign
  end

  def redesign_preview?
    session[:redesign_preview]
  end

  def set_redesign_preview
    session[:redesign_preview] = true if params[:preview].present?
    session.delete(:redesign_preview) if params[:preview_reset].present?
  end
end

그런 다음 DashboardController 작업에 대해서만 재설계할 수 있도록 하는 #show에서 사용합니다.

class DashboardController < ApplicationController
  include RedesignPreview

  with_redesign_preview only: :show, if: :redesign_preview?
end

이제 재설계를 미리 보기 위해 사용자는 preview 매개변수를 전달하고 평소대로 재설정할 수 있습니다.

http://example.com/dashboard?preview=1 # to enable preview
http://example.com/dashboard?preview_reset=1 # to disable preview

필요에 맞게 사용자 지정

또한 이를 추출하여 사용자가 예를 들어 프로필 설정에서 제어할 수 있는 기능을 제공할 수 있습니다.

class RedesignPreviewController < ApplicationController
  def create
    session[:redesign_preview] = true
  end

  def destroy
    session.delete(:redesign_preview)
  end
end

또한 RedesignPreview 관심사를 약간 변경하여 보다 유연하게 만들고 다양한 미리 보기 변형을 지원할 수 있습니다.

module RedesignPreview
  extend ActiveSupport::Concern

  included { before_action :set_redesign_preview }

  class_methods do
    def with_redesign_preview(options = {})
      variant = options.delete(:variant)
      before_action(options) { set_redesign_variant(variant) }
    end
  end

  private

  def set_redesign_variant(variant)
    request.variant = :redesign
  end
  ...
end

변형을 매개변수로 전달합니다.

with_redesign_preview only: :show, 
                      if: :redesign_preview?, 
                      variant: :alternate_version

둘 이상의 페이지에 대한 미리보기를 추가해야 하는 경우 레이아웃 및 부분에 대한 변형도 생성하고 우려 사항을 ApplicationController에 포함할 수 있습니다.

class ApplicationController < ActionController::Base
  include RedesignPreview

  with_redesign_preview if: :redesign_preview?
end