b5ca0f7f86
* Add initial test structure and some tests for Window * Start on rewriting registerComponent * Add View support * Add flexbox support, still need to test more * Add styling and better props management * Add nested text support * Fix text measurement and qt hogging layout styles * Font size must be in px, so convert if it isn't * Add stylesheet * Various changes, start adding tests * Try out travis CI * Remove xwd package * Install qt5 * Install correct moc * Add g++ 5 * Add xwd and imagemagick * Yoga layout doesn't support v12 right now * Add touchablewithoutfeedback * Add opacity. Need to investigate seg fault * Fix build errors, unsupport trusty * Force xenial version * Add touchablehighlight. Start button * Add support for image require * Start on image * Add image resizing and TextInput * Fix button view * Quit loop when all windows closed * Fix require not working with jest * Fix quit deleting still in use pointers * Disable caching * Depend on stable node-qt-napi * Copy docs, start examples * Many bug fixes, get cat example to work * Fix percent issue and start more documentation * Start docs * Finish docs * Fix App appendChild with comments * Abstract QT bindings * Add calculator example; try to get devtools working * Update react-devtools * Add hot reloading support * Add hot reloading to examples, fix reloading bugs * Update documentation on v2 * Add more examples to v2 changes * Change readme for v2 * Remove packaging until it works * Add prepack instead * Use node-qt-napi up * 2.0.1 * Convert everything to typescript * Add note on TS * Update readme with new images * Add comparison to others in docs * Add packaging instructions * Fix windows packaging * Create FUNDING.yml * Update v2_changes.md * Create LICENSE * Add wx backend option * Add more wx components * Add wx backend notes * Add note on mac wxwidgets libuv bug * Add note on Macs with libuv bug * Use npx by default * Bump version for wx backend * V2 small code improvements (#240) * slightly improved import * better type defs * merged append and insert as they pretty same * Run prettier * Add issue templates (#241) * About page typo (#216) * Update quickstart.md (#223) * Update README.md (#229) * Create FUNDING.yml * Add issue templates * Update README.md Co-authored-by: Yevhen Hraivoronskyi <evhenious@gmail.com>
3 KiB
About
Proton Native is a small project created by kusti8 to try and create a React interface for desktop app building. Proton Native was designed as an alternative to Electron. Rather than building apps that use the overhead of Electron and web technologies, Proton Native allows you to use native widgets cross platform, all in a React environment that you would get with Electron.
Advantages
- No large web browser running your app
- Better system compatibility
- Simple React components that are the same as React Native components
- Constantly being improved and added to
Disadvantages
- Currently smaller than Electron
- Smaller community since Proton Native is newer
If you've been using Qt or frameworks like that successfully, then you may do so. But if you love working with React like I do, then Proton Native may be your best alternate to a full Electron app.
By the numbers
The electron quickstart averages at about 6% CPU and 0.6% memory on a i7-8550U with 16GB memory laptop, running Linux.
The Proton Native example uses 1% CPU and 0.8% memory.
As your projects get bigger and bigger, you're going to notice more memory usage in Electron due to the fact that its going to render more if you don't put significant effort into making it more efficient. Because Proton Native uses your native OS library, it's going to be more efficient in the long run.
(These are my unbiased numbers that I got from a quick run. Your numbers are going to vary depending on size of project and computer.)
How it Works
Under the hood, there are two main libraries that are being used.
- node-qt-napi
- Bindings for QT to create the components
- React-reconciler
- Manages state, rerendering, etc.
Each component is defined in src/components. All of these are composed of other functions which you will find in the folder,
which defines many common functions such as adding children, removing them, updating props, etc. Then, in src/index.js, we give
each component a string identifier, so that you import the string, rather than the class itself. Then in src/createElement.js.,
when the reconciler tells us to create the class, we look it up in a map, and return the corresponding instance of the class.
Some components are extended in src/react-components. This is to merge widgets together that we need to do in React.
The reconciler lives in src/reconciler. This defines functions that manage all functions, mostly adding/removing children, and updating
props.
Finally, in src/render, we finally render it, by creating a root component that sets up Qt, creates a container, and then renders it.
Future plans
Proton Native is going to be maintained and added to for the foreseeable future. A small community has developed to try and improve it, and if you have an interest in helping contribute, you're always welcome.
Currently, this is being run by one person, kusti8. All contributions are welcome!