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
410
物流拠点プロダクト フロントエンド技術紹介 - CADDi
[email protected]
March 02, 2022
Tweet
Share
More Decks by
[email protected]
See All by
[email protected]
キャディでのApache Iceberg, Trino採用事例 -Apache Iceberg and Trino Usecase in CADDi--
caddi_eng
0
340
製造業の会計システムをDDDで開発した話
caddi_eng
3
1.8k
【CADDI VIETNAM】Company Deck for Engineers
caddi_eng
0
1.4k
CADDi Company Deck_Global.pdf
caddi_eng
1
450
[ English ] Company Overview for Engineers
caddi_eng
1
8k
エンジニア向け会社紹介資料
caddi_eng
17
550k
キャディ株式会社 会社紹介・採用説明資料
caddi_eng
12
1.1M
機械学習チームのモノレポ移行
caddi_eng
0
670
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
1.5k
Other Decks in Technology
See All in Technology
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
7.3k
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
15
7.4k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
450
モダンフロントエンド 開発研修
recruitengineers
PRO
10
6.2k
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
260
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
440
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
4
1.1k
Obsidian応用活用術
onikun94
0
130
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
13
4.1k
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
430
PRDの正しい使い方 ~AI時代にも効く思考・対話・成長ツールとして~
techtekt
PRO
0
510
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Building Adaptive Systems
keathley
43
2.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
It's Worth the Effort
3n
187
28k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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のテストのみ