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 VIETNAM】Company Deck for Engineers
caddi_eng
0
300
CADDi Company Deck_Global.pdf
caddi_eng
0
210
[ English ] Company Overview for Engineers
caddi_eng
0
2.4k
エンジニア向け会社紹介資料
caddi_eng
16
370k
CADDi 会社紹介・採用説明資料
caddi_eng
11
920k
機械学習チームのモノレポ移行
caddi_eng
0
570
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
1.2k
2023.01_CADDi Thailand Company Overview
caddi_eng
0
15k
20220826_Company Briefing Online Event
caddi_eng
0
560
Other Decks in Technology
See All in Technology
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
120
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
260
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
3
5.7k
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
140
OPENLOGI Company Profile
hr01
0
60k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.4k
手を動かしてレベルアップしよう!
maruto
0
190
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
140
コンテナサプライチェーンセキュリティ
kyohmizu
1
140
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
200
クラウドサービス事業者におけるOSS
tagomoris
4
1k
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Being A Developer After 40
akosma
89
590k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Raft: Consensus for Rubyists
vanstee
137
6.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The Invisible Side of Design
smashingmag
299
50k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
What's in a price? How to price your products and services
michaelherold
244
12k
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要件に答えるための様々な工夫を実装 • 大量データ数でもデータ登録やレンダリングが快適 • 業務フローを一律に決めにくい点(不確実性)にも対応できるシ ステム まとめ