Implement text editor DOM updates manually instead of via React #5624
Conversation
Legit |
I'm going to keep the basic structure of the code with the |
cd66ea9
to
cae5bf5
Compare
Also, remove ability to disable hardware acceleration since there’s no longer a need for it and it complicated this conversion.
Signed-off-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
Signed-off-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
Signed-off-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
Signed-off-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
@nathansobo I've been working with it for the past hour. I haven't noticed any issues. But it does seem a bit more responsive |
Been using this all day and haven't noticed any regressions. The constant console logging is very annoying though, hehe |
I've not really noticed any major performance issues in the past few months, so hard to tell whether the speedup is noticeable or not on my machine, but things do seem a bit more responsive. Could be confirmation bias though. |
Same here. No issues so far, playing well with my other packages. Scrolling is silky smooth! |
Same here, it has been working fine so far. Great job, @nathansobo! |
The blinking cursor was ensuring that we never polled in certain cases. We need to allow the interval to continue polling at a normal pace, but just avoid doing any work that could delay the next animation frame.
075f7eb
to
32d393d
Compare
Thanks to all of you for your time! @thomasjo thanks for pointing out the console logging. I accidentally left it in on the last commit and just force-pushed an amendment. |
WIP: Implement text editor DOM updates manually instead of via React
|
|
I force pushed back the merge of this PR so we can get a release out this morning without me having to worry about this code over the weekend. Will merge it again once the release is out. |
@performDocumentPollAfterUpdate = true | ||
else | ||
@performDocumentPollAfterUpdate = false | ||
poller() for poller in @documentPollers |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Might want to return
after this line to prevent array return.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Okay, merged in 9648093. Sorry for the false |
Interesting stats, but was curious about why was react opted before... |
@hemanth There was also a huge improvement over the first version of the editor when we added React. It was much like scaffolding. |
|
Why didn't you use React's PureRenderMixin (http://facebook.github.io/react/docs/pure-render-mixin.html), 'shouldComponentUpdate' custom implementation, batched updates and other optimisations that would produce better results than manual updates and abandoned the entire solution rapidly instead? |
@mcharytoniuk The old implementation was doing the same thing as described in the doc page:
See atom/src/lines-component.coffee Lines 74 to 92 in 97a671c
|
I know that maybe it's too late for such ideas but I'd try moving away at least cursor component out of lines component and position it absolutely on top of it to prevent lines component updates caused by cursor movement. Also, Flipboard published react-canvas recently. Did you ever consider using canvas for animations / some editor elements as they did? Many people criticised them for negative SEO impact but inside text editor every crazy trick is acceptable imo. :) |
A big selling-point of Atom is the ability to style content with CSS. Used properly, the DOM doesn't introduce prohibitive overhead for our use case. React being removed is purely an implementation detail in this case and shouldn't affect package authors in any way. Appreciate your concern and suggestions here, but on balance it's easier to achieve our goals without it in this case. |
React is an amazing abstraction, but very few abstractions come without at least some overhead. In the case of Atom's text editor, it's worth the effort to avoid this overhead by hand coding all DOM updates. The update code is repetitive, but it's also pretty straightforward. In exchange, we get much simpler profile traces, drop a big dependency, and reduce the overall number of moving parts in Atom. Below are some flame graphs for entering a character at the end of a syntax-highlighted line. The comparison is somewhat unfair because the React case could have been a bit more optimized, but I think the pictures also show how much simpler the manual approach is in our case.
React is a great tool for many cases, for our particular needs in this particular case I decided it would be easier to just do things for ourselves.
Remaining Tasks: