These are chat archives for ractivejs/ractive

15th
Jun 2018
Cerem Cem ASLAN
@ceremcem
Jun 15 2018 08:15
Ractive is like that in the field :)) (https://www.youtube.com/watch?v=cYh3ciokvV0)
Cerem Cem ASLAN
@ceremcem
Jun 15 2018 08:25
"An expert Ractive operator is invaluable on the job site"
Cerem Cem ASLAN
@ceremcem
Jun 15 2018 11:34
am I doing something wrong or these rendering times are normal:
Joseph
@fskreuz
Jun 15 2018 12:49
That's a painful render.
The last time I encountered such, it wasn't the render (although Ractive's render can be fast/slow depending on the case). There were just a lot of observers being run under the hood. It renders eventually when they subside.
Can you provide a profiler output from dev tools? Also, can you post it in Github so they can be labelled?
The fix for me when I encountered this was rethinking how the data was structured, which eventually led to less observers.
Joseph
@fskreuz
Jun 15 2018 12:56
Removing trivial components also helped. I used to wrap every single bootstrap component as a Ractive component for convenience. But it causes more performance issues than just using plain divs and classes.
Cerem Cem ASLAN
@ceremcem
Jun 15 2018 13:30

Also, can you post it in Github so they can be labelled?

of course, I just didn't decide if it's worth to post to Github or not

Chris Reeves
@evs-chris
Jun 15 2018 15:11
rendering a ton of rows with css striping is one of the easiest ways to kill render perf
if there are multiple components per row, it will definitely be much worse
Cerem Cem ASLAN
@ceremcem
Jun 15 2018 15:12
@fskreuz profiler output is on its way (is being uploaded)
Joseph
@fskreuz
Jun 15 2018 15:13
:tada:
Cerem Cem ASLAN
@ceremcem
Jun 15 2018 21:14

Ractive outputs a warning on null pointer exceptions, like:

Ractive.js: Failed to compute @curr._id.replace(/^SIP-/,""): Cannot read property 'replace' of undefined

How should we avoid this? by {{#if curr._id}}{{curr._id.replace(/^SIP-/,"")}}{{/if}}?

How about adding a ? operator (like LiveScript does) for null or undefined checking, like: {{curr._id?.replace(/^SIP-/,"")}}?
LiveScript compiles that to:
var ref$;
if ((ref$ = curr._id) != null) {
  ref$.replace(/^SIP-/, "");
}
Joseph
@fskreuz
Jun 15 2018 22:18
Doesn't Ractive normally swallow those and render nothing?
Also, the elvis operator may be convenient but some see it as a code smell.
It exists in Angular but is discouraged by some.