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.4k
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
360
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
80
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
3.9k
サブスクリプション機能制御の設計における勘所
rockname
0
1.1k
Anatomy of Dynamic color
rockname
1
1.2k
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
10
20k
モバイルアプリのリストUIにおける 理想的なState表示について / The ideal state display in a mobile app list UI
rockname
7
2k
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
510
The practice of inclusive design -WWDC21-
rockname
1
1.2k
Other Decks in Technology
See All in Technology
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
140
shake-upを科学する
rsakata
7
930
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
ゼロからはじめる採用広報
yutadayo
4
1k
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
180
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
280
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
180
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
1
390
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
450
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
730
Delegating the chores of authenticating users to Keycloak
ahus1
0
180
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
390
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Rails Girls Zürich Keynote
gr2m
95
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Into the Great Unknown - MozCon
thekraken
40
1.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Being A Developer After 40
akosma
90
590k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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!!!