Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division

by nrs

Slide 1

Slide 1 text

Masanobu Naruse Vue.js × Atomic Design - コンポーネント分割の指針

Slide 2

Slide 2 text

Name: {{name}}
Job: {{job}}
Company: {{company}}
Twitter: {{twitter}}

import { Component, Vue } from 'vue-property-decorator'; @Component export default class MyProfile extends Vue { public name: string = 'Masanobu Naruse'; public jobs: string[]= ['Programmer', 'Developer Evangelist']; public company: string = 'GMO Internet, Inc.'; public twitter: string = '@nrslib'; public get job(): string { return this.jobs.join(', '); } }

Slide 3

Slide 3 text

Agenda 1. Vue.js と Atomic Design の関係 2. 実践 3. まとめ

Slide 4

Slide 4 text

Agenda 1. Vue.js と Atomic Design の関係 2. 実践 3. まとめ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

新規プロジェクト立ち上げ

Slide 8

Slide 8 text

時代は Vue だよ！

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

jQuery 入れていいですか？

Slide 13

Slide 13 text

当時のチームのスキルマップ

Slide 14

Slide 14 text

SPA やったことある勢

Slide 15

Slide 15 text

SPA やったことある勢 me

Slide 16

Slide 16 text

SPA やったことある勢 jQuery 勢 me

Slide 17

Slide 17 text

SPA やったことある勢 jQuery 勢 me

Slide 18

Slide 18 text

SPA やったことある勢 jQuery 勢 me jQuery メインになりそう

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

無意味に重複したコード読み込まないと目的が分からないコード実装者以外解読が難しいコード

Slide 21

Slide 21 text

無意味に重複したコード読み込まないと目的が分からないコード実装者以外解読が難しいコード排除したい

Slide 22

Slide 22 text

重複したコードを減らすコツ

Slide 23

Slide 23 text

重複したコードを減らすコツモジュール性を高めること

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

理解しやすいコードのコツ

Slide 26

Slide 26 text

理解しやすいコードのコツ理解の範囲を狭めること

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

時代はコンポーネント指向だ

Slide 29

Slide 29 text

コンポーネント指向で作ってください

Slide 30

Slide 30 text

コンポーネント指向で作ってくださいはいわかりました

Slide 31

Slide 31 text

コンポーネント指向で作ってくださいはいわかりましたうまくいくとは思えない

Slide 32

Slide 32 text

コンポーネント指向を根付かせるために

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

コンポーネント指向

Slide 38

Slide 38 text

コンポーネント指向

Slide 39

Slide 39 text

これに従って作ろうコンポーネント指向

Slide 40

Slide 40 text

これに従って作ろうイメージつかないなぁコンポーネント指向

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

これに従って作ろう

Slide 43

Slide 43 text

これに従って作ろうわかる気がする

Slide 44

Slide 44 text

Agenda 1. Vue.js と Atomic Design の関係 2. 実践 3. まとめ

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

実際どう作れば？

Slide 47

Slide 47 text

すべては Atom からなります実際どう作れば？

Slide 48

Slide 48 text

すべては Atom からなります実際どう作れば？うまくいくとは思えない

Slide 49

Slide 49 text

人を動かすためのステップ

Slide 50

Slide 50 text

やってみせ、言って聞かせて、させてみせ、ほめてやらねば、人は動かじ。

Slide 51

Slide 51 text

やってみせ、言って聞かせて、させてみせ、ほめてやらねば、人は動かじ。

Slide 52

Slide 52 text

ひとつのページを分析してみせる

Slide 53

Slide 53 text

© 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name

Slide 54

Slide 54 text

Atom

Slide 55

Slide 55 text

Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Logo

Slide 56

Slide 56 text

https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG HeaderTitle Nrs Seminar

Slide 57

Slide 57 text

Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name TOP Search © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG TextBox Search

Slide 58

Slide 58 text

Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name Search TOP © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG PrimaryButton Search

Slide 59

Slide 59 text

Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name Search Search © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG SideMenuButton TOP

Slide 60

Slide 60 text

Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name Search Search TOP © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name BLOG TOP > ABOUT ME BreadCrumb

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Molecules

Slide 63

Slide 63 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell

Slide 64

Slide 64 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell

Slide 65

Slide 65 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle

Slide 66

Slide 66 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle

Slide 67

Slide 67 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Placeholder Button

Slide 68

Slide 68 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Placeholder Button

Slide 69

Slide 69 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell TableCell TableCell HomePageTitle Placeholder Button

Slide 70

