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
   

   View Slide

2. mixi, Inc.
   ࣗݾ঺հ
   ϩΫωϜ / rockname
   • ϛΫγΟͰʮՈ଒ΞϧόϜ ΈͯͶʯͱ͍͏ΞϓϦΛ

   ։ൃͯ͠Δ
   • iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ
   • εϚϒϥ͕޷͖
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. ۩ମతͳ࣮૷ྫ
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. mixi, Inc.
    ۩ମతͳ࣮૷ྫ - ίϝϯτ
    • Presenterʹɺίϝϯτૹ৴Ϙλϯ
    ԡԼ࣌ʹݺ͹ΕΔ addComment 

    ϝιουΛ࣮૷͍͖ͯ͠·͢
    

    View Slide

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

    View Slide

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

    View Slide

16. mixi, Inc.
    ۩ମతͳ࣮૷ྫ - ίϝϯτ
    • mutationID Λ
    CommentItem ʹઃఆ͠ɺ
    ϨεϙϯεΛड͚औͬͨࡍ
    ʹͦΕΛݩʹద੾ʹ஋Λ

    ߋ৽͠·͢
    • ͜ΕͰෳ਺ճݺ͹Εͯ΋ద
    ੾ʹॲཧͰ͖·͢
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. Thank you!!!
    

    View Slide