Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Gutenberg] Faster editor start #9370

Merged
merged 27 commits into from
Mar 7, 2019
Merged

[Gutenberg] Faster editor start #9370

merged 27 commits into from
Mar 7, 2019

Conversation

hypest
Copy link
Contributor

@hypest hypest commented Mar 6, 2019

Addresses wordpress-mobile/gutenberg-mobile#672

Currently, the editor has 2 stages during its startup of Gutenberg mobile:
a. The first is some preprocessing happening before the EditPostActivity becomes visible
b. The ReactNative app boot itself

This PR addresses only the first stage and introduces a few performance optimizations:

  1. On the Aztec code side, uses Performance improvement on parsing from html AztecEditor-Android#790 which adds a simpler and faster html-parsing method, removing functionality that is not needed when pre-processing a post
  2. In the wpandroid code side, it introduces a 1-deep cache to hold parsed html-to-spans text so we avoid parsing it too many times while pre-processing.

As an extra touch that can help with UX, this PR adds a small progress indicator, visible while the Gutenberg RN app is initializing, parses and renders the post for the first time.

Sibling PRs:

To test:

  1. Load a long post (like the ones described in App becomes unresponsive when loading large posts gutenberg-mobile#672) and verify that everything works as expected and the there is no ANR while opening the post.
  2. Notice the circular progress indicator spinning while the editor is loading
  3. Notice the progress indicator disappearing once the post gets rendered

Update release notes:

  • If there are user facing changes, I have added an item to RELEASE-NOTES.txt.

@hypest hypest force-pushed the gb/faster-aztec branch from c2dce52 to 8c7a0e9 Compare March 6, 2019 13:48
@hypest hypest requested a review from mzorz March 6, 2019 16:59
@hypest hypest changed the title Gb/faster aztec [Gutenberg] Faster editor start Mar 6, 2019
@daniloercoli
Copy link
Contributor

The progress indicator doesn't disappear when I rotate the device.

https://cloudup.com/c0D7XJI4xJE

@hypest
Copy link
Contributor Author

hypest commented Mar 6, 2019

The progress indicator doesn't disappear when I rotate the device.

Good catch @daniloercoli , fixed with 8db163b.

Copy link
Contributor

@daniloercoli daniloercoli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works as expected. Long post are loaded fine, without ANR, even on older devices.
Same is for posts with lot of pictures.

@mzorz
Copy link
Contributor

mzorz commented Mar 7, 2019

I can confirm this works wayyyy better on Gutenberg. 🎉

Gutenberg

Gutenberg seems to be behaving super nice in this regard. Tested rotating, long posts, short posts, uploading images, coming out and back into the editor while uploading, etc.

One thing that appears now that the spinner is shown when loading, in HTML mode we may want to also use something along those lines when saving, as it seems it takes a bit for things to get ready to be passed to the UploadService (note I didn't do any assessment regarding what's really going on there, but leaving the comment here of what I think is going on). From the user POV, this is a brief moment in which the HTML editor seems to be hanging there, unresponsive. To reproduce:

  1. Use the content in (it's basically the demo Gutenberg content pasted several times) https://selfhostedmario.mystagingwebsite.com/2019/03/welcome-to-the-gutenberg-editor/
  2. open in Gutenberg in the app
  3. tap on the overflow menu icon and choose HTML mode
  4. modify the content (don't break any blocks, for example just add some text within the pre-existing text in some paragraph block)
  5. tap UPDATE or, tap BACK after modifying
  6. observe the lag.

I also tested quickly switching from Visual to HTML mode in Gutenberg while the spinner is visible, several times. I only got an ANR once, but then was not able to reproduce and everything seemed to run smoothly.

Aztec

What follows are tests on Aztec alone, but shouldn't be a blocker for this set of PRs given they actually do improve Gutenberg itself.

  • Switching to Classic editor makes the app hang (ANR) for a bit until everything is loaded and then it works alright (scrolling fast and all) but you do have to wait a fair 10-15 seconds for the thing to be responsive. It hangs, goes black for a second, appears (but you can't scroll or anything) and have to wait.
    Here's the Post I'm using (it's basically the demo Gutenberg content pasted several times) https://selfhostedmario.mystagingwebsite.com/2019/03/welcome-to-the-gutenberg-editor/

  • For the record, using the content mentioned here App becomes unresponsive when loading large posts gutenberg-mobile#672 (comment) on Aztec makes it take a long time to load and be responsive, same as with the aforementioned Gutenberg post when switching and opening it on the Classic Editor.

  • on Aztec, switching to HTML mode and trying to add / modify text there is super slow.

@hypest
Copy link
Contributor Author

hypest commented Mar 7, 2019

Thanks for the review passes @daniloercoli and @mzorz !

@mzorz , I opened wordpress-mobile/gutenberg-mobile#713 for the issue you reported while switching modes and wordpress-mobile/gutenberg-mobile#714 for the one about switching editors.

Will merge this now (when the rest of the PR domino is ready that is), thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants