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
31
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
3.6k
サブスクリプション機能制御の設計における勘所
rockname
0
980
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.8k
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
480
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
5k
Other Decks in Technology
See All in Technology
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
380
Share my, our lessons from the road to re:Invent
naospon
0
140
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
210
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.2k
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
670
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
手を動かしてレベルアップしよう!
maruto
0
220
短縮URLをお手軽に導入しよう
nakasho
0
150
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
180
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
180
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
250
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
290
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
What's in a price? How to price your products and services
michaelherold
244
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Become a Pro
speakerdeck
PRO
26
5.2k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
A Philosophy of Restraint
colly
203
16k
Visualization
eitanlees
146
15k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Writing Fast Ruby
sferik
628
61k
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!!!