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

My recent troubles in using Ember Data

Hibariya Hi
February 02, 2017

My recent troubles in using Ember Data

Ember.js Tokyo Reborn (https://emberjs.doorkeeper.jp/events/56135) の LT 枠で、最近の Ember Data まわりの悩みを話しました。

Hibariya Hi

February 02, 2017
Tweet

More Decks by Hibariya Hi

Other Decks in Technology

Transcript

  1. EmberData まわりの悩み
    2017/02/02 Ember.js Tokyo Reborn

    View Slide

  2. こんにちは
    ● 寺田玄太郎
    ● @hibariya
    ● hibariya.org
    ● 永和システムマネジメント

    View Slide

  3. View Slide

  4. チーム開発のためのグループチャット
    ● チーム開発のためのチャットを最速でセッティング
    ● 速く、軽く、シンプルなUIで気持ちよく
    ● 他のサービスとの連携が簡単に
    ● (ずっと無料)

    View Slide

  5. Idobata is using Ember.js

    View Slide

  6. お話しすること
    Ember + Ember Data を使ってモデルを永続化しつつうまく表示
    するうえでの悩みについてお話しします。よりよいやり方について
    助言いただけると幸いです。

    View Slide

  7. メッセージに★をつける機能
    他のチャットサービスと同様、Idobata ではメッセージに印 (★) をつ
    けて後から読み返すことができます。
    つけた★は Starred Messagesで一覧できます。

    View Slide

  8. やりたいこと
    Starred Messages で★を外しても、外した人の画面上からはす
    ぐに消えないでほしい。
    バックエンド (サーバ) 側には即座に反映したい。

    View Slide

  9. バックエンド (Rails)
    ユーザとメッセージを結ぶ Star というモデルで★を表現。
    ● Star.create
    ● star.destroy
    ● current_user.stars

    View Slide

  10. フロントエンド (Ember + Ember Data)
    バックエンドと同じく Star モデルで表現。
    ● message.get(‘stars’).createRecord()
    ● star.destroyRecord()
    ● currentUser.get(‘stars’)

    View Slide

  11. やりたいこと (再掲)
    Starred Messages で★を外しても、外した人の画面上からはす
    ぐに消えないでほしい。
    バックエンド (サーバ) 側には即座に反映したい。

    View Slide

  12. 問題
    ● star.destroyRecord() を呼ぶと currentUser.get(‘stars’) のよ
    うな関連から即座に消える (→一覧からも消える)。
    ● star.deleteRecord() なら一覧に残るものの、今度はサーバに
    反映されない。
    ● ★をつけ直すこともあるのでバックエンドとの整合性は保ちた
    い。

    View Slide

  13. 現在の解決策
    star の削除前に複製することで、クライアント側では star を維持しつ
    つサーバ上では即座に削除。
    ● 複製した時点ではまだ保存しない。
    ● もし同じメッセージにまた★がつけられたらその複製を保存。
    ● そうでなければ適当なとき (他routeへのtransitionなど) に破棄。

    View Slide

  14. 悩み
    ● 削除したものを画面上で表現するのは意外に面倒。
    ● Star に isStarred という微妙なプロパティが増えた。

    View Slide

  15. ご清聴ありがとうございました

    View Slide