$30 off During Our Annual Pro Sale. View Details »

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

rockname
March 15, 2022

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

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

rockname

March 15, 2022
Tweet

More Decks by rockname

Other Decks in Technology

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