Atomic Designとフロントエンドのインピーダンスミスマッチ / Impedance mismatch in atomic design

by nrs

Slide 1

Slide 1 text

Atomic Designとフロントエンドのインピーダンスミスマッチ nrs @nrslib

Slide 2

Slide 2 text

とある日の会話 Me

Slide 3

Slide 3 text

とある日の会話 Me フロントでなんか面白そうなのある？

Slide 4

Slide 4 text

とある日の会話 Me フロントでなんか面白そうなのある？ Atomic Design ってのを耳にしました

Slide 5

Slide 5 text

とある日の会話フロントでなんか面白そうなのある？ Atomic Design ってのを耳にしましたじゃあそれ採用で Me

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

簡単そう

Slide 8

Slide 8 text

Button Atoms TextBox DropDown Label

Slide 9

Slide 9 text

Button Atoms TextBox DropDown Label 簡単

Slide 10

Slide 10 text

Button Molecules TextBox SearchBox

Slide 11

Slide 11 text

Button Molecules TextBox SearchBox わかる

Slide 12

Slide 12 text

Button Organisms TextBox Header Label

Slide 13

Slide 13 text

Button Organisms TextBox Header Label これはいける

Slide 14

Slide 14 text

本当に？

Slide 15

Slide 15 text

Atoms TableCell Paging button TabButton TabContent

Slide 16

Slide 16 text

Molecules TableRow TableCell TableCell TableCell TableCell PagingMenu 2 1 3 > < TabMenu TabButton TabButton TabButton

Slide 17

Slide 17 text

Organisms Table Tab

Slide 18

Slide 18 text

Organisms Table Tab

Slide 19

Slide 19 text

Organisms Table Tab

Slide 20

Slide 20 text

Organisms Table Tab Organism + Organism = ？

Slide 21

Slide 21 text

Another side

Slide 22

Slide 22 text

Atoms Button Modal

Slide 23

Slide 23 text

Molecules OK Cancel ModalFooterYesNo Close ModalFooterClose

Slide 24

Slide 24 text

Organisms ModalYesNo Content

Slide 25

Slide 25 text

Organisms ModalYesNo Content

Slide 26

Slide 26 text

Organisms ModalYesNo Content Success !

Slide 27

Slide 27 text

Organisms ModalYesNo Content Success ! Good

Slide 28

Slide 28 text

ModalChangeUserName Success ! TableCell UserName

Slide 29

Slide 29 text

ModalChangeUserName Success ! TableCell UserName Organisms ?

Slide 30

Slide 30 text

Templates の話をしよう

Slide 31

Slide 31 text

Templates Footer

Slide 32

Slide 32 text

Templates Footer Pages Information Since 2018 Image

Slide 33

Slide 33 text

Templates Footer Pages Information Since 2018 Image OK

Slide 34

Slide 34 text

Templates Footer Pages Since 2018 Contents SideMenu Top Information XXXX YYYY ZZZZZ Contents

Slide 35

Slide 35 text

Templates Footer Pages Since 2018 Contents SideMenu Top Information XXXX YYYY ZZZZZ Contents Good

Slide 36

Slide 36 text

But

Slide 37

Slide 37 text

Templates Footer Contents Footer Contents SideMenu

Slide 38

Slide 38 text

Templates Footer Contents Breadcrumb Footer Contents SideMenu Breadcrumb

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Good ?

Slide 41

Slide 41 text

NoMenuLayout Footer Footer SideMenu NormalLayout

Slide 42

Slide 42 text

NormalContent Contents BreadcrumbContent Contents Breadcrumb

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Good

Slide 49

Slide 49 text

もう一つ

Slide 50

Slide 50 text

Project directory atomic

Slide 51

Slide 51 text

Project directory atomic atoms molecules

Slide 52

Slide 52 text

Project directory atomic atoms molecules PrimaryButton SecondaryButton TabButton TabConent TextBox Label Paragraph Dropdown Link Heading : : :

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Project directory atomic atoms molecules PrimaryButton SecondaryButton TabButton TabConent TextBox Label Paragraph Dropdown Link Heading : : :

Slide 55

Slide 55 text

Project directory atomic atoms molecules PrimaryButton SecondaryButton TabButton TabConent TextBox Label Paragraph Dropdown Link Heading : : : 気づけない

Slide 56

Slide 56 text

では

Slide 57

Slide 57 text

フロントエンドにおいて Atomic Design は使い物にならない？

Slide 58

Slide 58 text

フロントエンドにおいて Atomic Design は使い物にならない？

Slide 59

Slide 59 text

フロントエンドにおける Atomic Design のメリット

Slide 60

Slide 60 text

それは

Slide 61

Slide 61 text

粒度の指針

Slide 62

Slide 62 text

Atomic Design を意識したコンポーネントの粒度はフロントエンドのコンポーネントの粒度にマッチしやすい（プログラマにフレンドリー）

Slide 63

Slide 63 text

まとめフロントエンドにそのまま採用すると辛くなる部分が出るからうまくいくようにインピーダンスミスマッチを埋めよう

Slide 64

Slide 64 text

おまけ途中出てきた問題にはどう対処したか ※こんな感じでやってみましたというものなので鵜呑み厳禁

Slide 65

Slide 65 text

全部 Organisms

Slide 66

Slide 66 text

LayoutTemplate ContentsTemplate 原文の Template は不採用

Slide 67

Slide 67 text

フォルダを分けた atomic atoms molecules PrimaryButton SecondaryButton TabConent LinkButton Button Tab TabButton

Slide 68

Slide 68 text

Auther nrs HomePage https://nrslib.com Twitter @nrslib