내가 최신 공관을 통과하기 위해 테스트를 기다리고 있을 때, 나는 내 우편함에서 시간을 보내기로 결정했다.Ruby 시사통신에 가입했습니다. 재미있는 제목을 보았습니다. ActionView 도입: 구성 요소: 보기 구성 요소가 곧 Rails에 추가됩니까?Rails에 연결된 다음 PR:

타사 구성 요소 프레임워크 지원 도입 #36388

joelhawksley
Jun 03, 2019에 발표
주: 본 청구서의 최초 명칭은 Introduce support for ActionView::Component입니다.최종 게시된 변경 사항을 더 잘 반영하기 위해 내용을 업데이트했습니다. GitHub 라이브러리의 새 이름 ViewComponent을 사용하고 검증된 내용을 삭제했습니다. 더 이상 사용하지 않겠습니다. -@joelhawksley, 2020년 3월

타사 구성 요소 프레임워크 지원 도입

본 PR은 ViewComponent을 포함하여 제3자 구성 요소 프레임워크에 대한 구조적 지원을 소개합니다. GitHub는 보기 구성 요소를 구축하는 프레임워크입니다.
구체적으로 ActionView::RenderingHelper#render을 수정하여 render, 즉 responds_to render_in으로 대상을 전달할 수 있도록 함으로써 보기 구성 요소를 Rails의 대상으로 구축할 수 있습니다.
3월 이래로 우리는 GitHub 생산에서 이 패치의 변체를 운행해 왔으며, 현재 100여 개의 호출 사이트에서 약 12개의 구성 요소를 사용하고 있다.
PR에는 GitHub에서 사용하는 기본 구성 요소와 매우 유사한 예제 구성 요소(TestComponent)가 포함되어 있습니다.
그곳에서 우리는 지역 사회로부터 좋은 피드백을 많이 받았다.몇 명이 Rails로 올라가라고 요청했습니다.

왜?

GitHub의 Rails monolith(4000개 이상의 템플릿)에서 뷰를 처리하는 동안 다음과 같은 몇 가지 주요 문제점이 발생했습니다.

테스트

현재 Rails에서는 통합 또는 시스템 테스트를 통해 테스트 뷰를 볼 수 있습니다.이것은 우리가 보기를 철저하게 테스트하는 데 방해가 된다. 왜냐하면 실행 루트/컨트롤러 층(보기가 아니라)은 높은 비용을 초래하기 때문이다.또한 모든 보기에 포함된 부분을 테스트하여 건조한 보기의 장점을 떨어뜨린다.

코드 덮어쓰기

많은 흔히 볼 수 있는 루비 코드 덮어쓰기 도구는 보기의 덮어쓰기를 정확하게 처리할 수 없기 때문에 테스트의 철저성을 감사하기 어렵고 테스트 세트에 빈틈이 생길 수 있다.

데이터 흐름

대상의 방법 성명과 달리 보기는 예상 수신 값을 표시하지 않기 때문에 그들이 필요로 하는 상하문을 표시하는 것을 확정하기 어렵다.우리가 서로 다른 상하문에서 보기를 다시 사용할 때, 이것은 통상적으로 미묘한 오류를 초래할 수 있다.

표준

우리의 보기는 종종 루비류가 달성하기를 기대하는 가장 기본적인 코드 품질 기준인 긴 방법, 깊이 조건 삽입과 대량의 신비한 방문객에 도달하지 못한다.

뷰 구성 요소

ViewComponent은 Rails 도면층을 개선하는 방식으로 이러한 난점을 해결하기 위한 것입니다.

건축부재

구성 요소는 ViewComponent의 하위 클래스로 app/components에 존재합니다.
구성 요소와 같은 이름의sidecar 템플릿 파일을 포함합니다.

인스턴스

주어진 어셈블리 app/components/test_component.rb:
클래스 TestComponentdef 초기화 (제목:)
@ 제목 = 제목
중지
중지
템플릿 app/components/test_component.html.erb:

안녕, 세상!
<% 끝%>
반환:
안녕, 세상

테스트

구성 요소는 직접 HTML 출력을 바탕으로 단원 테스트를 진행한다.render_inline 테스트 조수는 복어 단언을 지원합니다.
def test\urender\u 구성 요소
render_inline(TestComponent.new) {"안녕하세요, 세상!"}
assert\u text "안녕하세요, 세상"
assert\u 선택기 "span[title='my title']"
중지

이점

테스트

ViewComponent은 보기에 대한 단원 테스트를 허용합니다.우리의 단원 테스트 운행 시간은 약 25ms/테스트이고 통합 테스트 운행 시간은 약 6s/테스트입니다.

코드 덮어쓰기

ViewComponent 최소한 일부 호환 코드 덮어쓰기 도구입니다.우리는 이미 Simple Cov가 약간의 성공을 거두는 것을 보았다.

데이터 흐름

구성 요소를 나타내는 데 필요한 상하문을 명확하게 정의함으로써 우리는 그것들이 부분보다 다시 사용하기 쉽다는 것을 발견했다.

기존 구현

ViewComponent은 결코 새로운 생각이 아니다.Ruby에서 보기 구성 요소의 유행은 다음과 같습니다.

trailblazer/cells

dry-rb/dry-view

komposable/komponent

activeadmin/arbre

실행 중

나는 이 지점을 가리키는 demo repository을 만들었다.

공동 저자

엔지니어와 디자인 시스템 팀원으로 구성된 크로스 기능 작업팀은 이 업무에서 협력을 진행했는데 @natashau, @tenderlove, @shawnbot, @emplums, @broccolini, @myobie와 @zawaideh를 포함한다.
그 밖에 지역사회의 많은 구성원들이 ViewComponent에 대한 생각을 공유했다. 예를 들어 @cgriego, @xdmx, @jcoyne, @dylanahsmith, @cquinones100, @erikaxel, @zachahn과 @trcarden을 포함한다.
View on GitHub
내가 본 재미있는 포인트는 다음과 같다.

공연

In early benchmarks, we’ve seen performance improvements over the existing rendering pipeline. For a test page with nested renders 10 levels deep, we’re seeing around a 5x increase in speed over partials:

Comparison:
           component:     6515.4 i/s
             partial:     1251.2 i/s - 5.21x  slower

Rails 6.1.0.alpha, joelhawksley/actionview-component-demo, /benchmark route, via RAILS_ENV=production rails s, measured with evanphx/benchmark-ips

테스트

ActionView::Component allows views to be unit-tested. Our unit tests run in around 25ms/test, vs. ~6s/test for integration tests.

나는 이전에 보기 구성 요소를 들어 본 적이 없다. 적어도 Rails 방면에서는 들어 본 적이 없다.멋있어 보이기;뭐 공부 해요?