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
メルカリ ハロ アプリの技術スタック
Search
atsumo
October 08, 2024
Programming
2
330
メルカリ ハロ アプリの技術スタック
メルカリハロの技術スタックに関する資料
atsumo
October 08, 2024
Tweet
Share
More Decks by atsumo
See All by atsumo
Component System
atsumo
0
150
Other Decks in Programming
See All in Programming
いまあるチームにフィットさせる Serverless そして Platform Engineeringへの挑戦 / Serverless Fits the Team You Have and Platform Engineering
seike460
PRO
2
1.4k
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
120
What is TDD?
urakawa_jinsei
1
210
M5Stackボードの選び方
tanakamasayuki
0
210
CSC509 Lecture 01
javiergs
PRO
1
200
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
140
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
690
RemixとCloudflare Stack におけるFile Upload
ossamoon
1
120
Beyond the RuboCop Defaults
koic
2
500
タイミーにおけるデータの利用シーンと データ基盤の挑戦
marufeuille
4
3.2k
Pythonによるイベントソーシングへの挑戦と現状に対する考察 / Challenging Event Sourcing with Python and Reflections on the Current State
nrslib
3
940
GitHub Copilot Workspace で我々のアプリ開発がどう変わるのか?
shuyakinjo
0
880
Featured
See All Featured
For a Future-Friendly Web
brad_frost
174
9.3k
Agile that works and the tools we love
rasmusluckow
327
21k
Done Done
chrislema
181
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
KATA
mclloyd
27
13k
The Mythical Team-Month
searls
218
43k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Teambox: Starting and Learning
jrom
131
8.7k
Faster Mobile Websites
deanohume
304
30k
Designing with Data
zakiwarfel
98
5.1k
Transcript
1 メルカリ ハロ アプリの技術スタックの紹介 @atsumo
2 自己紹介 atsumo Mercari Hallo Mobile EM サイバーエージェントにて新卒エンジニアとしてキャリアをス タートし、アメーバピグやスマホゲーム、アプリ開発などでTLや EMを務める。その後、スタートアップでPdM兼TLとしてアプリ開
発に携わる。現在はメルカリでメルカリ ハロのユーザーインター フェース開発に注力している。 @atsumo
3 メルカリ ハロについて
4 4
Confidential ライフスタイルに合わせて多様化する働き方ニーズ デザイン進める
6 技術スタックの紹介
7 https://engineering.mercari.com/blog/entry/20240606-mercari-hallo-app-tech-stacks/
8 • Monorepo • API: GraphQL • 状態管理 • デザインシステム
Summary
9 • Monorepoを採用 ◦ バックエンドやフロントエンド・アプリのコード全 てを一つのリポジトリで管理 ◦ Dart・Go・TypeScriptなど言語ごとにディレ クトリを分けている ◦
CI/CDのなどはスコープを対象のディレクトリ に対して行う • メリット ◦ システム全体の見通しが良い ◦ GraphQLスキーマファイルの共有が楽 ◦ バックエンドなどの修正が追いやすい ◦ 一緒に開発している感が強まる Monorepo
10 • 使用パッケージ ◦ graphql_flutter ◦ graphql_codegen • メリット ◦
スキーマ定義による型の安全性 ◦ キャッシュ機能による状態管理の簡素化 ◦ 宣言的UIとの相性が良い API: GraphQL
11 • アプリケーションステート ◦ サーバーリクエスト・キャッシュ ▪ graphql_flutter(graphql) ◦ グローバルステート ▪
riverpod • ローカルステート ◦ flutter_hooks 状態管理 参考: https://docs.flutter.dev/data-and-backend/state-mgmt/ephemeral-vs-app
12 • graphql_flutter ◦ graphql_flutterはgraphqlを使いや すくするためのAPIやWidgetを提供し ているラッパーのパッケージ • Apollo Clientをモデルとした
GraphQLクライアント ◦ Query / MutationなどのOperation がある ◦ 正規化してキャッシュする サーバーリクエスト・キャッシュ 参考: https://graphql.org/learn/caching/
13 • riverpod • 複数画面で使われるようなデータ ◦ ハロの場合はサーバからのデータは GraphQLのCacheで管理しているの でそれ以外のステートを管理 •
例えば ◦ 認証用トークン グローバルステート
14 • flutter_hooks • スクリーンやコンポーネント内で完結 するデータの管理 ◦ ローディングのステータス ◦ ボタンの有効・無効の切り替え
ローカルステート 参考: https://riverpod.dev/docs/concepts/about_hooks
15 • 独自のデザインシステム ◦ デザイントークン ◦ UIコンポーネント • Figma 上で設定されたプ
ロパティをコード側でも同 じようなプロパティになる ように実装 ◦ 画面実装する際にコードと 紐付きがわかりやすい デザインシステム
16 UIカタログ(Widgetbook) • Widgetbook • デザインシステムとして定 義したUIコンポーネントや Widgetなどをカタログ化 • 特定条件でしか表示され
ないUIの確認などにも重 宝
17 • 複雑な画面でない限りコン ポーネントを並べることで 画面が出来上がる 画面実装
18 • メルカリ ハロでは、Monorepoを採用し、APIにはGraphQLを使用 • 状態管理では graphql_flutter、flutter_hooks、riverpod を採用していま す •
デザインシステムはFigmaのコンポーネントプロパティを活用し、 Widgetbookでカタログ化することで、効率的なUI開発を行うことができました • まだまだシステム改善の余地があり、常にサービスやチーム状況にあった改善 をしていければと思っております まとめ
19 ありがとうございました。 @atsumo