Upgrade to Pro — share decks privately, control downloads, hide ads and more …

220428event_ogura_part

E55fbffb4afd0a84d36c945ed68d8c19?s=47 CADDi
May 02, 2022
Technology
0
240

 220428event_ogura_part

E55fbffb4afd0a84d36c945ed68d8c19?s=128

CADDi

May 02, 2022
Tweet

More Decks by CADDi

See All by CADDi
CADDi AI Lab Description
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
0
6.8k
20220526event
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
0
200
Introduction of CADDi Vietnam
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
0
870
20220512Event_Launch in Vietnam
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
0
180
CADDi HCMC Technology Center
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
0
280
220428event_overview
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
2
280
220428event_matsuda_part
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
0
300
220428event_karibe_part
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
0
240
Atlassian登壇資料_220324
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
0
710

Other Decks in Technology

See All in Technology
DeepL の用語集が（いつのまにか）日本語に対応してたので試してみた
8259a0ff485d7af09a6044cc446f1718?s=48 irokawah0
0
170
紙にまつわる苦しみを機能化してきた カミナシの歴史
238459e9ada6420a85e157aa1d65268b?s=48 kaminashi
0
1.3k
QiitaConference2022
0684ef0f8b92614508e0c323c3619462?s=48 fuwasegu
0
190
現状のFedCMの動作解説と OIDCとの親和性について- OpenID TechNight vol.19
658c29959d8a9fd352afa440a5813137?s=48 ritou
2
450
What's new in Vision
53e2d354b3299d64a54af680865516d5?s=48 satotakeshi
0
220
音のような言葉 〜ちゃちゃっとチャットで楽しむちょっとしたコツ〜 / words like sounds
8db3c91c8b3d3e5686f62fbf43c303dd?s=48 satoryu
1
1.4k
20220622_FinJAWS_あのときにAWSがあったらこうできた
Feb135945a82ac9c12e91ba5f7e8bce2?s=48 taketakekaho
0
110
サイボウズの アジャイル・クオリティ / Agile Quality at Cybozu
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
4
2.3k
スクラムのスケールとチームトポロジー / Scaled Scrum and Team Topologies
4dd89003cc8fe9f21d67b0c99b773436?s=48 daiksy
1
450
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
84ece018b6918e3339fe74075ab3dd18?s=48 lovegraph
0
270
DOM Invader - prototype pollution対応の衝撃 - / DOM Invader - prototype pollution
2c4ef0f20c4f05ca30e6c9917f0c17b6?s=48 okuken
0
160
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
2
1.8k

Featured

See All Featured
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
58
3.9k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.4k
Testing 201, or: Great Expectations
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.4k
Designing with Data
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
3.9k
Bash Introduction
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
597
210k
Designing Dashboards & Data Visualisations in Web Apps
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
49k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
23
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
10
3.4k
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.6k

Transcript

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

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

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

    • YouTuber

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

  5. 技術スタック 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, Cloudflare, Datadog Event Bus Cloud Pub/Sub DevOps GitHub, CircleCI, ArgoCD, Kustomize

  6. 技術スタック 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, Cloudflare, Datadog Event Bus Cloud Pub/Sub DevOps GitHub, CircleCI, ArgoCD, Kustomize ここの話をします

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ◦ CIが複雑

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

  22. その他整理 22 - GraphQLスキーマの設計、コンベンションに従う - Backにあるマイクロサービス群を オブジェクトのつながりという形でまとめあげる - BFFの責務が明確になる -

    GraphQLでフィールドレベルのリゾルバを使う - N+1問題の解決をBE層まで引きずっていた過去との決別 - ほかにも細々と

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