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
Unlock the Potential of Swift Code Generation
rockname
0
230
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
63
ゼロから理解する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
Other Decks in Technology
See All in Technology
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.4k
30 代子育て SRE が考える SRE ナレッジマネジメントの現在と将来
kworkdev
PRO
0
190
10分でわかるfreeeのQA
freee
1
12k
Lightdashの利活用状況 ー導入から2年経った現在地_20250409
hirokiigeta
2
260
試験は暗記より理解 〜効果的な試験勉強とその後への活かし方〜
fukazawashun
0
280
似たような課題が何度も蘇ってくるゾンビふりかえりを撲滅するため、ふりかえりのテーマをフォーカスしてもらった話 / focusing on the theme
naitosatoshi
0
310
CBになったのでEKSのこともっと知ってもらいたい!
daitak
1
140
データベースで見る『家族アルバム みてね』の変遷 / The Evolution of Family Album Through the Lens of Databases
kohbis
4
1.1k
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
160
入社後SREチームのミッションや課題の整理をした話
morix1500
1
240
Beyond {shiny}: The Future of Mobile Apps with R
colinfay
1
300
OSSコントリビュートをphp-srcメンテナの立場から語る / OSS Contribute
sakitakamachi
0
1.1k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Embracing the Ebb and Flow
colly
85
4.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
The Language of Interfaces
destraynor
157
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
KATA
mclloyd
29
14k
Building Adaptive Systems
keathley
41
2.5k
Gamification - CAS2011
davidbonilla
81
5.2k
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!!!