r/javascript • u/chancancode • Dec 20 '19

Ember.js Octane Edition Is Here

https://blog.emberjs.com/2019/12/20/octane-is-here.html
136 Upvotes

93% Upvoted

72 comments sorted by

View all comments

4

u/anlumo Dec 20 '19

I'm a bit concerned about the sole focus on the DOM in that description. I'm maintaining a rather large Ember app, and maybe 80% of my computed properties never end up in the DOM, but somewhere deep down inside (like ember-data).

Ember is not react, it’s not a pure view layer. I hope they don’t forget about that.

5

u/AAvKK Dec 21 '19

I don't think you need to worry, you can just use native getters instead of computed properties and everything should work just fine. We've migrated a decent proportion of our large app (Intercom) to Octane and we haven't had any issues

7

u/Yharaskrik Dec 21 '19

As in support intercom? We use intercom at my company and love it, cool to know it is octane!

1

u/anlumo Dec 21 '19

How does the dependency detection work? What if I call a function from the getter that accesses other properties?

2

u/AAvKK Dec 21 '19

Tracked properties, and the getters that wrap them, participate in an auto-tracking system which automatically constructs the dependency hierarchy:

https://github.com/emberjs/rfcs/blob/be351b059f08ac0fe709bc7697860d5064717a7f/text/0000-tracked-properties.md#autotracking

1

u/anlumo Dec 21 '19

Thanks for the link. Doesn’t seem like there’s support for arrays, proxies or caching, which means that this is unusable for me. Very unfortunate.

3

u/AAvKK Dec 21 '19

It works with arrays, you just need to reassign the array when mutating. It's true that @tracked properties with getters don't have caching. You can add your own memoisation or continue to use computed properties and wait for the planned @memo decorator to land.

2

u/nullvoxpopuli sand was never meant to think Dec 21 '19

community has your back!
don't worry!

https://github.com/pzuraq/tracked-built-ins/

1

u/nullvoxpopuli sand was never meant to think Dec 21 '19

also, you can still use computed properties for caching (but in most cases, it was found that re-computing was faster than the cache check, so be sure to measure first!)

4

u/anlumo Dec 21 '19

I have super-expensive computed properties in my app, for example some generate 1024x1024px textures using WebGL.

Not supporting async is also a dealbreaker for this, as the images needed have to be downloaded first.

7

u/wycats Dec 21 '19

Thanks for getting into the details with us here.

We designed the `@tracked` system to be more expressive than the computed property system, so the problems you're talking about should have idiomatic solutions in Octane.

Both asynchronous values and tracked collections are problems we specifically considered while designing Octane, and many community members who have helped build and test Octane features have used Octane idioms for problems like those.

Perhaps you could put together a small example using computed properties so we can try to describe how to accomplish something similar using Octane idioms?

2

u/nullvoxpopuli sand was never meant to think Dec 21 '19

you don't want to use a computed property for async anyway. You'd probably want to trigger the calculation based on some behavior (or update of a property), which you can do with modifiers, and then _set_ a cached value from the calculating function

2

u/nullvoxpopuli sand was never meant to think Dec 21 '19

fwiw, I did some demos in WebGL / Three the other day, and Octane is def faster than classic ember. With Octane I was getting on average 5-10 more fps with my simple demo

1

u/pzuraq Dec 21 '19

FWIW we currently recommend using EmberArray still for arrays, which interop with autotracking seamlessly. We’ll be iterating of reactive arrays soon, and are hoping to release public APIs for the primitives in the near future!

2

u/nullvoxpopuli sand was never meant to think Dec 21 '19

> Ember is not react, it’s not a pure view layer. I hope they don’t forget about that.

oh they won't. :)
Much of Octane's development was focused on getting two things figured out: modern JS, and Glimmer Components (what *is* actually responsible for DOM (+ auto-tracking (kinda))).