# Move away from observers?

**URL:** <https://discuss.emberjs.com/t/move-away-from-observers/17731>\
**Category:** Questions\
**Created:** [April 2, 2020, 5:55pm UTC](https://discuss.emberjs.com/t/move-away-from-observers/17731 "2020-04-02T17:55:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jede](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jede/32/17004_2.png) [@jede](https://discuss.emberjs.com/u/jede)\
**Post date:** [April 2, 2020, 5:55pm UTC](https://discuss.emberjs.com/t/move-away-from-observers/17731/1 "2020-04-02T17:55:41Z")

</div>

We are struggling with how to transition away from observers in our Ember app.

For this case we have a 3rd party WebRTC library that starts when we call `startStream`. We cannot start the stream before `status` is `'live'` and `isConnected` is `true` After refactoring away observers this is what we came up with:

```javascript
  _status: null,
  status: computed({
    set(key, value) {
      const status = value.value
      this.set('_status', status)
      const isConnected = this.get('isConnected')
      this.handleStream(isConnected, status)
      return status
    },
    get() {
      return this.get('_status')
    }
  }),

  _isConnected: false,
  isConnected: computed({
    set(key, value) {
      this.set('_isConnected', value)
      const status = this.get('status')
      this.handleStream(value, status)
      return value
    },
    get() {
      return this.get('_isConnected')
    }
  }),

  handleStream(isConnected, status) {
    if (!isConnected) return
    if (status === 'live') {
      this.startStream()
    } 
  }

```

The old way:

```javascript
handleStream: observer('liveStream.status', 'isConnected', function() {
    if (!this.get('isConnected')) return
    if (this.get('status') === 'live') {
      this.startStream()
    } 
  })

```

The old way with an observer just looks so much shorter and easier to follow. Are we missing some better way of doing this?

Thanks!

---

<div class="post-metadata">

**Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\
**Post date:** [April 3, 2020, 7:46pm UTC](https://discuss.emberjs.com/t/move-away-from-observers/17731/2 "2020-04-03T19:46:09Z")

</div>

I think that using observers to propagate ember state changes to external code is reasonable - it’s using observers to just change ember state that’s encouraged to avoid as fair as I’m aware.

---

<div class="post-metadata">

**Author:** ![chriskrycho](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/chriskrycho/32/17763_2.png) [@chriskrycho](https://discuss.emberjs.com/u/chriskrycho)\
**Post date:** [April 3, 2020, 7:51pm UTC](https://discuss.emberjs.com/t/move-away-from-observers/17731/3 "2020-04-03T19:51:44Z")

</div>

I _think_ you could make this work nicely with a modifier, preferably a custom one implemented using [ember-modifier](https://github.com/ember-modifier/ember-modifier). If the following doesn’t work, I believe I’ve misunderstood your example!

```nohighlight
import { modifier } from 'ember-modifier';

export default modifier((_el, _positional, { liveStream, isConnected, start }) => {
  if (!isConnected) return
  if (liveStream.status === 'live') {
    start()
  }
});

```

```handlebars
<div
  {{handleStream
    @liveStream=@liveStream
    @isConnected=this.isConnected
    @start=this.startStream
  }}
/>
  {{! the body of your component }}
</div>

```

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [April 3, 2020, 8:33pm UTC](https://discuss.emberjs.com/t/move-away-from-observers/17731/4 "2020-04-03T20:33:25Z")

</div>

@alexspeller is right, this is actually the perfect use case for observers and it’s why they’re not deprecated. They’re the right tool for propagating ember state into non-ember code.

---

<div class="post-metadata">

**Author:** ![jede](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jede/32/17004_2.png) [@jede](https://discuss.emberjs.com/u/jede)\
**Post date:** [April 4, 2020, 7:02am UTC](https://discuss.emberjs.com/t/move-away-from-observers/17731/5 "2020-04-04T07:02:49Z")

</div>

@chriskrycho Thanks for the suggestion! It could possibly work but I think its actually clearer to keep it out of the DOM. I think I actually favor the computed property dance above in that case for clarity and no need for another library.

---

<div class="post-metadata">

**Author:** ![jede](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jede/32/17004_2.png) [@jede](https://discuss.emberjs.com/u/jede)\
**Post date:** [April 4, 2020, 7:03am UTC](https://discuss.emberjs.com/t/move-away-from-observers/17731/6 "2020-04-04T07:03:26Z")

</div>

@ef4 @alexspeller Thanks for clarifying, it helps out a lot! It was the warnings from the linter that made me stumble down this rabbit hole in the first place: [eslint-plugin-ember/no-observers.md at master · ember-cli/eslint-plugin-ember · GitHub](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/no-observers.md)