Rebuilding Slack’s Emoji Picker in React
Chris Montrois
66511

Hey Chris, thanks for your great post, it’s really interesting and inspiring!

I did almost the same thing to VSCode. In VSCode we are majorly managing DOM operations ourselves. We componentize view parts, do the math ourselves (diff, lazy render), and load components even necessary. But my personal pain point is sometimes when I do some UI refactor and look at the JavaScript code, the final UI doesn’t come to my mind immediately. So last weekend, I used React to reimplement the Find Widget. After doing that, I have below findings:

  • jsx really helps understand the view of the component, what you see is usually what you get
  • as long as we only use the virtual DOM, we just need to make minimal code change to transit to React as both the model and viewmodel are already there
  • code is cleaner, for this particular small component, virtual DOM wraps up our few DOM operations

While doing this, I don’t expect performance improvement. If we don’t perform useless DOM operations, an additional virtual DOM diff cannot save time. The result finally agrees with my suspicion.

After reading your post, several questions came to my mind, it would be great if you can share more insights with us

  • Previously Slack renders all Emoji glyphs even if most of them are not visible. Do you think this is the major reason why performance became way better after switching to React as react-virtualized solves this problem?
  • Do you ever consider solve above problem by plain text JavaScript? Render 2 or 3 pages of Emoji glyphs and use translate3D to scroll vertically, append new pages when hitting the bottom of the partial list.
  • Render large lists lazily in JavaScript is not fun, is this where React virtual DOM helps you out? Good performance together with intuitive development and maintenance makes React the best choice for Slack, am I understanding correctly?

Thank you again for the sharing, and look forward to your reply.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.