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
受発注管理システム Kleinのフロントエンド - CADDi
Search
[email protected]
March 01, 2022
Technology
1
2.2k
受発注管理システム Kleinのフロントエンド - CADDi
[email protected]
March 01, 2022
Tweet
Share
More Decks by
[email protected]
See All by
[email protected]
キャディでのApache Iceberg, Trino採用事例 -Apache Iceberg and Trino Usecase in CADDi--
caddi_eng
0
200
製造業の会計システムをDDDで開発した話
caddi_eng
3
1.6k
【CADDI VIETNAM】Company Deck for Engineers
caddi_eng
0
950
CADDi Company Deck_Global.pdf
caddi_eng
1
370
[ English ] Company Overview for Engineers
caddi_eng
0
5.4k
エンジニア向け会社紹介資料
caddi_eng
16
490k
キャディ株式会社 会社紹介・採用説明資料
caddi_eng
12
1.1M
機械学習チームのモノレポ移行
caddi_eng
0
640
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
1.4k
Other Decks in Technology
See All in Technology
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
A2Aのクライアントを自作する
rynsuke
1
170
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
210
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
750
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
300
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
120
Model Mondays S2E02: Model Context Protocol
nitya
0
220
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
710
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Site-Speed That Sticks
csswizardry
10
660
For a Future-Friendly Web
brad_frost
179
9.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Transcript
受発注管理システム Kleinのフロントエンド
目次 自己紹介 Kleinの概要 画面デモ Kleinのソフトウェアアーキテクチャ まとめ
先山 賢一 (@ksakiyama134) キャディのフロントエンドエンジニア 2021年7月に入社 React / GraphQL / OAuth2.0
/ OpenID Connect 自己紹介
Kleinの概要
一言で言うと キャディ社内の受発注管理システムです! キャディ社員がオペレーションのために利用します。 Kleinとは?
先程のスライドのこのプロダクトです
キャディの受発注を話す前に以下を説明します。 • どんなビジネスをやってるんだっけ? • 「サプライチェーン」ってどういう意味? おさらい
キャディのビジネス
キャディのビジネス 加工会社さんのことを サプライパートナー(SP) と呼んでいます。
“サプライチェーン”って聞いたことありますか? https://www.ntt.com/bizon/glossary/j-s/supply-chain.html
サプライチェーンとは、製品の原材料・部品の調達から販売に至るまでの一連の流れを指す用語です。 サプライチェーンの概念で特徴的な点として、自社だけでなく、他社(協力会社など)をまたいでモノの流れを捉えることが挙げられま す。たとえば自社がメーカーである場合、部品メーカーや材料メーカーなどから製品の製造に利用する部品および原材料を仕入れ て製造します。また販売においては、配送業者や卸業者、そして小売業者が関係するでしょう。このように、サプライチェーンでは自 社の業務だけでなく、モノが製造されて販売されるまでのフロー全体を捉えます。 このサプライチェーンを管理し、製品の開発や製造、販売を最適化する手法をサプライチェーンマネジメントと呼び、SCM(Supply Chain Management)と呼ばれるシステムを導入している企業も少なくありません。SCMを利用する目的として、部品/材料メーカーや 卸売業者、販売店などを含めて在庫情報を共有し、在庫の適正化を図ることなどが挙げられます。
“サプライチェーン”って聞いたことありますか? https://www.ntt.com/bizon/glossary/j-s/supply-chain.html
キャディのサプライチェーン SP A会社さん SP B会社さん キャディ 拠点 キャディ 拠点 顧客
例:キャディが顧客から受注した製品の流れ キャディ 受注 発注 発注 製品送付 製品送付 製品送付 納品
Kleinはキャディの受発注を支える
プロダクト名の由来 https://caddi.tech/archives/2211
デモ 〜ほぼ全部見せます〜
Kleinのソフトウェアアーキテクチャ
ソフトウェアアーキテクチャ Web (Nginx) BFF (Node.js) Backend (Rust) UserAgent CloudFlare CDN
コンテンツ配信 GraphQL gRPC
フロントエンド • Client-Side Rendering • TypeScript / React / Ant-Design
/ styled-components / Apollo Client / AG Grid • 大量データの一括編集などの要件に対応するための工夫(デモにて説明) BFF • TypeScript / Nest.js / Apollo Server / Express • コードファーストでGraphQLスキーマを生成 リポジトリ • フロントエンドとBFFはMonorepoで管理 • lernaでビルド→turborepoを実験的に導入中 アーキテクチャの特徴
まとめ
Kleinはキャディの受発注を支える BtoB要件に答えるための様々な工夫を実装 • 大量データ数でもデータ登録やレンダリングが快適 • 業務フローを一律に決めにくい点(不確実性)にも対応できるシ ステム まとめ