Rust製の業務WebアプリケーションをRustでリプレイス_220428

Slide 1

Slide 1 text

A B O U T Rust製の業務Webアプリケーションを Rustでリプレイス

Slide 2

Slide 2 text

A B O U T Rust製の業務Webアプリケーションを RustでリプレイスのドサクサでBFF/FEを大整理した話

Slide 3

Slide 3 text

Ken Ogura 3 ● フロントエンドエンジニア @CADDi ● 受発注管理アプリケーションのBFF/FE開発 ● 競技プログラミングが得意 ● YouTuber

Slide 4

Slide 4 text

あらすじ ● 受発注プロダクトBFF/FEの開発体験が下がり始めていた ● BEを刷新することになったしBFF/FEも整理しよう！

Slide 5

Slide 5 text

技術スタック 5 5 FRONTEND ・React ・TypeScript ・Styled-Components ・Next.js ・Storybook ・Jest ・Apollo Client BFF ・TypeScript ・Node.js ・NestJS (Express) ・Apollo Server BACKEND (microservices) ・Rust ・diesel ・tonic GraphQL gRPC Infrastructure GCP, Docker, Kubernetes, Cloudﬂare, Datadog Event Bus Cloud Pub/Sub DevOps GitHub, CircleCI, ArgoCD, Kustomize

Slide 6

Slide 6 text

技術スタック 6 FRONTEND ・React ・TypeScript ・Styled-Components ・Next.js ・Storybook ・Jest ・Apollo Client BFF ・TypeScript ・Node.js ・NestJS (Express) ・Apollo Server BACKEND (microservices) ・Rust ・diesel ・tonic GraphQL gRPC Infrastructure GCP, Docker, Kubernetes, Cloudﬂare, Datadog Event Bus Cloud Pub/Sub DevOps GitHub, CircleCI, ArgoCD, Kustomize ここの話をします

Slide 7

Slide 7 text

大整理その１ 7 GraphQLをコードファーストに統一

Slide 8

Slide 8 text

GraphQLをコードファーストに統一 8 ● APIといえばこんな格好をしている

Slide 9

Slide 9 text

GraphQLをコードファーストに統一 9 ● APIといえばこんな格好をしている ● Schemaによってお互いのReq/Resの仕様の約束ができる

Slide 10

Slide 10 text

GraphQLをコードファーストに統一 10 ● FE/BFF間は具体的にはこうなっている

Slide 11

Slide 11 text

GraphQLをコードファーストに統一 11 ● オリジナルProductの最初期の依存関係はこう ○ ServerをSchemaFirstで開発 ①スキーマを定義 ②スキーマに則って　サーバを実装凡例

Slide 12

Slide 12 text

GraphQLをコードファーストに統一 12 ● 諸事情でこうなっていく ○ 一部CodeFirstも生じる ②実装をもとに　スキーマを自動生成 ①サーバを実装凡例

Slide 13

Slide 13 text

GraphQLをコードファーストに統一 13 ● 混在はまずいのでコードファーストに統一 ○ ポリシーが統一されて開発体験向上🚀🚀 凡例

Slide 14

Slide 14 text

GraphQLをコードファーストに統一 14 ● なぜコードファーストに統一したのか？ ○ 謎を解明するためにドメインの奥地に、、、

Slide 15

Slide 15 text

GraphQLをコードファーストに統一 15 ● かつての依存関係はこうなっていた凡例

Slide 16

Slide 16 text

GraphQLをコードファーストに統一 16 ● BFFのGraphQLサーバー部分をコードファーストにすると、、、凡例

Slide 17

Slide 17 text

GraphQLをコードファーストに統一 17 ● BFFのGraphQLサーバー部分をコードファーストにすると、、、 ○ 依存の方向が統一されてCleanな感じに！凡例

Slide 18

Slide 18 text

GraphQLをコードファーストに統一　まとめ 18 ● 実装方法のポリシーが統一された ● クリーンな構造になったために責務の切り分けを意識しやすくなった ● 開発体験向上🚀🚀🚀

Slide 19

Slide 19 text

大整理その２ 19 gRPCスキーマと BFFを同じリポジトリで管理 ※実際のところ BEもFEも全部まとめてモノレポ化しています

Slide 20

Slide 20 text

モノレポ化 20 ● かつては、gRPCスキーマ(ProtoBuf)を別リポジトリに管理 ● 更新が大変 ○ サブモジュールを更新し忘れて動かない ○ PRがたくさんできる ○ CIが複雑

Slide 21

Slide 21 text

モノレポ化 21 ● リプレイス後はモノリポジトリに！ ● 開発時に行ったり来たりしなくても良い ○ サービスのデプロイはCIで出し分ければアーキテクチャの疎結合性は保たれる。

Slide 22

Slide 22 text

その他整理 22 - GraphQLスキーマの設計、コンベンションに従う - Backにあるマイクロサービス群をオブジェクトのつながりという形でまとめあげる - BFFの責務が明確になる - GraphQLでフィールドレベルのリゾルバを使う - N+1問題の解決をBE層まで引きずっていた過去との決別 - ほかにも細々と

Slide 23

Slide 23 text

まとめ 23 - ドメインを型で守るときは型定義の一貫性を保つために依存性を意識すると開発体験向上🚀🚀🚀🚀 - リポジトリが同じか分かれているかはサービスの結合度とは独立した概念！モノレポにするかどうかは開発体験のウェイトを大きくして検討して良い