Angularプロダクト構築アンチパターン

ng-fukuoka Angular Meetup #2の発表資料です。

Transcript

1. Angularプロダクト構築アンチパターン ng-fukuoka Angular Meetup #2 / Jan 20, 2018 ponday(@ponday_dev)
2. Profile Honda, Yusuke (@ponday_dev) chibi-developer ng-fukuoka organizer Community TypeScript / JavaScript / Kotlin RxJS / Angular Like
3. お仕事でもAngularを書いてます
4. その中で感じた （個人的）プロダクト構築アンチパターン
5. - あくまで個人的な見解ですので、Angular公式が推奨するもの ではありません - フロントエンドのみで約3万行の小～中規模アプリケーション開 発を通じての感想です。規模によっては不適切な場合があり ます。 ご注意
6. アンチパターン①　Angular CLIを使わない
7. 使いましょう
8. - 自前で環境構築してメンテするには覚悟が必要 - 追従が大変 - コード生成できない - （一応）脱出もしやすい - ng eject webpack.config.js - IonicにもCLIがあるのでそっち使うほうが無難 アンチパターン①　Angular CLIを使わない
9. アンチパターン②　NgModuleがネストしている
10. モジュールBはモジュールAにインポートされるから... /A/A.module.ts /A/modules/B/B.module.ts
11. モジュールBはモジュールAにインポートされるから... /A/A.module.ts /A/modules/B/B.module.ts ←
12. - ネストしても良いことは少ない - インポートパスが長くなる - 再利用しにくい - ディレクトリ構造そのまま別のモジュールでインポートすると実態と合わなくな る - モジュールはディレクトリ的にはフラットに アンチパターン②　NgModuleがネストしている
13. アンチパターン③　コンポーネントを分割しすぎる
14. - header - my-button - view-container - foo-page - foo-toolbar - foo-list - foo-list-header - foo-list-body - foo-footer - … - bar-page - bar-toolbar - bar-form - ...
15. - header - my-button - view-container - foo-page - foo-toolbar - foo-list - foo-list-header - foo-list-body - foo-footer - … - bar-page - bar-toolbar - bar-form - ... 本当に必要...？
16. - header - my-button - view-container - foo-page - bar-page いらないなら分けない
17. - 本当にそのコンポーネント再利用しますか？ - 再利用できるコンポーネントは結構少ない - 最初はよく再利用される物だけ作る（ヘッダ、ボタンなど） - 再利用が必要になってはじめて分ける - コンポーネントの階層が深くなると状態の管理が面倒 - バケツリレーが長くなる - どのコンポーネントで状態が変更されるかわかりづらい アンチパターン③　コンポーネントを分割しすぎる
18. アンチパターン④　Module一つあたりの役割が大きい
19. モジュールは分けなくてもアプリは作れる
20. しかし、分けないとモジュールに紐づくソースが すごい勢いで増えていく
21. 再利用したくなったり、 コードのまとまりが見えてきたら分けましょう
22. - 最初から分ける必要はない - コード量が増えるだけ - しかし、単体のモジュールを膨らませ続けると後々つらい - まとまりが見えてきたらリファクタリングをかねて分割を検討する - ライブラリとして提供する場合は小さく - 設計段階で良く検討する - Angular Materialなども参考に （大体1機能 = 1モジュール） - 理想的にはそのモジュール単体で動作 アンチパターン④　Module一つあたりの役割が大きい
23. アンチパターン⑤　index.tsを作らない
24. TypeScriptでは、ディレクトリ直下にindex.tsがあると 勝手に読み込んでくれる
25. ここにexport文を書いておくといろいろ捗る
26. 例えば... - /app - /toast - /services - toast.service.ts - /components - toast.component.ts - toast.module.ts - app.component.ts - app.module.ts app.component.tsから使う
27. そのままだと... app.module.ts app.component.ts - インポートパスがディレクトリ構成に依存 - ディレクトリ構成を変えると外部のソースに影響 - 変更に弱い - toast.component.tsは外部から使うものか分からない
28. ここにindex.tsを追加 - /app - /toast - /services - toast.service.ts - /components - toast.component.ts - toast.component.ts - index.ts - app.component.ts - app.module.ts
29. 中身はこれだけ index.ts
30. すると... app.module.ts app.component.ts - 内部のディレクトリ構成に依存せずインポートできる - 短く書ける - 内部の変更がしやすい - 公開されているAPIが明確
31. - TypeScriptの機能 - インポートが短く書ける - インポートパスがディレクトリ構成に依存しない - 外部に公開したいAPIが明示できる - 特にモジュールを分割するときに有効 アンチパターン⑤　index.tsを作らない
32. アンチパターン⑥　RxJSを何となく使う
33. （間違いなく）死にます
34. - Angular RxJS - AngularはRxJSに依存。いろいろなものがObservableを返す。 - AngularのディープなAPIより利用頻度はかなり高いはず - RxJSはむずかしい - TypeScriptとはパラダイムが全然違う - 新しい言語勉強するのと良い勝負 - その場しのぎでコードを作ると間違いなく負債化する アンチパターン⑥　RxJSを何となく使う
35. 使いこなしたい？
36. 技術書典3で解説書出しました https://booth.pm/ja/items/659290
37. Thank you !!