React 및 Bit를 이용한 원자 설계: 복잡한 UI 단순화

Stjepan Golemac의 최초 출판"Bits and Pieces"

사용자 인터페이스의 복잡성을 분해하고 쉽게 관리하며 구성 요소를 분류하고 조합하는 방법

문제

전단 개발의 세계는 갈수록 복잡해지고 있다.내가 진도를 따라가기 위해 뉴스와 추문을 읽기로 결정할 때마다 새로운 구조, 도구, 기술과 사용자의 수요가 있다.
이런 신속하고 끊임없이 변화하는 환경에서 방향을 찾는 것은 어렵다.안정적인 기초를 찾는 방법 중 하나는 일부 표준이나 디자인 시스템에 따라 코드를 조직하는 것이다.

원자 설계

그것은 모든 구성 요소의 차원, 중요성, 유형과 역할을 식별하는 시스템이다.이런 구성 부분의 조합 방식은 우리 우주의 구조와 유사하다.

원자

분자

생물체

템플릿

페이지

왜?

우리가 프로젝트의 구성 요소 수량에 잠기기 시작할 때, 어떤 설계 시스템이 필요하다.100개 또는 200개의 구성 요소가 있는 항목에서는 모든 내용을 기억하기가 쉽지 않습니다.

기원

이 시스템의 배후 사상은 브래드 프로스트입니다. 더 많은 것을 알고 싶은 사람들에게는 이 주제에 대한 그의 깊은 댓글을 먼저 읽어 주십시오.심지어 하나book도 있다.

예제 UI

내가 완벽한 사용자 인터페이스를 찾아 재건하는 과정에서 나는 내가 완전히 만족할 만한 어떤 것도 찾지 못했다.이것은 내가 찾을 수 있는 가장 가까운 것이다.

나는 픽셀을 보완하려고 시도하지 않을 뿐만 아니라, 완전히 같은 레이아웃을 실현하지도 않을 것이다.이곳의 목표는 구성 요소의 분리를 보여주는 것이다.

붕괴

나는 이것이 확실한 과정이라고 생각하지 않는다.나는 이 UI를 구성 요소로 분해하는 더 좋은 방법이 있다고 확신하지만, 본질은 똑같아서 그것들을 더욱 쉽게 관리할 수 있다.나는 위에서 아래로 내려가는 방법을 사용할 것이다.

한 페이지 - 대시보드

두 템플릿 - 제목 및 작업공간

많은 생물체 - 도구, 시간, 지도 등

심지어 더 많은 분자 - 도구 단추, 온도 정보, 공급 항목...

더 많은 원자 - 태그, 아이콘, 링크, 제목 등

목록을 편집하다

모든 구성 요소를 결합하여 온라인 디렉터리에서 사용할 수 있도록 하면 미래의 개발자들이 그것들을 더욱 쉽게 찾고 사용할 수 있을 것이다.

Bit와 UI 구성 요소 공유 및 조합

Bit는 소스 오픈 도구(GitHub 및platform로 가장 좋아하는 UI 구성 요소의 집합을 만들어 발견하고 공유할 수 있도록 합니다.
Bit를 사용하면 서로 다른 프로젝트에서 재사용 가능한 구성 요소를 공유할 수 있으며, 활동적인 운동장에서 온라인으로 사용하고, 모든 프로젝트에서 사용할 수 있습니다.
구성 요소는 쉽게 분리되고 관리되며 NPM을 통해 어디에나 설치할 수 있습니다.또한 Bit 자체를 사용하여 현재 처리 중인 프로젝트의 구성 요소 변경 사항을 개발하고 동기화할 수 있습니다.
그것은 관리 부품 시스템의 흔한 문제를 해결하고 개발자가 생산력을 향상시키는 동시에 바퀴를 재발명하는 것을 피했다.다음은 밀어넣기 범위의 렌더링 어셈블리의 예입니다.자세한 내용은 여기를 참조하십시오.
.

결과

마지막으로 예제 UI에서 보기 구성을 구성할 수 있는 15개의 구성 요소를 만들었습니다.이 도표들은 본문의 범위를 초과했기 때문에 포함되지 않는다.구성 요소가 목록으로 구성되어 있으며 이 link 에서 얻을 수 있습니다.전체 코드를 포함하는 환매 협의는 여기서 찾을 수 있다
개발이 끝난 후에 자신의 구성 요소 디렉터리를 만드는 것은 정말 쉽다.너는 sign up만 물어봐.dev, 그리고 간단한 명령 몇 개를 입력하면 완성됩니다.

# Navigate to the project directory and initialize Bit
$ cd project_dir

$ bit init
$ bit login

# Add the components to the local scope
$ bit add src/components/atoms/*
  ...
$ bit add src/components/pages/*

# Check if all components are added
$ bit status

# Tag the version and upload the components to Bit
$ bit tag --all 1.0.0
$ bit export <your_username>.<your_scope>

결과는 이것link에서 볼 수 있다.이것은 어셈블리를 내보내는 네임스페이스로 간주할 수 있는 집합입니다.당신은 임의의 수량의 소장품을 가지고 있으며, 그것을 개인 소장품이나 공공 소장품으로 설정할 수 있습니다.<Panel /> 구성 요소 here 를 살펴보겠습니다.구성 요소 문서, 테스트, 구축, 컴파일을 지원합니다.파일 구조와 코드를 탐색할 수도 있습니다.

$ bit init
$ bit import <your_username/<your_scope/avatar-image \
  --path src/components/avatar-image

이제 구성 요소를 가져오기만 하면 미래의 모든 항목에서 이 구성 요소를 사용할 수 있습니다.구성 요소를 가져오는 항목이 자원 번들을 지원하는지 확인해야 합니다.예를 들어, 위의 링크에서 구성 요소를 가져옵니다.css 파일.
구성 요소 렌더링, 테스트, 문서 등 Bit가 제공하는 기능을 탐색해야 합니다.가장 좋은 것은 official documentation부터 시작하는 것이다.
멋있죠?

총결산

Bit는 모듈화와 재사용 가능한 구성 요소를 더욱 쉽게 표준화된 방식으로 관리할 수 있는 새로운 도구이다.개발자는 프로젝트 수요와 고품질의 코드 교부에 관심을 가져야 한다. 그들은 그들의 구성 요소가 다른 프로젝트에서 사용되거나 다른 사람에게 사용될 것을 걱정해서는 안 된다.

마지막 한 가지..

나는 splotch.dev에 자신의 블로그를 세웠다.나는 계속 그곳에서 글을 쓸 것이니 반드시 한번 보아야 한다.👋

자세한 내용

React에서 코드 재사용을 최대화합니다.어떻게 공유를 통해 발전을 가속화합니까

이든 엘라・ 2020년 3월 4일・ 6분 읽기 중등적