原子力設計における私の取組み

約1週間、私はサイドプロジェクトに取り組んでいます.UIフレームワークとして、他のプロジェクトに.しかし、私はまだ自分のコンポーネントを作成する自由を好む
私が好きだった1つの事Atomize それは採用されたAtomic Design , したがって、名前.あなたが原子設計が何であるかについてわからないならば、ここの彼らのウェブサイトからの概要です

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

基本的に、この木を登るにつれて、部品はより複雑になる.分子は原子から成り立ち、生物は分子から成り立っている.
このプロジェクトのために、私は次に使用しています.反応の上のJS.
そのためには、私はcomponent ディレクトリと他のフォルダを含んでいない.これは、それを簡素化し、より普遍的にすることです.
ここでは、通常の反応コンポーネントのフォルダのように見えるかもしれないです

- components
  - button.jsx
  - title.jsx

より多くのコンポーネントがあります、多分、彼らは彼らのフォルダの中にあるでしょう、しかし、点は同じままです.コンポーネントはすべて一緒に構成されていません.彼らが首尾一貫している限り、それは大丈夫です.
しかし、「OK」は標準である必要はありません.私たちは“OK”よりも行うことができます.
これは、より複雑なファイルシステムが通常のコンポーネント構造を使用しているようです.その後、同じ構造が原子設計を使用します.

// Normal
- components
  - Button
    - index.jsx
  - Title
    - index.jsx
  - Hero
    - index.jsx
  - Navbar
    - index.jsx
  - Dropdown
    - index.jsx

// Atomic
- components
  - atoms
    - Button
      - index.jsx
    - Title
      - index.jsx
  - molecules
    - Dropdown
      - index.jsx
  - organisms
    - Hero
      - index.jsx
    - Navbar
      - index.jsx

今、少なくとも私には、これらのコンポーネントの余分な組織が好きです.しかし、いくつかのフォルダを移動して原子設計にもっとあります.この戦略の肉とジャガイモはモジュラーコンポーネントを作り、お互いに依存している.
例えば、h1 あなたのヒーローのセクションの要素は、タイトルのコンポーネントを構築し、プロジェクト全体を使用します.より高いレベルのコンポーネントは、可能な限り低いコンポーネントに依存する必要があります.
だから、あなたのヒーローのセクションでは、タイトル、本文、およびボタンのコンポーネントを使用することがあります.
原子設計を使用することの最も良い利点の1つは、サイトが一貫していなければならないということです.これは、複数の開発者との大きなプロジェクトで非常に重要です.
このテクニックを使用することに関するもう一つの良いことは、それが収容されるのがより簡単であるということです.私がいくつかのオープンソースプロジェクトに貢献し始めているならば、プロジェクトが基本的な構造を含んでいるならば、それは私が理解するのが非常に簡単です.私は原子やページを見ることによってプロジェクトにエントリーポイントを持つことになる.原子は多くの基礎的なコードを示します、そして、ページはプロジェクトのより高い眺めを提供します.
私は原子力設計は重大な考慮の価値があると思います、特にプロジェクトが散在的で矛盾したコードベースを持っているなら.

これからどうするか
原子設計をしていないとしても、構造やデザインの中で、自分の構成要素をどのように構成し、一貫性を保っているのかを意識してみるべきだと思います.
読書ありがとう❤️. 楽しんでください.私はすべてのフィードバックと提案に感謝します.あなたが私がカバーしなければならないと思う何かのために少しのアイデアも持っているならば、私に知らせてください.
ソーシャルメディア

Github

My Website