Ant Design 작가가 버전 업데이트 비하인드 스토리를 공개합니다!

Ant Design은 Ant Financial이 출시한 엔터프라이즈급 UI 디자인 언어이자 React 구성 요소 라이브러리로, 2015년 출시 이후 폭넓은 관심과 사용을 받아 왔으며 현재 GitHub에서 57,000개 이상의 별을 보유하고 있습니다. 최근 Ant Design은 몇 가지 주요 업데이트가 포함된 버전 4.0을 출시했습니다. Ant Design 팀의 핵심 작성자 중 한 명인 Jiang Jilin을 인터뷰하고 4.0 버전 업데이트에 얽힌 몇 가지 이야기를 이야기했습니다.

Ant Design 4.0이 출시되었습니다. 이번에는 어떤 주요 업데이트가 제공되나요?

이번에 몇 가지 대규모 업데이트가 출시되었습니다. 예를 들어 어두운 테마, 경계 없는 구성 요소, RTL 국제화 지원을 추가하고 Table, Form, Select 등과 같은 구성 요소를 다시 실행하여 성능을 크게 향상시켰습니다. 콘텐츠가 많기 때문에 직접 게시된 문서로 전환하는 것은 피하세요. 전체 업데이트를 보려면 Yuque에 오신 것을 환영합니다. "Ant Design의 공식 버전이 여기에 있습니다!" 》

수년간의 개발 끝에 Ant Design은 생태계가 되었습니다. 이 생태계의 중요한 구성원을 소개해주세요. 앞으로 생태계의 진화 방향은 무엇인가요?

디자인 시스템인 Ant Design(이하 antd)에는 단순한 구성 요소 라이브러리 이상의 기능이 포함되어 있습니다. 친숙한 Ant Design React 외에도 커뮤니티 자원봉사자들이 제공하는 Angular 버전의 NG-ZORRO, Ant Desin Mobile, Ant Design Landing, HiTu React 및 Ant Design Vue도 있습니다. 수직으로 즉시 사용 가능한 미드엔드 프런트 엔드/디자인 솔루션 Ant Design Pro 및 해당 블록 시장과 파생 구성 요소 라이브러리인 Pro Layout 및 Pro Table. 디자인은 또한 많은 사양 문서와 관련 디자인 자산을 제공합니다.

개미 디자인은 나무와 같고, 그 위에 있는 가지와 잎은 매우 상상력이 풍부합니다. 앞으로도 우리는 먼저 디자인 시스템을 기반으로 심층적인 연구를 진행하고, 두 번째로 관련 프레임워크와 함께 발전해 나갈 것입니다. 동시에 Ant Design은 실제 비즈니스 요구에 따라 생태학적 제품도 풍부하게 만들 것입니다.

3.0에서 4.0으로 넘어가는 과정에서 antd 팀이 극복한 가장 큰 문제는 무엇인가요? 어떤 새로운 기능이 가장 자랑스럽나요?

v4 버전과 커뮤니티 동급생은 다수의 기본 구성 요소를 재구성하여 구성 요소 렌더링 성능을 크게 향상시켰습니다. 예를 들어 버전 v3의 Form 구성 요소에서 필드 업데이트로 인해 전체 Form이 다시 렌더링되어 대규모 양식에서 심각한 성능 문제가 발생할 수 있습니다. v4에서는 Form이 관련 필드 구성 요소만 업데이트하므로 렌더링 시간이 크게 단축됩니다. 가상 스크롤링은 Tree, Select 및 TreeSelect와 같은 구성 요소에 내장되어 있으므로 실제 렌더링되는 요소가 크게 줄어듭니다.

더 어려운 부분을 말하자면, 이 재구성에는 가상 스크롤을 지원하기 때문에 가상 스크롤 기반 애니메이션 축소 및 늘이기 솔루션이 필요합니다. 예를 들어, Tree 구성 요소의 v3 버전에서는 축소 및 늘이기 효과를 얻기 위해 기본 전환 및 높이를 통해 크기 조정을 수행할 수 있습니다. 하지만 가상 스크롤링에서는 각 요소가 실제로는 독립된 요소이기 때문에 스케일링 시 v3와 동일한 애니메이션 효과를 얻으려면 관련 알고리즘을 직접 구현해야 합니다. 따라서 우리는 이를 여러 단계로 나누고 여러 단계에서 서로 다른 로직을 처리하여 가상 스크롤을 지원하는 애니메이션 구현을 결합했습니다. 구체적인 구현 로직은 상대적으로 복잡합니다. 관심이 있다면 rc-virtual-list의 관련 코드를 볼 수 있습니다.

antd는 효율성, 성능/경험 및 디자인 품질의 균형을 어떻게 유지합니까?

개인적인 관점에서 후자의 세 가지는 실제로 모순되지 않습니다. Ant Design의 구성 요소 개발은 일반적으로 다음 단계로 구성됩니다.

