Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
documentation-driven-development-in-small-team
Search
chanko
May 29, 2019
Programming
3
2.1k
documentation-driven-development-in-small-team
documentation driven development in small team with Angular
chanko
May 29, 2019
Tweet
Share
More Decks by chanko
See All by chanko
co-trip-ux-design
chanko
2
59
Other Decks in Programming
See All in Programming
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
Why Prism?
kddnewton
4
1.7k
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
370
Composing an API the *right* way (Droidcon New York 2024)
zsmb
2
130
XStateでReactに秩序を与えたい
gizm000
0
730
LangChainの現在とv0.3にむけて
os1ma
4
930
Securify_エンジニア採用資料
3shake
0
100
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
550
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
280
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
160
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Practical Orchestrator
shlominoach
185
10k
In The Pink: A Labor of Love
frogandcode
139
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Six Lessons from altMBA
skipperchong
26
3.4k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
The Mythical Team-Month
searls
218
43k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Producing Creativity
orderedlist
PRO
340
39k
Transcript
小規模チームにおける ドキュメント駆動開発のすすめ Kohei Iizuka ng-japan meetup 2019 Spring 2019/5/29
• 飯塚 航平(いいづか こうへい) • フロントエンドエンジニア(Angular) • 兼サーバサイドエンジニア(Go) • Voicy
• 開発歴1年弱 About me @chankolfin
What’s Voicy? パーソナリティが自らの声を通して 声のブログやニュースを放送している ボイスメディアです。 スマートフォンやウェブサイト、 スマートスピーカーを通して、 いつでもどこでもリスナーの耳に届きます。 ボイシーとは?
• 現在の開発と組織体制について • ドキュメント駆動による開発体制とアーキテクチャの改善 • 今後の展望 TL;DR
現在の開発と組織体制について
• toB案件のシステムの開発をほぼ一人で担当(サーバサイド含む) • 海外開発チームとの仕様書を通した開発連携 • フロントエンド主担当がいなかったことによるコンポーネントの肥大化 (スタイルガイドラインで400行推奨のところ、800行、、) • リリース重視によるテストなし、未使用メソッドの嵐 現在の開発と組織体制について
None
• NgRxによる状態管理 • テスト駆動開発によるコンポーネントの抽象化 • Atomic Designによるコンポーネントの標準化 • (モジュールの分割とLazy loading)
よく出てくるコンポーネント綺麗化対策
調べた結果 →あ、、これ一気に始めるの無理だわ
調べた結果 • 全て一気に行うことは工数的に難しい • 海外開発チームとの連携のため学習コストは下げたい、仕様書から開発できるよう にしたい →全てはコンポーネント、モジュール階層を適切に単純化すること →ドキュメント作成の自動化 + ドキュメント駆動による開発の単純化
+ コミュニケーション明確化
None
compodocとは
Demo 皆さんもすぐに実行可能 npm install -g @compodoc/compodoc // add to package.json
"scripts": { "compodoc": "npx compodoc -p src/tsconfig.app.json" } npm run compodoc
• コンポーネントの階層を見える化 • コメントの徹底 • 必要なメソッドが入ったことをそのまま確認できる • 実装不足や不必要なレビューを減らせる • 海外開発チームへの開発依頼を単純化
• 仕様書作成コストの削減 Compodocによるドキュメント作成自動化
Before(コンポーネント&モジュール)
After(コンポーネント&モジュール)
エンジニア in 日本 → 設計、スケール、事業の成長、仕様書の作成とQ&A対応、細かいレビュー エンジニア in 海外 → 開発、仕様書に対するQ&A セミコミットエンジニア → 開発とアドバイス、仕様書の作成とレビュー
Before(コミュニケーション)
エンジニア in 日本 → 設計、スケール、事業の成長、仕様書の作成とQ&A対応、細かいレビュー エンジニア in 海外 → 開発、仕様書に対するQ&A セミコミットエンジニア → 開発とアドバイス、仕様書の作成とレビュー
After(コミュニケーション)
• ドキュメントによる海外開発チームとの円滑&シンプルなコミュニケーションができる 体制づくり ◦ 「こんなメソッドが入っている、こういうコンポーネントを、こういう階層で作って!」 ◦ 実際に作ったものが要件通りに入っているかが一目でわかる ◦ コメント不足の見える化とコメントの徹底 •
コンポーネント再設計→テストの流れを少しずつ作る ◦ Lazy loading with Doc(モジュールの分離) ◦ Container & Presentational Component with Doc(コンポーネントの分離) ◦ State Management with Doc(状態管理) ◦ Testing with Doc(テスト) • 新規で開発する人、セミコミがすぐにバリューを出せる環境づくり 今後の展望
は、、?NgRxもテストもドキュメント化できないで使えると思ってんのか おまけ ← 4月にIssue化されている
おまけDemo