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
300
物流拠点プロダクト フロントエンド技術紹介 - CADDi
[email protected]
March 02, 2022
Tweet
Share
More Decks by
[email protected]
See All by
[email protected]
エンジニア向け会社紹介資料
caddi_eng
14
180k
CADDi 会社紹介・採用説明資料
caddi_eng
10
620k
機械学習チームのモノレポ移行
caddi_eng
0
230
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
500
2023.01_CADDi Thailand Company Overview
caddi_eng
0
14k
Company Overview for Engineers (English)
caddi_eng
0
14k
20220826_Company Briefing Online Event
caddi_eng
0
380
OpenSearchで実現する画像検索とテスト追加で目指す安定運用
caddi_eng
3
5.7k
製造業向け新事業の基盤をエンジニア1人のチームでローコード&マネージドで半年で立ち上げた話_220810
caddi_eng
0
860
Other Decks in Technology
See All in Technology
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
360
Databricks:『生成AI World Cup』のご案内
databricksjapan
2
160
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
180
JSON攻略法.pdf
miyakemito
8
4.2k
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
430
本当のAWS基礎
toru_kubota
0
320
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
150
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
360
JAWS-UG Bedrock Claude Night
yamahiro
3
400
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
140
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
140
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
410
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Fireside Chat
paigeccino
20
2.6k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
39k
KATA
mclloyd
14
12k
Practical Orchestrator
shlominoach
181
9.7k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Designing Experiences People Love
moore
136
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Large-scale JavaScript Application Architecture
addyosmani
503
110k
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のテストのみ