• 디자이너는 시각적 및 대화형 초안을 디자인합니다.

• 엔지니어는

• 코드 검토 및 디자이너 검토를 수행합니다.

모든 링크는 진지하고 책임감 있게 완성되며, 코드 리뷰 부분도 가장 긴 단계입니다. 코드 리뷰 프로세스는 API와 코드 구현을 반복적으로 수정하고 디자이너와 개발자가 함께 참여하여 1+1> 부품 개발은 맹목적으로 효율성을 추구할 수 없으며 설계부터 구현까지 천천히 다듬어져야 합니다. 예를 들어 Typography 컴포넌트는 조판 컴포넌트로서 매우 단순해 보이지만, 개발자의 메모리 비용을 가장 효율적으로 단순화하기 위해 API를 반복적으로 조정하면서 디자인부터 개발까지 진행했습니다. 고려됩니다. 중국어와 영어 모두에서 좋은 시각적 효과를 얻을 수 있도록 디자인 측면도 반복적으로 고려됩니다.

v3 버전에서는 구성 요소의 성능 문제가 주로 이전 버전의 IE에 대한 호환성 요구 사항에서 발생합니다. 따라서 많은 구현에서는 상대적으로 해키적인 방법만 사용할 수 있으므로 다음 문제에 대해서는 다시 언급하지 않겠습니다. IE v4의 최소 호환 버전이 IE 11로 변경되었으므로 이는 더 이상 제한 사항이 아니며, 더 나은 성능 향상을 위해 점진적으로 업데이트할 수 있는 기능을 제공합니다.

IE와의 호환성 측면에서 일부 절충안을 적용한 이유는 무엇인가요? IE와 호환하는데 어떤 어려움이 있나요?

v3 버전은 이전 버전의 IE와 호환되기 위해 일부 타협을 해야 했습니다. 예를 들어 플렉스 레이아웃을 사용할 수 없는 경우 부동 소수점 및 테이블을 사용합니다. 고정식 레이아웃은 사용할 수 없으며 테이블은 고정 열의 효과를 얻기 위해 추가 테이블을 렌더링해야 합니다. 최근 몇 년 동안 Windows 시스템이 업그레이드되면서 이전 버전의 IE가 차지하는 비중이 점점 줄어들고 있습니다. 이는 우리가 v4 버전에서 구식 IE를 버리고 가볍게 여행할 수 있는 기회이기도 합니다.

IE와 호환되기 어려운 점은 코드에는 문제가 없지만 페이지 렌더링이 비정상적인 경우가 많습니다. 이런 상황을 위해서는 많은 흑기술이 필요하다. 예를 들어 IE 전용 CSS 해킹 등을 사용하여 구성 요소를 새로 고치도록 합니다. 또한, 앞서 언급한 새로운 HTML 기능 중 다수는 IE 환경에서 사용할 수 없으며 직접 시뮬레이션만 할 수 있어 심각한 성능 손실을 초래합니다.

현재 antd가 TypeScript를 지원하고 있다고 생각하시나요? 여전히 부족한 부분이 있다면 주로 어디에 위치하고 있으며 어떻게 해결될 것인가?

v3 버전에서는 많은 기본 구성 요소가 js로 작성되므로 ts의 유형 정의가 antd에서 추가로 수행됩니다. 단점은 기본 구성 요소와 완전히 일치하지 않는다는 것입니다. v4 버전에서는 또한 다수의 기본 구성 요소를 ts 버전으로 변환하고 이러한 정의를 antd 측에서 직접 사용하여 과거 정의 불일치를 방지했습니다. 물론 이 프로세스는 하룻밤 사이에 발생하지 않습니다. 아직 변환되지 않은 일부 기본 구성 요소가 커뮤니티의 학생들에게 도움을 주어 TS 정의를 개선하는 것을 환영합니다.

또한 우리는 몇 가지 흥미롭고 짜증나는 문제에 직면했습니다. 즉, typescript 및 @types/react 온톨로지의 업그레이드로 인해 원래 ts 정의가 유효하지 않게 되었습니다. 과거에는 antd의 Button이 최신 @types/react에 적응하기 위해 매주 ts 정의를 업데이트했던 때가 있었습니다. 이러한 상황은 불가피합니다. 계속 업데이트해 주시기 바랍니다.

출시 발표에서 두 명의 커뮤니티 학생 @saeedrahimi @shaodahong의 기여가 구체적으로 언급되었습니다.

@saeedrahimi classmate 그는 모든 구성 요소의 RTL 국제화 기능을 v4에 기여하고 수천 줄의 코드를 변경했습니다. 이 기능은 매우 강력하며 단 한 번의 PR만으로도 놀라실 것입니다. 이런 식으로 검토하고 업데이트를 거듭하면서 중간에 쉽지 않았던 부분을 드디어 깨닫게 되었습니다.

