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

by rockname

Slide 1

Slide 1 text

Optimistic UpdatesͰ  UXΛ޲্ͤ͞Δ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname

Slide 2

Slide 2 text

mixi, Inc. ࣗݾ঺հ ϩΫωϜ / rockname • ϛΫγΟͰʮՈ଒ΞϧόϜ ΈͯͶʯͱ͍͏ΞϓϦΛ  ։ൃͯ͠Δ • iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ • εϚϒϥ͕޷͖

Slide 3

Slide 3 text

mixi, Inc. Optimistic Updatesͱ͸ • ྫ͑͹ɺΈͯͶͰ͸Ξοϓϩʔυͨ͠ϝσΟΞΛ͓ؾʹೖΓʹ௥ՃͰ͖Δػೳ͕͋Γ·͢ • ී௨ʹ࣮૷͢ΔͳΒ͹ɺҎԼͷΑ͏ʹͳΔ͔ͱࢥ͍·͢

Slide 4

Slide 4 text

mixi, Inc. Optimistic Updatesͱ͸ • ϦΫΤετͷ݁Ռ͕ฦΔલʹɺ੒ޭ͢ΔͱԾఆͯ͠UIΛઌʹߋ৽͢Δख๏ͷ͜ͱΛ Optimistic Updatesͱݺͼ·͢

Slide 5

Slide 5 text

mixi, Inc. Optimistic UpdatesͷՁ஋ • Optimistic UpdatesͰ͸ɺϢʔβʔͷૢ࡞Λதஅͤ͞Δ͜ͱͳ͘γʔϜϨεͳମݧΛఏڙ ͠ଓ͚Δ͜ͱ͕Ͱ͖ΔͨΊɺUXΛ޲্ͤ͞·͢

Slide 6

Slide 6 text

mixi, Inc. ͪ͜Βͷهࣄ͕ඇৗʹࢀߟʹͳΓ·ͨ͠!!! https://kaminashi-developer.hatenablog.jp/entry/optimistic-update-in-spa UI͕ӕΛͭ͘ʁ UXσβΠϯʹ͓͚Δʮָ؍తͳߋ৽ʯͱSPAͰͷ࡞Γํ Χϛφγ։ൃऀϒϩά

Slide 7

Slide 7 text

۩ମతͳ࣮૷ྫ

Slide 8

Slide 8 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ͓ؾʹೖΓ • ઌͷྫͰ΋औΓ্͛ͨɺ͓ؾʹೖΓػೳʹ͓͚Δ Optimistic Updatesͷ۩ମతͳ࣮૷ํ๏ʹ͍ͭͯݟͯ Έ·͠ΐ͏

Slide 9

Slide 9 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ͓ؾʹೖΓ • ϝσΟΞΦϒδΣΫτʹ͋Δ୯ҰͷpropertyΛߋ৽͢ΔͷΈͳͷͰɺ࣮૷΋͔ͳΓγϯϓϧͳ΋ͷʹͳΓ·͢

Slide 10

Slide 10 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ΈͯͶͰ͸Ξοϓϩʔυ͞ΕͨϝσΟΞ ʹίϝϯτΛ͢Δ͜ͱ͕Ͱ͖·͢ • ݱঢ়Ͱ͸ίϝϯτ౤ߘதʹIndicatorΛද ࣔ͢ΔΑ͏ʹͳ͍ͬͯ·͢ ▶︎ ͜ͷίϝϯτػೳΛOptimistic Updates Ͱ࣮૷͢Δ͜ͱΛߟ͑ͯΈ·͠ΐ͏

Slide 11

Slide 11 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ·ͣ͸Optimistic UpdatesΛ࣮૷͠΍͘͢ ͢΂͘ɺView༻ͷίϝϯτΦϒδΣΫτͰ ͋Δ CommentItem Λ༻ҙ͠·͢ • init ͰυϝΠϯΦϒδΣΫτΛड͚औͬͯ ม׵Ͱ͖ΔΑ͏ʹ͍ͯ͠·͢ • ޙʹ৭ʑͱproperty͕௥Ճ͞Ε͍ͯ͘༧ఆ Ͱ͢

Slide 12

Slide 12 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ࣍ʹɺMVPͰ࣮૷͢Δ͜ͱલఏͰ͕͢ɺ PresenterΛ༻ҙ͠·͢ • ͜͜ʹOptimistic Updatesͷ࣮૷ΛՃ͑ͯ ͍͖·͢

Slide 13

Slide 13 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • Presenterʹɺίϝϯτૹ৴Ϙλϯ ԡԼ࣌ʹݺ͹ΕΔ addComment   ϝιουΛ࣮૷͍͖ͯ͠·͢

Slide 14

Slide 14 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ͨͩ͠ɺ͜ͷ addComment ͸࿈ଓ͠ ͯԿ౓΋ݺ͹ΕΔ͜ͱΛߟྀͰ͖ͯ ͍·ͤΜ • Ծʹ1ճ໨ͷίʔϧͰϨεϙϯε͕· ͩฦΒͳ͍ؒʹ2ճ໨ͷίʔϧ͕੒ޭ ͠ɺͦͷޙ1ճ໨ͷίʔϧͰαʔόʔ ͔ΒΤϥʔ͕ฦ͖ͬͯͨ৔߹ɺ comments.removeLast() ͸ҙਤͯ͠ ͍ͳ͍ CommentItem Λ࡟আͯ͠͠· ͏͜ͱʹͳΓ·͢

Slide 15

