Add deprecation guides for ArrayProxy, ObjectProxy, and PromiseProxyMixin #1405
Conversation
✅ Deploy Preview for ember-deprecations ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
|
||
| `ArrayProxy` is deprecated. In modern Ember, you can replace `ArrayProxy` with native JavaScript classes and proxies. The best replacement depends on how you were using `ArrayProxy`. Some example use cases are shown below. | ||
|
|
||
| ### Swapping Content |
There was a problem hiding this comment.
These guides show a way to achieve something technically the same as what people had before -- which is great -- but I also think we should guide users into what the modern Ember pattern would do instead. In this case, I believe that would mostly be tracked-built-ins.
There was a problem hiding this comment.
Tracked built-ins doesn't have the swappable container behavior though. It seems like at least some of the uses were definitely looking for that.
There was a problem hiding this comment.
My general point is that we should point people to "the Ember way" going forwards, not just a strict technical replacement -- why did they want a swappable container? Do you still need that with @Tracked? (and applying to the other guides not just this first one that I commented on).
There was a problem hiding this comment.
That's fair. I'll think about how we can improve this to steer people in the right direction.
| After: | ||
|
|
||
| ```javascript | ||
| const person = { firstName: 'Tom', lastName: 'Dale' }; |
There was a problem hiding this comment.
| const person = { firstName: 'Tom', lastName: 'Dale' }; | |
| const person = { | |
| firstName: 'Tom', | |
| lastName: 'Dale', | |
| get fullName() { | |
| // or person.firstName person.lastName | |
| return `${this.firstName} ${this.lastName}` | |
| } | |
| }; |
why proxy at all?
There was a problem hiding this comment.
Yeah, good point. I guess we don't really need to proxy for this case.
There was a problem hiding this comment.
Actually, on further consideration, this would be for the case where you didn't want to modify the underlying content, hence a proxy.
| const promise = new Promise(resolve => resolve({ value: 42 })); | ||
| const proxy = PromiseObject.create({ promise }); | ||
|
|
||
| // In a template, you might have: |
There was a problem hiding this comment.
You can use gjs / hbs here for highlighting this example
| {{/let}} | ||
| ``` | ||
|
|
||
| For simpler cases where you don't need the full power of a library like `ember-concurrency`, you can manage the state manually with `@tracked` properties: |
There was a problem hiding this comment.
there is also getRequestState from warp-drive, which is probably worth mentioning
| {{/if}} | ||
| ``` | ||
|
|
||
| Using a library like [ember-concurrency](https://ember-concurrency.com/docs/introduction) is highly recommended for managing asynchronous tasks in Ember applications, as it provides robust solutions for handling loading/error states, cancellation, and more. |
There was a problem hiding this comment.
| Using a library like [ember-concurrency](https://ember-concurrency.com/docs/introduction) is highly recommended for managing asynchronous tasks in Ember applications, as it provides robust solutions for handling loading/error states, cancellation, and more. | |
| Using a library like [ember-concurrency](https://ember-concurrency.com/docs/introduction) is highly recommended for managing concurrent asynchronous user-initiated tasks in Ember applications, as it provides robust solutions for handling loading/error states, cancellation, and more. |
|
I suspect the biggest hazard when trying to clear this deprecation is that computeds elsewhere in your app that depend on an ArrayProxy aren't going to react the same when you switch to TrackedArray. Maybe we should make a recommendation about removing computeds first before tackling this one? |
|
I also want to deprecate computeds 😆 |
RFC: emberjs/rfcs#1112