performance of rendering preview with different frameworks

[karlmikko]

No description provided.

[karlmikko]

@taras I don't know how relevant that test is also as the editor isn't usually changing 100+ elements at once. I don't know how HTMLBars is rendering but if it re-draws the entire preview each time it may have issues when getting large documents.

As always, the only true test is using the actual code and benchmarking that.

[karlmikko]

@taras just did a quick change to the code to run 10000 instead of 100 and react was the fastest framework

[zchrykng]

Just my two cents, but this does not seem like a "issue" for Ghost.

Not the place to behaving a bench marking/framework evaluation discussion since the decision has been made.

[wycats]

I don't know how HTMLBars is rendering but if it re-draws the entire preview each time it may have issues when getting large documents.

Neither Ember (today) nor Ember with HTMLBars updates entire components or pages on every change. React diffs to figure out what to update; Ember uses .get/.set to know what exactly has changed and only update that part of the DOM.

[karlmikko]

@wycats I realise ember uses .get/.set backbone did the same thing. The issue as I see it is that the entire markdown document is being re-rendered on change (typing) in the editor, as the content of the post is one .set.

reactjs is a bit different in that it compares the changes to the entire DOM that changed. So if the markdown creates 1 change in a

then only that

will be updated. So it is less DOM write, less re-draw, less calculation.

@zchrykng that is why I raised this issue, more of a discussion, as it isn't about framework performance in general but specifically the editor preview pane as I thought react may be able to help when editing very large posts (over 2000 words).

[karlmikko]

I recall there being an issue where photos flickered in the editor/preview while typing - this is caused from the entire preview being re-drawn

[karlmikko]

#1031 is the issue i was referring to

[ErisDS]

@KingKarl85 When I asked you to move the conversation to a separate issue (because you were spamming a lot of people with unrelated content) I did expect you to do this as per the contributing guidelines. Raising a completely empty issue is not acceptable.

I appreciate your enthusiasm and the effort to investigate solutions to the editor redraw problem however unless you provide your code and benchmarking results here on the issue, all you're doing is making vague statements about something no one else can see or verify. The current editor does redraw the entire markdown preview - this is nothing to do with Ember - the entire admin is being rewritten in ember on a different branch.

I'm going to close this until such time as it the problems I've mentioned with this issue are resolved - please do not raise a new issue, if this one is updated I will consider reopening it.

[karlmikko]

From my initial test with the commit above and a post of 4000+ words.

Images break the react parser. Also there is significant lag with generating the html from Showdown, in which case react won't really help speed things up very much at all.

I think it is a good idea to keep this issue closed. It may be worth looking at different ways of compiling the markdown to speed it up and only update the part being edited while typing.