Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates
rockname
March 15, 2022
Technology
2
390
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
モバイルアプリのリストUIにおける 理想的なState表示について / The ideal state display in a mobile app list UI
rockname
5
840
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
210
The practice of inclusive design -WWDC21-
rockname
1
740
AndroidアプリでLine Heightを 設定するときに注意したいこと / Things to keep in mind when setting Line Height in your Android app
rockname
2
930
2021年度 ミクシィ新卒研修 -iOSアプリ開発- / 2021 iOS mixi training
rockname
7
37k
iOSアプリでLine Heightを 設定するときに注意したいこと / Things to keep in mind when setting Line Height in your iOS app
rockname
1
780
2020年度 ミクシィ新卒研修 -設計・テスト- / 2020 design test mixi training
rockname
0
900
デザインにオブジェクト指向を適用する / Apply Object-Oriented to your design
rockname
12
3.8k
モバイルアプリを開発する上で理想的な色の命名規則 / Ideal color naming convention for developing mobile apps
rockname
13
1.9k
Other Decks in Technology
See All in Technology
DAO (分散型自律組織) vs. 自律分散組織 / DAO vs. Distributed Autonomous Organization
ks91
PRO
0
220
PUTとPOSTどっち使う?
hankehly
0
160
2022年度新卒技術研修「Docker」講義
excitejp
PRO
0
340
Compose の LazyColumn パフォーマンス改善で取り組んだこと
tomoya0x00
0
210
MoT TechTalk #12 タクシーアプリ『GO』大規模トラフィックを捌く分析データ基盤の全容に迫る!
mot_techtalk
0
300
2022年度新卒技術研修「良いコードの書き方」講義
excitejp
PRO
0
230
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.2k
チームとチームのチーム
eiel
1
890
覗いてみよう!現場のスクラムチーム
tkredman
0
930
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.3k
What's new in Vision
satotakeshi
0
130
Data in Google I/O - IO Extended GDG Seoul
kennethanceyer
0
150
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Building Adaptive Systems
keathley
25
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Automating Front-end Workflow
addyosmani
1351
200k
In The Pink: A Labor of Love
frogandcode
131
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
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!!!