コンポーネント設計のすゝめ__ベストプラクティスを学ぶLunch_LT_.pdf

by MJ

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Copyright © aumo, Inc. All Rights Reserved. コンポーネント毎に責務の範囲を明確化レベル Atomic Design ディレクトリ責務 1 Atoms(原子) ~components/atoms ・最小UIコンポーネント 2 Molecules(分子) ~components/molecules ・Atomsを組合せたUIコンポーネント 3 Organisms(有機体) ~components/organisms ・複数のAtoms、Moleculesを持つUIコンポーネント・ビジネスロジック・状態管理(Dispatch/Render) 4 Template(テンプレート) ~layouts ・下位レベルのコンポーネントを組み合わせた UIフレーム 5 Page(ページ) ~pages ・アプリケーションのルート・router関連の処理・認証認可・状態管理(Dispatch) Atomic Designに合わせて責務を区切る   

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text