Help us test our new post rendering engine!

:information_source: as of Tuesday Feb 23, this code is now merged into Discourse master.

How was your January? I spent mine building a new branch of Discourse which replaces our post rendering with a hand-tuned virtual-dom implementation, to get around some pathological performance issues in Ember.

What does that mean? Well it means that viewing a topic should be faster here on meta. note: this branch is only on meta, not master! you will not deploy it to your installs unless you go out of your way to do so!

How much faster? Our latest benchmarks show:

  • 5x faster on Desktop
  • 5x faster on high end Android devices such as Nexus 6P
  • 7-8x faster on older Android devices such as the Nexus 7 mini tablet.

Of course, we don’t get all this performance for nothing. The code had to be re-written mostly from scratch (hence it taking over a month) and right now plugins affecting posts don’t work.

When you re-write so much code from scratch you are bound to introduce many regressions, so I apologize in advance for the bugs we need to hunt down. The good news is I also added over a hundred new tests in the process, so we are much better covered than we were before against regressions in this code.

How can you help:

  1. Please report bugs ASAP that you see on Meta, including steps to reproduce them. I will be fixing them as fast as I can.

  2. Don’t report plugins such as polls not working. We know and will be fixing them shortly before introducing a plugin upgrade path.

  3. Offer feedback: is it faster / slower on your device than before? Does it feel good or glitchy in any way?

Thanks in advance! You guys are always awesome at helping with this kind of thing!

Fixed

  • Keyboard linking and bookmarking was broken
  • Read icon was not fading
  • Posts were not marking as read when there were small post actions
  • Quickly hitting the back button would break
  • Repeatedly entering and leaving topic would show a JS error:
  • Loading spinner + post placeholders not showing up when scrolling down
  • Closed message not showing who closed it
  • Like button is displaying on your own posts
  • Reply as Linked topic not fading nor quoting selected text
  • Deleted posts at the end of a topic are not showing up.
  • Clicking like is a little janky
  • Badge page was broken due to missing component
  • Scrolling up is not working
  • Can’t click the avatar of who closed a post
  • Mobile formatting was messed up
  • Reply indicator supression broken
  • j/k then tab not focusing properly
  • Image lightboxes are screwy
  • Syntax highlighting not working
  • Weird scrolling position with back button in Chrome
  • Deleted small actions didn’t have the proper class
  • Improved like animation
  • Double hairline during time gaps
  • Dates were not updating automatically
  • Clear Bookmarks wasn’t update the UI
  • Deleting posts were causing placeholders to appear via message bus
  • Jumping to new posts was broken, as was highlighting the new post.
  • Couldn’t jump to small post actions (like closed)
  • Emoji were being rendered incorrectly in the post gutter
  • On mobile, some elements were overlapping each other
  • Likes will update count before the promise resolves
  • Whisper icon needed some padding
  • Anonymous users could see the flag button
  • Regression with the UX not showing up when selecting posts
  • Deleting posts now marks them as deleted rather than removing from the stream
  • Notifying a user wasn’t refreshing the UX
  • Jumping to far away posts via embedding was broken
  • Inbound / outbound css classes were missing on right gutter links
  • Who liked was not updating
  • Posts were not cloaked as you scrolled through a long topic, resulting in crashes
  • YouTube videos would stop (or start) playing on cloak
  • cloaking was too aggressive
  • cloaked miscalculated the height of posts slightly causing bouncing
44 Likes

Just as a baseline on my fully up to date, mediocre-at-best-in-performance Nexus 7 2013, Google Chrome Android Beta channel:

Repeat loading a full size 20+ post topic either from the top or bottom:

old code                 ~5 seconds
new vdom rendering       ~2 seconds

I didn’t measure first load from scratch yet, just repeated loads assuming Discourse is already loaded in the browser.

12 Likes

This branch is feeling stable enough to leave on meta permanently. So tonight will be the first night where I don’t roll it back overnight :slightly_smiling:

I’ve been updating the OP with the fixed bugs and those on my list. I’m also going to go through this topic now and delete the posts that have been solved just to keep it clean. Thanks for all the bug reports so far!

10 Likes

The speed difference is even more marked in even more marginal hardware. On an LG 39C

http://www.amazon.com/LG-Optimus-Dynamic-II-Tracfone/dp/B00HPX2NTG

I get:

  • 23 sec fresh load on try
  • 16 sec reload on try
  • 9 sec fresh load meta
  • 4-5 sec reload on meta

Both tests, topic of 22 posts, mostly text. On my home broadband. Times were just a mental count, but done several times. This is now making the topic page feel slow by comparison on that device…

12 Likes

My suggestion may be too extreme, but it is only an offer and I understand if it is not taken.

I use an LG 305C. Has a stock browser and Opera browser. If you want any perf tests from it, I am willing to do it.

I think we are focusing on “known” operating systems in order of market share, that is – Android, iOS, Windows Phone, perhaps Blackberry. It’s a steep dropoff after Android and iOS

Given the market share numbers, you can perhaps see why we felt compelled to spend almost two months of dev time rewriting everything in the topic page to make sure performance was there for low-end and medium-end Android…

7 Likes

Cool! I love that it goes faster!

2 Likes

Update: I’m planning to merge this into master today.

After that I’ll be writing up a guide on the new plugin API I’ve developed as well as a blog post about how we achieved the speed increase and why we did it :slightly_smiling:

12 Likes

Thanks for all the good work.

:clap:

1 Like

Thansk for the heads up, I’m updating my instance now, so I can test the vdom before the next update.

Thanks for all the bug reports and patience everyone!

I’ve merged this into master now, and meta is back to deploying from tests-passed!

If you’re a plugin author, be sure to read through our new API information.

14 Likes

I felt a difference on Meta, but damn, I just upgraded my forum and it’s really great.

On my windows phone (Lumia 635), it worked pretty good already but it seems about 10-20% quicker too.

Amazing work guys !

5 Likes

I have I feeling I already read this somewhere but I cannot find it:

When a new post was added to a topic while you were reading it, it isn’t marked as read even if you interact with it e.g. by liking it.

3 Likes

Here’s the blog entry about the upgrade:

12 Likes

There seems to be a hidden “private message” glyph and link in public topics:

Yeah I know it’s hidden - but should it be there?
… I’m having to style it in a couple of my other instances to get rid of it due to the VDOM changes.

2 Likes

That didn’t change due to VDOM. That’s just how our topic is showing/hiding that icon.

That might be the case, however I have had to introduce / change CSS styling for the following since the VDOM change:

  • the glyph link detailed above.
  • time-gaps & actions

@eviltrout

On previous version, I could see a picture with 1200px width (as an example) without any issue.

But after I upgraded to “v1.5.0.beta12 +5”, the picture has been truncated on Desktop browsers (Chrome, Safari, Firefox on desktop). Is this an expected behavior from the bug fix? Fyi I want to see the picture as it was displayed on previous versions.

What do you mean by truncated? I am having a hard time understanding what you wrote.

Thanks for seeing my post; and big thanks for making the Discourse I truly enjoy you and your team’s awesome product!

I am running a K-pop fan forum and the users upload high resolution pics. Here is the one of the sample post the the photo been “truncated”. Please see the second picture of this post: http://mywoohyun.com/t/topic/601

The original photo was uploaded to S3 via Discourse and the original photo is here: https://drvbz9bzfveqj.cloudfront.net/original/2X/7/79171e4d701c47833c8fabd8da0871b9bf98be5b.jpg

2 Likes