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
Optimistic Updatesで UXを向上させる / Improve UX with ...
Search
rockname
March 15, 2022
Technology
3
1.3k
Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates
iOS Tech Talk【みてね x Mirrativ】
https://mirrativ.connpass.com/event/240385/
rockname
March 15, 2022
Tweet
Share
More Decks by rockname
See All by rockname
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
61
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
3.7k
サブスクリプション機能制御の設計における勘所
rockname
0
1k
Anatomy of Dynamic color
rockname
1
1.1k
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
10
19k
モバイルアプリのリストUIにおける 理想的なState表示について / The ideal state display in a mobile app list UI
rockname
7
1.9k
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
500
The practice of inclusive design -WWDC21-
rockname
1
1.2k
AndroidアプリでLine Heightを 設定するときに注意したいこと / Things to keep in mind when setting Line Height in your Android app
rockname
1
5.1k
Other Decks in Technology
See All in Technology
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.2k
SSH公開鍵認証による接続 / Connecting with SSH Public Key Authentication
kaityo256
PRO
2
220
20250326_管理ツールの権限管理で改善したこと
sasata299
1
390
データベースで見る『家族アルバム みてね』の変遷 / The Evolution of Family Album Through the Lens of Databases
kohbis
2
500
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
150
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
8
1.5k
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
420
AIエージェントキャッチアップと論文リサーチ
os1ma
6
1.2k
Keynote - KCD Brazil - Platform Engineering on K8s (portuguese)
salaboy
0
130
Go製のマイグレーションツールの git-schemalex の紹介と運用方法
shinnosuke_kishida
1
410
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
7
1.2k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
For a Future-Friendly Web
brad_frost
176
9.6k
What's in a price? How to price your products and services
michaelherold
245
12k
A Philosophy of Restraint
colly
203
16k
Being A Developer After 40
akosma
90
590k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
500
Building Your Own Lightsaber
phodgson
104
6.3k
The Pragmatic Product Professional
lauravandoore
33
6.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Designing for Performance
lara
606
69k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Transcript
Optimistic UpdatesͰ UXΛ্ͤ͞Δ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname
mixi, Inc. ࣗݾհ ϩΫωϜ / rockname • ϛΫγΟͰʮՈΞϧόϜ ΈͯͶʯͱ͍͏ΞϓϦΛ ։ൃͯ͠Δ
• iOSϝΠϯɺAndroid, RailsͳͲॻ͍ͯΔ • εϚϒϥ͕͖
mixi, Inc. Optimistic Updatesͱ • ྫ͑ɺΈͯͶͰΞοϓϩʔυͨ͠ϝσΟΞΛ͓ؾʹೖΓʹՃͰ͖Δػೳ͕͋Γ·͢ • ී௨ʹ࣮͢ΔͳΒɺҎԼͷΑ͏ʹͳΔ͔ͱࢥ͍·͢
mixi, Inc. Optimistic Updatesͱ • ϦΫΤετͷ݁Ռ͕ฦΔલʹɺޭ͢ΔͱԾఆͯ͠UIΛઌʹߋ৽͢Δख๏ͷ͜ͱΛ Optimistic Updatesͱݺͼ·͢
mixi, Inc. Optimistic UpdatesͷՁ • Optimistic UpdatesͰɺϢʔβʔͷૢ࡞Λதஅͤ͞Δ͜ͱͳ͘γʔϜϨεͳମݧΛఏڙ ͠ଓ͚Δ͜ͱ͕Ͱ͖ΔͨΊɺUXΛ্ͤ͞·͢
mixi, Inc. ͪ͜Βͷهࣄ͕ඇৗʹࢀߟʹͳΓ·ͨ͠!!! https://kaminashi-developer.hatenablog.jp/entry/optimistic-update-in-spa UI͕ӕΛͭ͘ʁ UXσβΠϯʹ͓͚Δʮָ؍తͳߋ৽ʯͱSPAͰͷ࡞Γํ Χϛφγ։ൃऀϒϩά
۩ମతͳ࣮ྫ
mixi, Inc. ۩ମతͳ࣮ྫ - ͓ؾʹೖΓ • ઌͷྫͰऔΓ্͛ͨɺ͓ؾʹೖΓػೳʹ͓͚Δ Optimistic Updatesͷ۩ମతͳ࣮ํ๏ʹ͍ͭͯݟͯ Έ·͠ΐ͏
mixi, Inc. ۩ମతͳ࣮ྫ - ͓ؾʹೖΓ • ϝσΟΞΦϒδΣΫτʹ͋Δ୯ҰͷpropertyΛߋ৽͢ΔͷΈͳͷͰɺ࣮͔ͳΓγϯϓϧͳͷʹͳΓ·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • ΈͯͶͰΞοϓϩʔυ͞ΕͨϝσΟΞ ʹίϝϯτΛ͢Δ͜ͱ͕Ͱ͖·͢ • ݱঢ়ͰίϝϯτߘதʹIndicatorΛද
ࣔ͢ΔΑ͏ʹͳ͍ͬͯ·͢ ▶︎ ͜ͷίϝϯτػೳΛOptimistic Updates Ͱ࣮͢Δ͜ͱΛߟ͑ͯΈ·͠ΐ͏
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • ·ͣOptimistic UpdatesΛ࣮͘͢͠ ͘͢ɺView༻ͷίϝϯτΦϒδΣΫτͰ ͋Δ
CommentItem Λ༻ҙ͠·͢ • init ͰυϝΠϯΦϒδΣΫτΛड͚औͬͯ มͰ͖ΔΑ͏ʹ͍ͯ͠·͢ • ޙʹ৭ʑͱproperty͕Ճ͞Ε͍ͯ͘༧ఆ Ͱ͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • ࣍ʹɺMVPͰ࣮͢Δ͜ͱલఏͰ͕͢ɺ PresenterΛ༻ҙ͠·͢ • ͜͜ʹOptimistic
Updatesͷ࣮ΛՃ͑ͯ ͍͖·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • Presenterʹɺίϝϯτૹ৴Ϙλϯ ԡԼ࣌ʹݺΕΔ addComment
ϝιουΛ࣮͍͖ͯ͠·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • ͨͩ͠ɺ͜ͷ addComment ࿈ଓ͠ ͯԿݺΕΔ͜ͱΛߟྀͰ͖ͯ
͍·ͤΜ • Ծʹ1ճͷίʔϧͰϨεϙϯε͕· ͩฦΒͳ͍ؒʹ2ճͷίʔϧ͕ޭ ͠ɺͦͷޙ1ճͷίʔϧͰαʔόʔ ͔ΒΤϥʔ͕ฦ͖ͬͯͨ߹ɺ comments.removeLast() ҙਤͯ͠ ͍ͳ͍ CommentItem Λআͯ͠͠· ͏͜ͱʹͳΓ·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ ▶︎ ղܾ͢ΔͨΊʹɺ CommentItem ΛҰҙʹࣝผͰ͖Δ Α͏ʹ
mutaitionID ΛՃ͠·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • mutationID Λ CommentItem ʹઃఆ͠ɺ
ϨεϙϯεΛड͚औͬͨࡍ ʹͦΕΛݩʹదʹΛ ߋ৽͠·͢ • ͜ΕͰෳճݺΕͯద ʹॲཧͰ͖·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • ͨͩ͜ͷ··ͩͱɺOptimistic UpdatesͰԾͷσʔλ Λද͍ࣔͯ͠Δঢ়ଶͷViewʹରͯ͠ɺϢʔβʔ͕ίϝ ϯτͷฤूআ͕Ͱ͖ͯ͠·͍·͢
▶︎ ରԠͱͯ͠ɺ·ͩαʔόʔ͔ΒϨεϙϯε͕ฦ͖ͬͯ ͍ͯͳ͍߹Viewͷૢ࡞Λ੍ݶͰ͖ΔΑ͏ʹ͠·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • ঢ়ଶΛView͔ΒదʹผͰ͖ΔΑ ͏ʹɺCommentItem ʹ LoadingState
ΛՃ͠·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • addComment ϝιουͰద ʹ loadingState
Λઃఆ͠·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • ͋ͱɺViewଆͰ CommentItem.loadingState Λݟͯɺ .loading
ͷ߹ʹૢ࡞Λ੍ݶ͢ Εྑ͍͜ͱʹͳΓ·͢ (Viewͷίʔυলུ ) ▶︎ ͞Βʹɺߘʹࣦഊͨ࣌͠ʹίϝϯτΛλοϓ͢ΔͱϦτϥΠͰ͖ΔΑ͏ʹͯ͠Έ·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • ·ͣɺLoadingState ʹ .failure ΛՃ͠·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • addComment ϝιουͷcatchจʹͯ֘͢Δ CommentItem Λআ͢ΔΘΓʹ
loadingState ʹ .failure Λઃఆ͠·͢
mixi, Inc. ۩ମతͳ࣮ྫ - ίϝϯτ • ͋ͱPresenterʹϦτϥΠϝιουΛՃ͠ɺCellΛλοϓͨ͠ࡍʹݺΕΔΑ͏ʹ࣮͠·͢
mixi, Inc. ߘલ ߘத ߘࣦഊ
mixi, Inc. Optimistic Updatesͷ࣮ʹ͍ͭͯৼΓฦΓ • ྫ͓͑ؾʹೖΓػೳͷΑ͏ͳɺΦϒδΣΫτͷ୯Ұpropertyͷߋ৽ʹ͍ͭͯൺֱత؆ ୯ʹ࣮͕ՄೳͰ͢ • ͨͩ͠ɺίϝϯτߘͷΑ͏ͳɺ৽نΦϒδΣΫτͷ࡞ʹ͍ͭͯɺͦΕͳΓʹ ͕͔͔Γͦ͏Ͱ͢
• ·ͨɺࠓճͯ֘͢Viewͱੜଘظؒͷ͍͠PresenterͷதͰঢ়ଶΛཧ͠·ͨ͠ ͕ɺԾʹ͜ΕΛଞͷViewʹൖ͍ͤͨ͞ͱͳΔͱɺSingletonείʔϓͷΠϯϝϞϦε τΞ or databaseͰঢ়ଶΛཧͭͭ͠ɺ֤ViewͰ݁ՌΛsubscribeͰ͖ΔΑ͏ʹ࣮͢Δ ඞཁ͕͋Γɺ͔ͳΓࠎ͕ંΕͦ͏Ͱ͢
mixi, Inc. Apollo Clientͷհ • GraphQLΫϥΠΞϯτͰ͋Δ Apollo Ͱɺ͜ͷOptimistic UpdatesͷػೳΛఏڙ͍ͯ͠·͢ (iOSΫϥΠΞϯτͰະ࣮
) • ͪ͜ΒͰ mutationID ͷΑ͏ͳͷΛ༻ҙ͠ͳͯ͘ɺϦΫΤετͷޭ, ࣦഊʹԠͯ͡ΩϟογϡΛదʹߋ৽ͯ͘͠Ε·͢ • ΩϟογϡΛwatch͍ͯ͠ΔViewʹߋ৽͕ൖ͞Ε·͢ • ͨͩ͠ɺઌͷྫͷΑ͏ʹloadingStateʹΑͬͯViewͷݟͨΛม͑ΔΑ͏ͳ͜ͱͰ͖ͳͦ͞͏Ͱ͢ (Apollo ReactͰApollo LinkΛ͑Ͱ͖Δ͔ʁ) Apollo KotlinΑΓ
Thank you!!!