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
340
物流拠点プロダクト フロントエンド技術紹介 - CADDi
[email protected]
March 02, 2022
Tweet
Share
More Decks by
[email protected]
See All by
[email protected]
CADDi Company Deck_Global.pdf
caddi_eng
0
50
[ English ] Company Overview for Engineers
caddi_eng
0
1.1k
エンジニア向け会社紹介資料
caddi_eng
15
320k
CADDi 会社紹介・採用説明資料
caddi_eng
11
840k
機械学習チームのモノレポ移行
caddi_eng
0
510
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
1.1k
2023.01_CADDi Thailand Company Overview
caddi_eng
0
15k
20220826_Company Briefing Online Event
caddi_eng
0
530
OpenSearchで実現する画像検索とテスト追加で目指す安定運用
caddi_eng
4
6.2k
Other Decks in Technology
See All in Technology
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
1
160
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
260
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
220
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
140
ハイテク休憩
sat
PRO
2
140
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
190
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
26
11k
Wantedly での Datadog 活用事例
bgpat
1
430
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
160
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Site-Speed That Sticks
csswizardry
2
190
Making Projects Easy
brettharned
116
5.9k
Thoughts on Productivity
jonyablonski
67
4.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
For a Future-Friendly Web
brad_frost
175
9.4k
The Language of Interfaces
destraynor
154
24k
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のテストのみ