프론트 엔드 문서, 스타일 가이드 및 MDX의 상승

최고의 오픈 소스 프로젝트조차도 포괄적 인 문서없이 실패 할 수 있습니다. 내부 문서는 똑같이 중요하므로 반복적 인 Q & A를 방지하고 직원 변경에도 불구하고 지식 연속성을 보장합니다. 잘 문서화 된 코딩 가이드 라인은 코드베이스 일관성을 촉진합니다.

광범위한 문서를 위해 Markdown은 RAW HTML에 대한 우수한 대안을 제공합니다. 그러나 Web Components를 사용하는 설계 시스템에 대한 사용자 정의 요소를 포함하여 Markdown 파일에 직접 HTML을 포함시켜 Markdown의 한계를 극복 할 수 있습니다. REACT (및 PREACT 또는 VUE와 같은 JSX 호환 프레임 워크)의 경우 MDX는 원활한 통합을 제공합니다.

이 기사는 문서화 및 스타일 가이드 제작 도구에 대한 높은 수준의 개요를 제공합니다. 모두 MDX를 사용하는 것은 아니지만 채택이 빠르게 증가하고 있습니다.

MDX 이해

.mdx 파일은 표준 Markdown 구문을 반영하지만 대화식 JSX 구성 요소의 가져 오기 및 임베딩을 허용합니다. VUE 구성 요소 지원은 현재 Alpha에 있습니다. MDX는 React App 만들기와 쉽게 통합되며 Next.js 및 Gatsby에는 플러그인이 있습니다. Docusaurus 버전 2에는 내장 지원이 포함됩니다.

Docusaurus : 문서 강국

Facebook (React 제외)에 의해 개발 된 Docusaurus는 수많은 주요 오픈 소스 프로젝트 (Redux, Pretier, Gulp, Babel)에 의해 활용됩니다. 다목적 성은 프론트 엔드 문서를 넘어 확장됩니다. Docusaurus는 내부적으로 RECT를 활용하는 동안 사용을 위해 React 지식이 필요하지 않습니다. Markdown 파일을 잘 구조화되고 시각적으로 매력적인 문서 사이트로 변환합니다.

Docusaurus 사이트는 Markdown 기반 블로그를 통합하고 Seamless 구문 강조 표시를 위해 Prism.js를 포함 할 수 있습니다. Stackshare에서 2018 년 최고의 새로운 도구로 선정 된 인기가 분명합니다.

대체 문서 솔루션

Docusaurus는 문서화를 전문으로하지만 수많은 대안이 존재합니다. 다양한 백엔드 언어, CMSS 또는 정적 사이트 생성기를 사용하여 맞춤 솔루션이 가능합니다. IBM의 디자인 시스템, Apollo 및 Ghost CMS, 예를 들어, 블로그에 자주 사용되는 다목적 정적 사이트 생성기를 활용하는 React. Vuepress는 Vue 생태계 내에서 견인력을 얻고 있습니다. Python으로 작성된 오픈 소스 정적 사이트 생성기 인 MKDocs는 간단한 YAML 구성을 제공합니다. 인기있는 유료 옵션 인 Gitbook은 오픈 소스 및 비영리 팀에 무료로 액세스 할 수 있습니다. 간단한 내부 문서화의 경우 Github의 Markdown 렌더링 기능이 실행 가능한 옵션입니다.

구성 요소 문서 : Docz, Storybook 및 Styleguidist

스타일 가이드와 디자인 시스템은 엄청난 인기를 얻었습니다. Component-Driven Frameworks (예 : React) 및 관련 도구는이를 허영 프로젝트에서 필수 리소스로 변환했습니다.

Storybook, Docz 및 Styleguidist는 비슷한 목적을 제공합니다. 대화 형 UI 구성 요소 표시 및 API 문서화. 다양한 상태와 스타일로 수많은 구성 요소를 관리하려면 발견 가능성과 재사용을위한 중앙 집중식 카탈로그가 필요합니다. 스타일 가이드는 쉽게 검색 가능한 개요를 제공하여 시각적 일관성을 높이고 중복 작업을 방지합니다.

이 도구는 다른 구성 요소 상태의 검토를 단순화하여 라이브 응용 프로그램 내에서 모든 상태를 재생하는 문제를 극복합니다. 고립 된 구성 요소 개발을 통해 도달하기 어려운 상태 (예 : 로딩 상태)를 조롱 할 수 있습니다.

