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
物流拠点プロダクト フロントエンド技術紹介 - CADDi
Search
[email protected]
March 02, 2022
Technology
0
390
物流拠点プロダクト フロントエンド技術紹介 - CADDi
[email protected]
March 02, 2022
Tweet
Share
More Decks by
[email protected]
See All by
[email protected]
製造業の会計システムをDDDで開発した話
caddi_eng
3
1.5k
【CADDI VIETNAM】Company Deck for Engineers
caddi_eng
0
840
CADDi Company Deck_Global.pdf
caddi_eng
1
360
[ English ] Company Overview for Engineers
caddi_eng
0
5k
エンジニア向け会社紹介資料
caddi_eng
16
480k
キャディ株式会社 会社紹介・採用説明資料
caddi_eng
12
1M
機械学習チームのモノレポ移行
caddi_eng
0
640
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
1.3k
2023.01_CADDi Thailand Company Overview
caddi_eng
0
15k
Other Decks in Technology
See All in Technology
libsyncrpcってなに?
uhyo
0
250
Introduction to Bill One Development Engineer
sansan33
PRO
0
240
Generational ZGCのメモリ運用改善 - その物理メモリ使用量、本当に正しい?
tabatad
1
280
Flutterアプリを⾃然⾔語で操作する
yukisakai1225
0
210
Kotlinで学ぶ 代数的データ型
ysknsid25
4
690
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.4k
プロジェクトマネージャーに最後まで残るたった一つの仕事は交渉
ichimichi
1
180
ai bot got sick (abc 2025s version)
kojira
0
150
障害を回避するHttpClient再入門 / Avoiding Failures HttpClient Reintroduction
uskey512
1
460
Kubernetesで作るAIプラットフォーム
oracle4engineer
PRO
2
180
CSSDay, Amsterdam
brucel
0
290
医療業界に特化した音声認識モデル構築のためのアノテーションの実態
thickstem
0
510
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
A Tale of Four Properties
chriscoyier
159
23k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
910
A designer walks into a library…
pauljervisheath
205
24k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Rails Girls Zürich Keynote
gr2m
94
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Scaling GitHub
holman
459
140k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Agile that works and the tools we love
rasmusluckow
329
21k
Transcript
A B O U T 物流拠点プロダクト
2 物流拠点プロダクト 入出荷予定確認、製品受入、検査、梱包、出荷 リーダー:入出荷確認、リソース計画 作業担当者:検査、製品受入、検査、梱包、出荷 物理を伴う難しさ、イレギュラー前提での設計が必要 予定を過ぎても届かない 予定されていないものが届いた 製品が届いたけど個数が足りない 検査でNGが出た
ARCHITECTURE 3 GraphQL NestJS Next.js Apollo Server URQL DB Prisma
Storybook MSW Chakra-ui Antd
4 REPOSITORY yarn v3 yarn v1 に比べてインストール速い どの階層で yarn install
しても大丈夫なのが👍 volta nodeバージョン管理 自動でnodeインストールしてくれる Monorepo
5 FRONTEND CSSを書く -> propertyをセットする Backendメンバーにも受け入れられやすい 型の補完が効き開発体験よい レイアウト系のコンポーネントはかなり便利 BoxやFlexを多用 Chakra
UI
6 FRONTEND Chakra-ui はプリミティブなコンポーネントが多く、柔 軟性は高いが、高機能コンポーネントがない Antd で補完 Datepicker Table Antd
7 FRONTEND シンプルで使いやすい Apollo Clientと比べてBundle Sizeが約 1/3 React Suspenseのサポート 唯一Offlineのサポート
今後利用する可能性あるかも URQL
8 BACKEND Node.js and TypeScript ORM 開発体験とても良い prisma schema を書く
DB migration code 自動生成 型つき prisma client 自動生成 GraphQLとの相性良い N + 1 問題をケア Prisma
9 TESTING Storybook CSF3.0 2.0よりよりシンプルにStoryを書けるようになった Storybookの定義をJestで再利用可能になった @storybook/testing-reactを使い、StoryをJestに取 り込んで結合テスト
10 TESTING Mock Service Worker API Mocking library ネットワークリクエストが発生するComponentも簡単に データをMockingできる
StorybookでPage Componentのgraphql queryをMocking
11 今後の展望 Monorepo circleci/path-filteringでビルドワークフロー最適化 Testing Viewの結合テストはStorybookに集約 今後、Storybookのinteraction testingをCI実行できる ようになると、Jestで書かなくても良くなりそう JestはHooksのテストのみ