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
320
物流拠点プロダクト フロントエンド技術紹介 - CADDi
[email protected]
March 02, 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
460
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
CDK Pipelinesをざっくり理解する
smt7174
2
300
Renovate ではじめる運用レスなライブラリ更新 / 令和最新版 他人に自慢したいヤバいCI/CD LT会 @ yabaibuki.dev #2
ponkio_o
PRO
1
120
成果のためのコミュニケーション - 語彙を育てよう -/communication-for-good-outcome-developing-vocabulary
hassaku63
2
130
【shownet.conf_】持続可能な次世代Wi-Fi運用に向けて
shownet
PRO
0
230
OPENLOGI Company Profile
hr01
0
53k
Efficient zero-copy networking using io_uring
ennael
PRO
0
210
【shownet.conf_】ShowNet伝送改めShowNet APN 2024
shownet
PRO
0
290
Dual level of task scheduling for VM workloads
ennael
PRO
0
160
How CERN serves 1EB of data via FUSE
ennael
PRO
0
15k
FastAPIでのasync defとdefの使い分け
takashi1029
6
1.7k
All your memory are belong to… whom?
ennael
PRO
0
370
無料版Copilot×Google ColabでPDFデータを分析してみよう!!
kudou55
1
160
Featured
See All Featured
Bash Introduction
62gerente
608
210k
Visualization
eitanlees
143
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
231
130k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Music & Morning Musume
bryan
46
6.1k
GitHub's CSS Performance
jonrohan
1030
450k
Designing the Hi-DPI Web
ddemaree
278
34k
Being A Developer After 40
akosma
84
590k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
158
15k
Happy Clients
brianwarren
96
6.6k
Atom: Resistance is Futile
akmur
261
25k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
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のテストのみ