Storybook의 혜택에 대한 Dan Green의 의견은 Docz 및 Styleguidist에게도 동일하게 적용됩니다.

“Storybook은 설계와 엔지니어링 간의 협업을 단순화했습니다. 복잡한 설정 (Docker Containers 등)이 필요하지 않습니다. 웨이브의 경우, 우리는 단기간의 복잡한 프로세스 (예 :로드 스크린) 중에 만 보이는 구성 요소를 관리합니다. 스토리 북 이전에는 이러한 구성 요소를 관리하기 전에 스토리 북은 디자이너 및 PMS에 액세스 할 수있는 분리 된 환경을 제공합니다.

- Dan Green, Wave Financial

상태를 시각화하고 소품을 목록, 서면 컨텐츠 (설계 이론적, 사용 사례, 사용자 테스트 결과)는 구성 요소 문서를 향상시킵니다. Markdown의 접근성은 디자이너와 개발자 간의 협업 문서에 이상적입니다. Docz, Styleguidist 및 Storybook은 Markdown을 구성 요소와 완벽하게 통합합니다.

DOCZ

현재 반응 전용 (PREACT, VUE 및 웹 구성 요소에 대한 계획된 지원)으로 DOCZ (14,000 Github Stars)는 사용자 친화적 인 기능을 제공합니다. 그것은 제공합니다<playground></playground> 그리고<props></props> .mdx 파일 내에서 직접 사용되는 구성 요소.

 "Docz"에서 {Playground, Props} 가져 오기;
"../src/button"에서 가져 오기 버튼;

## 당신은 _write_ ** Markdown ** 할 수 있습니다.
### 구성 요소를 가져오고 사용할 수 있습니다

<playground>
  <button>딸깍 하는 소리</button>
</playground>

반응 구성 요소를 포장합니다<playground></playground> 임베디드 대화식 미리보기를 만듭니다.<props></props> 구성 요소 소품, 기본값 및 필요한 상태를 표시합니다.

<props of="{Button}"></props>

Docz의 MDX 기반 접근 방식은 직관적이고 효율적이며 우수한 개츠비 통합을 제공합니다.

Styleguidist

StyleGuidist는 MDX 대신 표준 .md 파일 내에서 Markdown 코드 블록 (트리플 백 티크)을 사용합니다.

 ```JS
 Console.log ( '클릭')

<code></code>

 <code>>Push Me</code>

코드 블록은 js , jsx 또는 javascript 렌더링을 대화 형 반응 구성 요소로 태그했습니다. 코드는 편집 가능하여 즉각적인 시각적 피드백을 제공합니다. Styleguidist는 Proptypes, Flow 또는 TypeScript 선언에서 소품 테이블을 자동으로 생성합니다. React 및 Vue를 지원합니다.

스토리 북

스토리 북 (36,000 Github Stars)은 UI 구성 요소 개발 환경입니다. Markdown/Mdx 대신 스토리 (구성 요소 상태를 나타내는)에 JavaScript 파일을 사용합니다.

 이야기 ( '버튼', 모듈)
  .add ( 'disabled', () => (
    <button disabled>Lorem Ipsum</button>
  )))

Storybook의 접근 방식은 Docz 및 Style Guidist보다 직관적이지 않습니다. 그러나 인기와 광범위한 프레임 워크 지원 (React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte, HTML)은 주목할 만하다. 문서에는 현재 애드온이 필요하지만 향후 릴리스는 DOCZ에서 영감을 얻은 MDX를 통합 할 것입니다.

 # 버튼

** Markdown 구문 **로 작성된 버튼에 대한 일부 _notes_.


<button>Lorem Ipsum</button>

Storybook의 다가오는 Docs 기능은 상당한 개선을 약속합니다.

결론

패턴 라이브러리의 가치는 널리 인정됩니다. 잘 실행 된 라이브러리는 시각적 일관성과 제품 응집력을 촉진합니다. 이러한 도구는 디자인 및 CSS 전문 지식을 대체하지 않지만 DOCZ, StoryBook 및 StyleGuidist는 조직 내에서 설계 시스템을 효과적으로 전달하기위한 훌륭한 솔루션을 제공합니다.

위 내용은 프론트 엔드 문서, 스타일 가이드 및 MDX의 상승의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!