Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

070d33664df274636dad3da21c9b21fc?s=47 rockname
March 15, 2022

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

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

070d33664df274636dad3da21c9b21fc?s=128

rockname

March 15, 2022
Tweet

More Decks by rockname

Other Decks in Technology

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!!!