Web Components VS React

[gotjoshua]

It seems that y'all (the @toeverything team) are using react for AFFiNE and Lit for blocksuite.

Can you say something about this decision?

Did you (or do you still) consider Hybrids as a web component library instead of Lit?

[doodlewind]

Thanks for your feedback!

In the BlockSuite project, we are using Lit to develop the base editor framework. But in AFFiNE, we will continue to use React for now. As the decision maker about this, here are my two cents:

In BlockSuite, we mainly chose Lit not for its framework-wise features (its DX is at the stage a bit more similar to React 15), but for its WebComponent-based nature. This allows us to make future implementations of AFFiNE's extension mechanism more framework agnostic (think about using Web Component to define arbitrary third-party blocks!). Also, in Lit, all the LitElement are HTMLElement, making the DOM object and the component object exactly the same. This is very useful to avoid potential reconciler synchronization problems in rich text scenarios. You can even write document.quertySelector('my-component')?.someMethod() (when necessary) in a type-safe way! As one of the Slate contributors, I'm aware of React's dilemma at this point - so I’d argue that we are simply choosing a better native DOM API for BlockSuite. In other words, we don’t see List as a "full-featured" framework that should be compared to React, Vue, Svelte, or Solid, but rather comparable to the subset of React in Slate, or the UI framework built into ProseMirror. Compared to them, Lit has a lot of advantages. And not only are we using Lit to develop blocks components, but we are also using this “low-level framework” in Virgo, our experimental rich text editor that serves as an ultra-lightweight Quill alternative.

In AFFiNE, however, things will be different. Since this project was more about integrating BlockSuite and developing regular UI, its framework needed to be more focused on efficiency and ecosystem. At this point, React seems appropriate. We will continue improving React's use in AFFiNE, so stay tuned!

[gotjoshua]

Thanks!

As the decision maker

Just to get some more of your back story...

Did you consider any of the other web component libs? (some mentioned here in this transcript ... many more mentioned here)

Lit, Hybrids, Stencil, Haunted