Using `solid` as the main DOM engine in Atom (replacing `etch`)
aminya opened this issue · comments
Plan
I plan to use solid for Atom projects. Atom has its own DOM library called etch, which is used in the core of Atom as well as many of its packages. etch has some limitations, it has an average performance, and forces a certain style of programming.
https://github.com/atom/etch
Implementation
To make the transition seamless, I want to make a drop-in replacement library that uses solid as its backend but has the same API as etch.
The documentation of etch gives an overview of the API
https://github.com/atom/etch
These are the source code of the API (initialize, update, destroy):
https://github.com/atom/etch/blob/master/lib/component-helpers.js
and here the dom function:
https://github.com/atom/etch/blob/9b90d6ad88b90b8a273992c540879b915d9967a2/lib/dom.js#L4
P.S: The other approach is to use meta-programming to transpile etch code to solid code. However, this can be complex, but I am open to that approach too. Something like this babel plugin or this transformer
Benchmarks
In the benchmarks, etch is behind solid so this can be beneficial in general (~25% improvement). This can enhance the responsiveness of the editor.
https://krausest.github.io/js-framework-benchmark/2020/table_chrome_84.0.4147.89.html
The last dramatic change for improving the performance happened back in 2017 by introducing etch. Now it is the time to replace that with a faster modern framework. Even if we do not use it for text rendering, other parts of the Atom can benefit from it.
https://blog.atom.io/2017/06/22/a-new-approach-to-text-rendering.html
https://blog.atom.io/2018/01/10/the-state-of-atoms-performance.html
P.S:
- I have made an issue in the solid framework: solidjs/solid#206
- etch was removed last month from the benchmarked frameworks due to its inactivity
I have made a demo of this etch-solid library:
https://codesandbox.io/s/etch-solid-pwonz?file=/src/index.jsx
I want to register that I've seen this PR issue but feel unqualified to give proper technical feedback or input. If somebody more versed with JS could take a look, they'd have my appreciation.
As with any performance increasing change, if this is faster and not buggy, then I don't see why not.
@aminya if you can direct me to some specific things to test, I should be able to contribute testing if/when I get the time. (Probably not this week!)
The discussion is being followed here: solidjs/solid#206
I made a repository to make the ideas more solid :)
https://github.com/atom-ide-community/etch-solid
I'm very picky about my frontend frameworks, but no-vdom + jsx ❤️ I'm basically already sold on the switch.
etch solid is written and if you notice it is a tiny wrapper around solid. I have made etch-solid to be as backward compatible as possible.
https://github.com/atom-ide-community/etch-solid/blob/master/src/index.ts
The remaining are these:
https://github.com/atom-ide-community/etch-solid/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
etch-solid also does not have manual scheduling like etch does.