@shaodahong은 실제로 v3 기간 동안 열정적인 자원 봉사자였습니다. 또한 v4 출시 기간 동안 많은 작업을 도왔으며 그 중 호환성 패키지 개발을 주로 완료했습니다. 호환성 패키지를 통해 개발자는 가능한 가장 저렴한 비용으로 antd를 v3에서 v4로 업그레이드할 수 있습니다.

물론, 이 두 학생 외에도 v4 개발에 참여하는 자원봉사자가 많이 있습니다. 이 기회를 빌어 다시 한번 모든 자원봉사자분들께 감사의 말씀을 전하고 싶습니다!

일부 사용자는 커뮤니티 피드백이 어렵다고 보고했습니다. 소스 코드는 rc-* 캡슐화를 사용하여 구현되므로 개발자가 버그 수정을 주저하게 됩니다. 이 문제를 해결하는 방법을 생각해 보셨나요? antd 팀은 커뮤니티 개발자와의 연결 및 상호 작용을 어떻게 보나요?

rc 구성 요소는 단순하고 유연하게 설계되었으므로 스타일에 크게 의존하지 않습니다. 구성 요소 기능 외에도 antd에는 자체 디자인 시스템이 있으므로 UI ​​디자인이 더 무거워집니다. 이 구분을 통해 사용자는 구성 요소의 기능만 사용하고 스타일은 필요하지 않은 경우 rc 구성 요소를 기반으로 직접 캡슐화할 수 있습니다. 예를 들어 Form rc-field-form 자체의 기본 구성 요소에는 스타일이 전혀 없지만 antd에서는 기본 Field 구성 요소를 노출하지 않고 스타일이 지정된 Form 및 Form.Item을 캡슐화합니다. 실제로 v4가 출시되기 전에 많은 커뮤니티 학생들이 이미 rc-field-form을 기반으로 자체 구성 요소를 캡슐화했습니다. 둘은 디자인 아이디어 측면에서 서로 다르며 향후 병합되지 않을 예정이다.

홍보를 보내는 입장에서는 사실 심리적인 부담이 너무 클 필요는 없습니다. 구성 요소는 자체 임무를 수행하며 하단에 추가 rc 구성 요소 라이브러리가 있어도 방해받지 않습니다. 실제로 일일 유지 관리를 통해 볼 때 자원 봉사자들은 antd 및 rc에 PR을 보내는 데 동일한 열정을 가지고 있습니다. rc 구성 요소에서 수정할 수 없는 버그는 없습니다. 반면에 일부 사용자들은 rc 컴포넌트만 사용하기 때문에 이를 개선하기 위해 rc 컴포넌트에 많은 PR을 보내며, 이로 인해 이러한 PR이 antd로 피드백되는 경우도 있습니다.

다음 버전 계획은 어떻게 되나요? 앞으로 어떤 새로운 기능을 기대할 가치가 있나요?

v4 버전 출시 이후에는 많은 구성 요소의 재구성으로 인해 당분간 버그 수정에 중점을 둘 예정입니다. 안정화되면 React의 향후 Concurrent 모드를 사용할 준비가 된 것입니다. 또한, 테마를 동적으로 전환하는 기능을 지원하기 위해 js의 CSS에 대한 연구도 진행할 계획입니다. 물론 방금 말했듯이 현재 우선순위는 여전히 버그 수정에 맞춰져 있습니다.

널리 사용되는 프론트엔드 스타 오픈소스 프로젝트로서, antd가 지금까지 성공할 수 있었던 이유는 무엇이라고 생각하시나요? 지난 몇 년 동안 오픈소스를 통해 얻은 가장 큰 이점과 교훈은 무엇입니까?

Ant Design의 인기는 커뮤니티 내 학생들의 지원과 불가분의 관계에 있습니다. 오늘날의 Ant Design을 만든 것은 모두의 인식입니다. 오픈소스 프로젝트가 생존하려면 관리자가 업데이트를 유지하는 것 외에도 커뮤니티의 힘이 필요합니다. 오픈소스 세계에서는 훌륭한 프로젝트를 많이 볼 수 있습니다. 하지만 시간이 지날수록 점차 유지되지 않게 됩니다. 따라서 프로젝트의 활력을 어떻게 유지하는가가 최우선 과제입니다.

Ant Design은 2015년 첫 번째 코드 라인을 작성한 이후 많은 발전을 이루었습니다. 가장 큰 이득은 Ant Design을 일류 프런트 엔드 구성 요소 라이브러리로 구축하기 위해 함께 모인 커뮤니티의 급우들의 도움입니다. 동시에 오픈소스 프로젝트로서 오픈소스 방식으로 공개적이고 투명하게 유지되어야 합니다. 지역 사회에서 급우들의 신뢰에 부응하기 위해.

위 내용은 Ant Design 작가가 버전 업데이트 비하인드 스토리를 공개합니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!