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

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

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. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ΈͯͶͰ͸Ξοϓϩʔυ͞ΕͨϝσΟΞ ʹίϝϯτΛ͢Δ͜ͱ͕Ͱ͖·͢ • ݱঢ়Ͱ͸ίϝϯτ౤ߘதʹIndicatorΛද

    ࣔ͢ΔΑ͏ʹͳ͍ͬͯ·͢ ▶︎ ͜ͷίϝϯτػೳΛOptimistic Updates Ͱ࣮૷͢Δ͜ͱΛߟ͑ͯΈ·͠ΐ͏
  2. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ·ͣ͸Optimistic UpdatesΛ࣮૷͠΍͘͢ ͢΂͘ɺView༻ͷίϝϯτΦϒδΣΫτͰ ͋Δ

    CommentItem Λ༻ҙ͠·͢ • init ͰυϝΠϯΦϒδΣΫτΛड͚औͬͯ ม׵Ͱ͖ΔΑ͏ʹ͍ͯ͠·͢ • ޙʹ৭ʑͱproperty͕௥Ճ͞Ε͍ͯ͘༧ఆ Ͱ͢
  3. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ͨͩ͠ɺ͜ͷ addComment ͸࿈ଓ͠ ͯԿ౓΋ݺ͹ΕΔ͜ͱΛߟྀͰ͖ͯ

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

    ϨεϙϯεΛड͚औͬͨࡍ ʹͦΕΛݩʹద੾ʹ஋Λ
 ߋ৽͠·͢ • ͜ΕͰෳ਺ճݺ͹Εͯ΋ద ੾ʹॲཧͰ͖·͢
  5. mixi, Inc. ۩ମతͳ࣮૷ྫ - ίϝϯτ • ͋ͱ͸ɺViewଆͰ CommentItem.loadingState Λݟͯɺ .loading

    ͷ৔߹ʹ͸ૢ࡞Λ੍ݶ͢ Ε͹ྑ͍͜ͱʹͳΓ·͢ (Viewͷίʔυ͸লུ ) ▶︎ ͞Βʹɺ౤ߘʹࣦഊͨ࣌͠ʹίϝϯτΛλοϓ͢ΔͱϦτϥΠͰ͖ΔΑ͏ʹͯ͠Έ·͢
  6. mixi, Inc. Optimistic Updatesͷ࣮૷ʹ͍ͭͯৼΓฦΓ • ྫ͑͹͓ؾʹೖΓػೳͷΑ͏ͳɺΦϒδΣΫτͷ୯Ұpropertyͷߋ৽ʹ͍ͭͯ͸ൺֱత؆ ୯ʹ࣮૷͕ՄೳͰ͢ • ͨͩ͠ɺίϝϯτ౤ߘͷΑ͏ͳɺ৽نΦϒδΣΫτͷ࡞੒ʹ͍ͭͯ͸ɺͦΕͳΓʹ޻਺ ͕͔͔Γͦ͏Ͱ͢

    • ·ͨɺࠓճ͸͢΂ͯ֘౰Viewͱੜଘظؒͷ౳͍͠PresenterͷதͰঢ়ଶΛ؅ཧ͠·ͨ͠ ͕ɺԾʹ͜ΕΛଞͷViewʹ΋఻ൖ͍ͤͨ͞ͱͳΔͱɺSingletonείʔϓͷΠϯϝϞϦε τΞ or databaseͰঢ়ଶΛ؅ཧͭͭ͠ɺ֤ViewͰ݁ՌΛsubscribeͰ͖ΔΑ͏ʹ࣮૷͢Δ ඞཁ͕͋Γɺ͔ͳΓࠎ͕ંΕͦ͏Ͱ͢
  7. mixi, Inc. Apollo Clientͷ঺հ • GraphQLΫϥΠΞϯτͰ͋Δ Apollo Ͱ͸ɺ͜ͷOptimistic UpdatesͷػೳΛఏڙ͍ͯ͠·͢ (iOSΫϥΠΞϯτͰ͸ະ࣮૷

    ) • ͪ͜ΒͰ mutationID ͷΑ͏ͳ΋ͷΛ༻ҙ͠ͳͯ͘΋ɺϦΫΤετͷ੒ޭ, ࣦഊʹԠͯ͡ΩϟογϡΛద੾ʹߋ৽ͯ͘͠Ε·͢ • ΩϟογϡΛwatch͍ͯ͠ΔViewʹ΋ߋ৽͕఻ൖ͞Ε·͢ • ͨͩ͠ɺઌͷྫͷΑ͏ʹloadingStateʹΑͬͯViewͷݟͨ໨Λม͑ΔΑ͏ͳ͜ͱ͸Ͱ͖ͳͦ͞͏Ͱ͢ (Apollo ReactͰ͸Apollo LinkΛ࢖͑͹Ͱ͖Δ͔΋ʁ) Apollo KotlinΑΓ