Slide 70 text

Organism

Slide 71

Slide 71 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell

Slide 72

Slide 72 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell

Slide 73

Slide 73 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TableCell TableCell

Slide 74

Slide 74 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TableCell TableCell

Slide 75

Slide 75 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell

Slide 76

Slide 76 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell

Slide 77

Slide 77 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG TableCell TableCell

Slide 78

Slide 78 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG

Slide 79

Slide 79 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell HomePageTitle Search Search TableCell TableCell TableCell TableCell TableCell TableCell BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG

Slide 80

Slide 80 text

あとはページを担当分けしてみんなでやってもらう Here is a sample.

Slide 81

Slide 81 text

その間にサンプル作成

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

import { Component, Vue } from 'vue-property-decorator'; ... @Component({ components: { GlobalMessage, FooterMenu, NotifyMessage, SideMenu, HeaderMenu }, }) export default class NormalTemplate extends Vue {}

Slide 84

Slide 84 text

Slide 85

Slide 85 text

import { Component, Vue } from 'vue-property-decorator'; import NormalTemplate from 'front/atomic/Templates/Layer/NormalTemplate.vue'; @Component({ components: { NormalTemplate }, }) export default class TopRootPage extends Vue {}

Slide 86

Slide 86 text

{{$t("breadcrumb-home")}} {{$t("title")}} Masanobu Naruse Programmer / Developer Evangelist GMO Internet, Inc. UX UI / DevRel. @nrslib https://nrslib.com

Slide 87

Slide 87 text

{{$t("breadcrumb-home")}} {{$t("title")}} Masanobu Naruse Programmer / Developer Evangelist GMO Internet, Inc. UX UI / DevRel. @nrslib https://nrslib.com

Slide 88

Slide 88 text

import { Vue, Component, Prop } from 'vue-property-decorator'; @Component({ name: 'NormalLink' }) export default class NormalLink extends Vue { @Prop() public to: any; @Prop() public href: string; }

Slide 89

Slide 89 text

atomic Atoms Molecules Organisms Templates Link Button NormalLink PrimaryButton SecondaryButton LinkButton AddButton Table TableColumn TableColumnHeader Table TableRow Table TableComponent TableSearchTable TableHeader Contents Layer : : : NormalTemplate NoAuthorityTemplate Contents ContentsWithBreadcrumb 構成サンプル

Slide 90

Slide 90 text

pages Top TopRootPage TopIndexPage Index Info Index Detail InfoRootPage InfoIndexPage InfoDetailPage TopRoute InfoRoute InfoData 構成サンプル（ページ）：

Slide 91

Slide 91 text

やってみせ、言って聞かせて、させてみせ、ほめてやらねば、人は動かじ。

Slide 92

Slide 92 text

皆がつまずいたポイント

Slide 93

Slide 93 text

タグとかどうします？

Slide 94

Slide 94 text

案ずることはないすべては Atom だ

タグとかどうします？

import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class Heading1 extends Vue { }

Slide 95

Slide 95 text

タグは？

Slide 96

Slide 96 text

タグは？位置調整などはコンポーネントにしない

Test Button

Slide 97

Slide 97 text

ボタンって更に分けられません？ Search

Slide 98

Slide 98 text

分けたらボタンじゃなくなるボタンって更に分けられません？ Search Search

Slide 99

Slide 99 text

ファイル作りすぎじゃ

Slide 100

Slide 100 text

ファイルが増えてもフォルダ分けすれば探せるファイル作りすぎじゃ

Slide 101

Slide 101 text

どれが Atom でどれが Molecules でどこからが Organism？

Slide 102

Slide 102 text

どれが Atom でどれが Molecules でどこからが Organism？ Atom を利用したら Molecules Molecules を利用してたら Organism 意味ある塊なら Organism

Slide 103

Slide 103 text

Organism を利用した Organism が出てきました！

Slide 104

Slide 104 text

Organism は Organism をコンポジションしていいそもそも３つのレイヤーでおさまるわけがない Organism を利用した Organism が出てきました！

Slide 105

Slide 105 text

やってみせ、言って聞かせて、させてみせ、ほめてやらねば、人は動かじ。

Slide 106

Slide 106 text

コンポーネントで大事なこと

Slide 107

Slide 107 text

{ ‘data’ : ‘a’} Parent Component Child Component

Slide 108

Slide 108 text

{ ‘data’ : ‘a’} Copy { ‘data’ : ‘a’} Parent Component Child Component

Slide 109

Slide 109 text

