this repo has no description
update crc card playground
+32
-7
+19
-1
src/components/architecture/crc-card.vue
+19
-1
src/components/architecture/crc-card.vue
···
7
7
responsabilities?: string[]
8
8
collaborators?: string[]
9
9
editable?: boolean
10
+
isPlayground?: boolean
10
11
}
11
12
12
13
const emits = defineEmits<{
13
14
(e: "submit", crc: CrcCardEntity): void
15
+
(e: "remove", crcName: string): void
14
16
}>()
15
17
16
18
const props = withDefaults(defineProps<Props>(), {
···
18
20
responsabilities: () => [],
19
21
collaborators: () => [],
20
22
editable: false,
23
+
isPlayground: false,
21
24
})
22
25
23
26
const componentName = ref(props.name)
···
65
68
}
66
69
67
70
const submitCard = () => {
71
+
if (!componentName.value) {
72
+
return
73
+
}
74
+
68
75
emits("submit", {
69
76
name: componentName.value,
70
77
responsabilities: allReponsabilities.value,
···
72
79
})
73
80
clearCard()
74
81
}
82
+
83
+
const removeCard = () => {
84
+
if (!componentName.value) {
85
+
return
86
+
}
87
+
88
+
emits("remove", componentName.value)
89
+
}
75
90
</script>
76
91
77
92
<template>
···
86
101
<h3 v-else>
87
102
{{ componentName }}
88
103
</h3>
89
-
<button v-if="editable" @click="submitCard">create</button>
104
+
<button v-if="editable" :disabled="!componentName" @click="submitCard">
105
+
create
106
+
</button>
107
+
<button @click="removeCard" v-else-if="isPlayground">×</button>
90
108
</section>
91
109
<section>
92
110
<div class="responsabilities">
+5
src/components/architecture/crc-project.vue
+5
src/components/architecture/crc-project.vue
···
7
7
const addCrcCard = (card: CrcCardEntity) => {
8
8
crcCards.value = [...crcCards.value, card]
9
9
}
10
+
const removeCard = (cardName: string) => {
11
+
crcCards.value = crcCards.value.filter((card) => card.name !== cardName)
12
+
}
10
13
</script>
11
14
12
15
<template>
···
19
22
:name="card.name"
20
23
:responsabilities="card.responsabilities"
21
24
:collaborators="card.collaborators"
25
+
@remove="removeCard"
26
+
is-playground
22
27
/>
23
28
</section>
24
29
</div>
+2
src/pages/crc-cards-playground.mdx
+2
src/pages/crc-cards-playground.mdx
+6
-6
src/pages/posts/crc-cards-as-training-material.mdx
+6
-6
src/pages/posts/crc-cards-as-training-material.mdx
···
7
7
8
8
# CRC Cards as training material
9
9
10
-
CRC Card: **C**lass name, **R**esponsibilities, **C**ollaborators.
10
+
> CRC Card: **C**lass name, **R**esponsibilities, **C**ollaborators.
11
11
12
12
[CRC Cards](https://en.wikipedia.org/wiki/Class-responsibility-collaboration_card) are a teaching tool on how to design software. They were proposed by [Kent Beck](https://www.kentbeck.com) and [Ward Cunningham](https://en.wikipedia.org/wiki/Ward_Cunningham), and, hell yeah it's useful.
13
13
···
136
136
137
137
Only the `user id` is necessary, why not just give the user id instead of the whole object? That will be our first simplification <OrderTag order={1} />.
138
138
139
-
> We'll simplify at the very end, once we'll be finished with our CRC card.
139
+
> ℹ️ We'll simplify at the very end, once we'll be finished with our CRC card.
140
140
141
-
> Here is a classic responsibility leak I frequentely see. When you're developing a feature, you have the big picture but `UserBookmarks` and its local knowledge don't care about the user having a `user.address.line1` property.
141
+
> ℹ️ Here is a classic responsibility leak I frequentely see. When you're developing a feature, you have the big picture but `UserBookmarks` and its local knowledge don't care about the user having a `user.address.line1` property.
142
142
143
143
## The secret sauce
144
144
145
145
Now comes where we'll challenge how the component does its magic.
146
146
147
-
### Tell me about your hooks, I'll tell you who you are
147
+
### _"Tell me about your hooks, I'll tell you who you are"_
148
148
149
149
Without being a rule of thumb, I like to count how many `use` there are in the component, it gives me good approximation about how many responsibilities lies.
150
150
···
160
160
responsabilities={[
161
161
"Display user bookmarks",
162
162
"fetching bookmarks",
163
-
"handling async processes (loading, error)",
163
+
"handling async processes (loading and error state)",
164
164
"handling add bookmark modal visibility",
165
165
]}
166
166
collaborators={["Home.tsx"]}
···
216
216
// ...
217
217
```
218
218
219
-
### <OrderTag order={2} /> not responsible about the animation
219
+
### <OrderTag order={2} /> not responsible of child's animation
220
220
221
221
```tsx
222
222
// removing the magic number at the same time