Slide 15 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ ▶︎ ղܾ͢ΔͨΊʹ͸ɺ CommentItem ΛҰҙʹࣝผͰ͖Δ Α͏ʹ mutaitionID Λ௥Ճ͠·͢

Slide 16

Slide 16 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • mutationID Λ CommentItem ʹઃఆ͠ɺ ϨεϙϯεΛड͚औͬͨࡍ ʹͦΕΛݩʹద੾ʹ஋Λ  ߋ৽͠·͢ • ͜ΕͰෳ਺ճݺ͹Εͯ΋ద ੾ʹॲཧͰ͖·͢

Slide 17

Slide 17 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ͨͩ͜ͷ··ͩͱɺOptimistic UpdatesͰԾͷσʔλ Λද͍ࣔͯ͠Δঢ়ଶͷViewʹରͯ͠ɺϢʔβʔ͕ίϝ ϯτͷฤू΍࡟আ͕Ͱ͖ͯ͠·͍·͢ ▶︎ ରԠͱͯ͠ɺ·ͩαʔόʔ͔ΒϨεϙϯε͕ฦ͖ͬͯ ͍ͯͳ͍৔߹͸Viewͷૢ࡞Λ੍ݶͰ͖ΔΑ͏ʹ͠·͢

Slide 18

Slide 18 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ঢ়ଶΛView͔Βద੾ʹ൑ผͰ͖ΔΑ ͏ʹɺCommentItem ʹ LoadingState Λ௥Ճ͠·͢

Slide 19

Slide 19 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • addComment ϝιου಺Ͱద੾ ʹ loadingState Λઃఆ͠·͢

Slide 20

Slide 20 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ͋ͱ͸ɺViewଆͰ CommentItem.loadingState Λݟͯɺ .loading ͷ৔߹ʹ͸ૢ࡞Λ੍ݶ͢ Ε͹ྑ͍͜ͱʹͳΓ·͢ (Viewͷίʔυ͸লུ ) ▶︎ ͞Βʹɺ౤ߘʹࣦഊͨ࣌͠ʹίϝϯτΛλοϓ͢ΔͱϦτϥΠͰ͖ΔΑ͏ʹͯ͠Έ·͢

Slide 21

Slide 21 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ·ͣ͸ɺLoadingState ʹ .failure Λ௥Ճ͠·͢

Slide 22

Slide 22 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • addComment ϝιουͷcatchจʹͯ֘౰͢Δ CommentItem Λ࡟আ͢Δ୅ΘΓʹ loadingState ʹ .failure Λઃఆ͠·͢

Slide 23

Slide 23 text

mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ͋ͱ͸PresenterʹϦτϥΠϝιουΛ௥Ճ͠ɺCellΛλοϓͨ͠ࡍʹݺ͹ΕΔΑ͏ʹ࣮૷͠·͢

Slide 24

Slide 24 text

mixi, Inc. ౤ߘલ ౤ߘத ౤ߘࣦഊ

Slide 25

Slide 25 text

mixi, Inc. Optimistic Updatesͷ࣮૷ʹ͍ͭͯৼΓฦΓ • ྫ͑͹͓ؾʹೖΓػೳͷΑ͏ͳɺΦϒδΣΫτͷ୯Ұpropertyͷߋ৽ʹ͍ͭͯ͸ൺֱత؆ ୯ʹ࣮૷͕ՄೳͰ͢ • ͨͩ͠ɺίϝϯτ౤ߘͷΑ͏ͳɺ৽نΦϒδΣΫτͷ࡞੒ʹ͍ͭͯ͸ɺͦΕͳΓʹ޻਺ ͕͔͔Γͦ͏Ͱ͢ • ·ͨɺࠓճ͸͢΂ͯ֘౰Viewͱੜଘظؒͷ౳͍͠PresenterͷதͰঢ়ଶΛ؅ཧ͠·ͨ͠ ͕ɺԾʹ͜ΕΛଞͷViewʹ΋఻ൖ͍ͤͨ͞ͱͳΔͱɺSingletonείʔϓͷΠϯϝϞϦε τΞ or databaseͰঢ়ଶΛ؅ཧͭͭ͠ɺ֤ViewͰ݁ՌΛsubscribeͰ͖ΔΑ͏ʹ࣮૷͢Δ ඞཁ͕͋Γɺ͔ͳΓࠎ͕ંΕͦ͏Ͱ͢

Slide 26

Slide 26 text

mixi, Inc. Apollo Clientͷ঺հ • GraphQLΫϥΠΞϯτͰ͋Δ Apollo Ͱ͸ɺ͜ͷOptimistic UpdatesͷػೳΛఏڙ͍ͯ͠·͢ (iOSΫϥΠΞϯτͰ͸ະ࣮૷ ) • ͪ͜ΒͰ mutationID ͷΑ͏ͳ΋ͷΛ༻ҙ͠ͳͯ͘΋ɺϦΫΤετͷ੒ޭ, ࣦഊʹԠͯ͡ΩϟογϡΛద੾ʹߋ৽ͯ͘͠Ε·͢ • ΩϟογϡΛwatch͍ͯ͠ΔViewʹ΋ߋ৽͕఻ൖ͞Ε·͢ • ͨͩ͠ɺઌͷྫͷΑ͏ʹloadingStateʹΑͬͯViewͷݟͨ໨Λม͑ΔΑ͏ͳ͜ͱ͸Ͱ͖ͳͦ͞͏Ͱ͢ (Apollo ReactͰ͸Apollo LinkΛ࢖͑͹Ͱ͖Δ͔΋ʁ) Apollo KotlinΑΓ

Slide 27

Slide 27 text

Thank you!!!