Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates

iOS Tech Talk【みてね x Mirrativ】
https://mirrativ.connpass.com/event/240385/

Transcript

1. Optimistic UpdatesͰ
 UXΛ޲্ͤ͞Δ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname
2. mixi, Inc. ࣗݾ঺հ ϩΫωϜ / rockname • ϛΫγΟͰʮՈ଒ΞϧόϜ ΈͯͶʯͱ͍͏ΞϓϦΛ
 ։ൃͯ͠Δ • iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ • εϚϒϥ͕޷͖
3. mixi, Inc. Optimistic Updatesͱ͸ • ྫ͑͹ɺΈͯͶͰ͸Ξοϓϩʔυͨ͠ϝσΟΞΛ͓ؾʹೖΓʹ௥ՃͰ͖Δػೳ͕͋Γ·͢ • ී௨ʹ࣮૷͢ΔͳΒ͹ɺҎԼͷΑ͏ʹͳΔ͔ͱࢥ͍·͢
4. mixi, Inc. Optimistic Updatesͱ͸ • ϦΫΤετͷ݁Ռ͕ฦΔલʹɺ੒ޭ͢ΔͱԾఆͯ͠UIΛઌʹߋ৽͢Δख๏ͷ͜ͱΛ Optimistic Updatesͱݺͼ·͢
5. mixi, Inc. Optimistic UpdatesͷՁ஋ • Optimistic UpdatesͰ͸ɺϢʔβʔͷૢ࡞Λதஅͤ͞Δ͜ͱͳ͘γʔϜϨεͳମݧΛఏڙ ͠ଓ͚Δ͜ͱ͕Ͱ͖ΔͨΊɺUXΛ޲্ͤ͞·͢
6. mixi, Inc. ͪ͜Βͷهࣄ͕ඇৗʹࢀߟʹͳΓ·ͨ͠!!! https://kaminashi-developer.hatenablog.jp/entry/optimistic-update-in-spa UI͕ӕΛͭ͘ʁ UXσβΠϯʹ͓͚Δʮָ؍తͳߋ৽ʯͱSPAͰͷ࡞Γํ Χϛφγ։ൃऀϒϩά
7. ۩ମతͳ࣮૷ྫ
8. mixi, Inc. ۩ମతͳ࣮૷ྫ - ͓ؾʹೖΓ • ઌͷྫͰ΋औΓ্͛ͨɺ͓ؾʹೖΓػೳʹ͓͚Δ Optimistic Updatesͷ۩ମతͳ࣮૷ํ๏ʹ͍ͭͯݟͯ Έ·͠ΐ͏
9. mixi, Inc. ۩ମతͳ࣮૷ྫ - ͓ؾʹೖΓ • ϝσΟΞΦϒδΣΫτʹ͋Δ୯ҰͷpropertyΛߋ৽͢ΔͷΈͳͷͰɺ࣮૷΋͔ͳΓγϯϓϧͳ΋ͷʹͳΓ·͢
10. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ΈͯͶͰ͸Ξοϓϩʔυ͞ΕͨϝσΟΞ ʹίϝϯτΛ͢Δ͜ͱ͕Ͱ͖·͢ • ݱঢ়Ͱ͸ίϝϯτ౤ߘதʹIndicatorΛද ࣔ͢ΔΑ͏ʹͳ͍ͬͯ·͢ ▶︎ ͜ͷίϝϯτػೳΛOptimistic Updates Ͱ࣮૷͢Δ͜ͱΛߟ͑ͯΈ·͠ΐ͏
11. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ·ͣ͸Optimistic UpdatesΛ࣮૷͠΍͘͢ ͢΂͘ɺView༻ͷίϝϯτΦϒδΣΫτͰ ͋Δ CommentItem Λ༻ҙ͠·͢ • init ͰυϝΠϯΦϒδΣΫτΛड͚औͬͯ ม׵Ͱ͖ΔΑ͏ʹ͍ͯ͠·͢ • ޙʹ৭ʑͱproperty͕௥Ճ͞Ε͍ͯ͘༧ఆ Ͱ͢
12. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ࣍ʹɺMVPͰ࣮૷͢Δ͜ͱલఏͰ͕͢ɺ PresenterΛ༻ҙ͠·͢ • ͜͜ʹOptimistic Updatesͷ࣮૷ΛՃ͑ͯ ͍͖·͢
13. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • Presenterʹɺίϝϯτૹ৴Ϙλϯ ԡԼ࣌ʹݺ͹ΕΔ addComment 
 ϝιουΛ࣮૷͍͖ͯ͠·͢
14. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ͨͩ͠ɺ͜ͷ addComment ͸࿈ଓ͠ ͯԿ౓΋ݺ͹ΕΔ͜ͱΛߟྀͰ͖ͯ ͍·ͤΜ • Ծʹ1ճ໨ͷίʔϧͰϨεϙϯε͕· ͩฦΒͳ͍ؒʹ2ճ໨ͷίʔϧ͕੒ޭ ͠ɺͦͷޙ1ճ໨ͷίʔϧͰαʔόʔ ͔ΒΤϥʔ͕ฦ͖ͬͯͨ৔߹ɺ comments.removeLast() ͸ҙਤͯ͠ ͍ͳ͍ CommentItem Λ࡟আͯ͠͠· ͏͜ͱʹͳΓ·͢
15. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ ▶︎ ղܾ͢ΔͨΊʹ͸ɺ CommentItem ΛҰҙʹࣝผͰ͖Δ Α͏ʹ mutaitionID Λ௥Ճ͠·͢
16. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • mutationID Λ CommentItem ʹઃఆ͠ɺ ϨεϙϯεΛड͚औͬͨࡍ ʹͦΕΛݩʹద੾ʹ஋Λ
 ߋ৽͠·͢ • ͜ΕͰෳ਺ճݺ͹Εͯ΋ద ੾ʹॲཧͰ͖·͢
17. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ͨͩ͜ͷ··ͩͱɺOptimistic UpdatesͰԾͷσʔλ Λද͍ࣔͯ͠Δঢ়ଶͷViewʹରͯ͠ɺϢʔβʔ͕ίϝ ϯτͷฤू΍࡟আ͕Ͱ͖ͯ͠·͍·͢ ▶︎ ରԠͱͯ͠ɺ·ͩαʔόʔ͔ΒϨεϙϯε͕ฦ͖ͬͯ ͍ͯͳ͍৔߹͸Viewͷૢ࡞Λ੍ݶͰ͖ΔΑ͏ʹ͠·͢
18. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ঢ়ଶΛView͔Βద੾ʹ൑ผͰ͖ΔΑ ͏ʹɺCommentItem ʹ LoadingState Λ௥Ճ͠·͢
19. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • addComment ϝιου಺Ͱద੾ ʹ loadingState Λઃఆ͠·͢
20. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ͋ͱ͸ɺViewଆͰ CommentItem.loadingState Λݟͯɺ .loading ͷ৔߹ʹ͸ૢ࡞Λ੍ݶ͢ Ε͹ྑ͍͜ͱʹͳΓ·͢ (Viewͷίʔυ͸লུ ) ▶︎ ͞Βʹɺ౤ߘʹࣦഊͨ࣌͠ʹίϝϯτΛλοϓ͢ΔͱϦτϥΠͰ͖ΔΑ͏ʹͯ͠Έ·͢
21. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ·ͣ͸ɺLoadingState ʹ .failure Λ௥Ճ͠·͢
22. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • addComment ϝιουͷcatchจʹͯ֘౰͢Δ CommentItem Λ࡟আ͢Δ୅ΘΓʹ loadingState ʹ .failure Λઃఆ͠·͢
23. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ͋ͱ͸PresenterʹϦτϥΠϝιουΛ௥Ճ͠ɺCellΛλοϓͨ͠ࡍʹݺ͹ΕΔΑ͏ʹ࣮૷͠·͢
24. mixi, Inc. ౤ߘલ ౤ߘத ౤ߘࣦഊ
25. mixi, Inc. Optimistic Updatesͷ࣮૷ʹ͍ͭͯৼΓฦΓ • ྫ͑͹͓ؾʹೖΓػೳͷΑ͏ͳɺΦϒδΣΫτͷ୯Ұpropertyͷߋ৽ʹ͍ͭͯ͸ൺֱత؆ ୯ʹ࣮૷͕ՄೳͰ͢ • ͨͩ͠ɺίϝϯτ౤ߘͷΑ͏ͳɺ৽نΦϒδΣΫτͷ࡞੒ʹ͍ͭͯ͸ɺͦΕͳΓʹ޻਺ ͕͔͔Γͦ͏Ͱ͢ • ·ͨɺࠓճ͸͢΂ͯ֘౰Viewͱੜଘظؒͷ౳͍͠PresenterͷதͰঢ়ଶΛ؅ཧ͠·ͨ͠ ͕ɺԾʹ͜ΕΛଞͷViewʹ΋఻ൖ͍ͤͨ͞ͱͳΔͱɺSingletonείʔϓͷΠϯϝϞϦε τΞ or databaseͰঢ়ଶΛ؅ཧͭͭ͠ɺ֤ViewͰ݁ՌΛsubscribeͰ͖ΔΑ͏ʹ࣮૷͢Δ ඞཁ͕͋Γɺ͔ͳΓࠎ͕ંΕͦ͏Ͱ͢
26. mixi, Inc. Apollo Clientͷ঺հ • GraphQLΫϥΠΞϯτͰ͋Δ Apollo Ͱ͸ɺ͜ͷOptimistic UpdatesͷػೳΛఏڙ͍ͯ͠·͢ (iOSΫϥΠΞϯτͰ͸ະ࣮૷ ) • ͪ͜ΒͰ mutationID ͷΑ͏ͳ΋ͷΛ༻ҙ͠ͳͯ͘΋ɺϦΫΤετͷ੒ޭ, ࣦഊʹԠͯ͡ΩϟογϡΛద੾ʹߋ৽ͯ͘͠Ε·͢ • ΩϟογϡΛwatch͍ͯ͠ΔViewʹ΋ߋ৽͕఻ൖ͞Ε·͢ • ͨͩ͠ɺઌͷྫͷΑ͏ʹloadingStateʹΑͬͯViewͷݟͨ໨Λม͑ΔΑ͏ͳ͜ͱ͸Ͱ͖ͳͦ͞͏Ͱ͢ (Apollo ReactͰ͸Apollo LinkΛ࢖͑͹Ͱ͖Δ͔΋ʁ) Apollo KotlinΑΓ
27. Thank you!!!