Parent Component Child Component { ‘data’ : ‘a’} { ‘data’ : ‘a’} Change

Slide 110

Slide 110 text

Parent Component Child Component { ‘data’ : ‘a’} { ‘data’ : ‘b’} Change

Slide 111

Slide 111 text

Parent Component Child Component { ‘data’ : ‘a’} { ‘data’ : ‘b’} Notify

Slide 112

Slide 112 text

Parent Component Child Component { ‘data’ : ‘b’} { ‘data’ : ‘b’} Notify

Slide 113

Slide 113 text

Parent Component Child Component { ‘data’ : ‘b’} { ‘data’ : ‘b’} Notify

Slide 114

Slide 114 text

Parent Component Child Component { ‘data’ : ‘b’} { ‘data’ : ‘b’} Notify コンポーネント作りの経験がないとやりがち

Slide 115

Slide 115 text

{ ‘data’ : ‘a’} Parent Component Child Component

Slide 116

Slide 116 text

{ ‘data’ : ‘a’} Parent Component Child Component Notify event

Slide 117

Slide 117 text

{ ‘data’ : ‘a’} Parent Component Child Component Change

Slide 118

Slide 118 text

{ ‘data’ : ‘b’} Parent Component Child Component Change

Slide 119

Slide 119 text

{ ‘data’ : ‘b’} Parent Component Child Component Change モデルバインド（v-model）もこの動作をしている

Slide 120

Slide 120 text

{ ‘data’ : ‘b’} Parent Component Child Component Change Child Component Notify event Notify event 親子が増えても一緒

Slide 121

Slide 121 text

SPA やったことある勢 jQuery 勢 me

Slide 122

Slide 122 text

SPA やったことある勢 jQuery 勢 me 彼らに経験を積んでもらうには？

Slide 123

Slide 123 text

実践の場の提供

Slide 124

Slide 124 text

Play Ground

Dropdown Table Modal Tab Password Button Text FormElement & Validator datepicker L@@ding ProgressTracker Progress Checkbox Panel VariableInput RadioGroup Clipboard InnerWizard Tooltip ConfigurationTips Pager Anchor Capacity EmptyPanel Carousel Graph import { Component } from 'vue-property-decorator'; import { BasePage } from '@lib/vue/BasePage'; import NormalTemplate from 'front/atomic/Templates/Layer/NormalTemplate.vue'; import LinkButton from 'front/atomic/Atoms/Button/LinkButton.vue'; @Component({ components: { LinkButton, NormalTemplate }, }) export default class ModulePlayGroundRootPage extends Vue {}

Slide 125

Slide 125 text

Play Ground

Slide 126

Slide 126 text

Add row Clear SwitchLoading ページング件数指定検索通常テーブル（全データ） PlayGround があればコンポーネントの使い方もわかる

Slide 127

Slide 127 text

やってみせ、言って聞かせて、させてみせ、ほめてやらねば、人は動かじ。

Slide 128

Slide 128 text

褒めるタイミング

Slide 129

Slide 129 text

褒めるタイミングレビュー

Slide 130

Slide 130 text

できました

Slide 131

Slide 131 text

できましたそうそう！そうだよ！最高！

Slide 132

Slide 132 text

できましたそうそう！こうだよ！最高！間違いを指摘するだけがレビューじゃない！

Slide 133

Slide 133 text

レビューは勘違いを正すために慣れるまでは細かい単位で

Slide 134

Slide 134 text

Agenda 1. Vue.js と Atomic Design の関係 2. 実践 3. まとめ

Slide 135

Slide 135 text

Atomic Design に忠実であるべきか

Slide 136

Slide 136 text

Slide 137

Slide 137 text

重要なのは

Slide 138

Slide 138 text

無意味に重複したコード読み込まないと目的が分からないコード実装者以外解読が難しいコード排除したい

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

テックリードとしてチームに関わるときは

Slide 141

Slide 141 text

すべては Atom からなります実際どう作れば？押し付けるのではなく

Slide 142

Slide 142 text

やってみせ、言って聞かせて、させてみせ、ほめてやらねば、人は動かじ。実践に至る道筋を設計しよう

Slide 143

Slide 143 text

やってみせ、言って聞かせて、させてみせ、ほめてやらねば、人は動かじ。話し合い、耳を傾け、承認し、任せてやらねば、人は育たず。やっている、姿を感謝で見守って、信頼せねば、人は実らず。山本五十六

Slide 144

Slide 144 text

Auther Masanobu Naruse HomePage https://nrslib.com Twitter @nrslib