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.1k
受発注管理システム Kleinのフロントエンド - CADDi
[email protected]
March 01, 2022
Tweet
Share
More Decks by
[email protected]
See All by
[email protected]
エンジニア向け会社紹介資料
caddi_eng
15
260k
CADDi 会社紹介・採用説明資料
caddi_eng
11
740k
機械学習チームのモノレポ移行
caddi_eng
0
410
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
890
2023.01_CADDi Thailand Company Overview
caddi_eng
0
14k
20220826_Company Briefing Online Event
caddi_eng
0
470
OpenSearchで実現する画像検索とテスト追加で目指す安定運用
caddi_eng
4
6k
製造業向け新事業の基盤をエンジニア1人のチームでローコード&マネージドで半年で立ち上げた話_220810
caddi_eng
0
1k
半年で製造業向けAIサービスをリリースした開発チームのノウハウ大公開!_220713
caddi_eng
1
920
Other Decks in Technology
See All in Technology
トークナイザー入門
payanotty
2
380
Making Linux sucks less
ennael
PRO
0
490
k6を活用した再現性・拡張性の高い負荷試験基盤の構築
biwashi
11
2.9k
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
12k
たった一人で始めた音楽制作が気がついたら会社公認の部活動になっていた話〜組織の垣根を超えるコラボレーションを実現するには〜 / On-KAG-bu
piyonakajima
0
150
【shownet.conf_】持続可能な次世代Wi-Fi運用に向けて
shownet
PRO
0
260
VS CodeでF1〜12キーつかってますか? / Do you use the F1-12 keys in VS Code?
74th
2
270
第45回 MLOps 勉強会 - ML Test Score を用いた機械学習システムの定量的なアセスメント
masatakashiwagi
3
190
【shownet.conf_】ローカル5Gを活用したウォーキングツアーの体感向上
shownet
PRO
0
250
FastAPIでのasync defとdefの使い分け
takashi1029
6
1.8k
OPENLOGI Company Profile
hr01
0
53k
Perlで始めるeBPF: 自作Loaderの作り方 / Getting started with eBPF in Perl_How to create your own Loader
takehaya
1
170
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Six Lessons from altMBA
skipperchong
26
3.4k
Testing 201, or: Great Expectations
jmmastey
38
7k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Mobile First: as difficult as doing things right
swwweet
222
8.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
29
1.7k
Embracing the Ebb and Flow
colly
83
4.4k
Into the Great Unknown - MozCon
thekraken
30
1.4k
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要件に答えるための様々な工夫を実装 • 大量データ数でもデータ登録やレンダリングが快適 • 業務フローを一律に決めにくい点(不確実性)にも対応できるシ ステム まとめ