Logo by @elisiri
Create native desktop applications through a React syntax, on all platforms
- Same syntax as React Native
- Works with existing React libraries such as Redux
- Cross platform
- Native components. No more Electron
- Compatible with all normal Node.js packages
On mobile, it used to be hard to build beautiful cross-platform apps. Then React Native came along, giving us a seamless way to build user interfaces and manage state in code, all while doing it cross platform.
On desktop, there is no such tool. You can create a GUI using something like Qt, but for people who are used to the React workflow and JSX, there currently isn't an alternative.
Some of you might be saying that you could do it in Electron. It's a good tool, but it brings in a lot of overhead, running a full webbrowser to manage a small GUI, while Proton Native can do the same, using native tools, with a smaller size and with less resource usage.
Proton Native does the same to desktop that React Native did to mobile. Build cross-platform apps for the desktop, all while never leaving the React eco-system. Popular React packages such as Redux still work.
How it Works
Under the hood, there are two main libraries that are being used.
- Creates the native widgets using GTK3, Cocoa, or Windows API
- Manages state, rerendering, etc.
Each libui widget has a corresponding component in
src/components. All of these are classes, which extend
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
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, such as VerticalBox and HorizontalBox,
into one. We need to use React for this, so these are React components.
The reconciler lives in
src/reconciler. This defines functions that manage all functions, mostly adding/removing children, and updating
src/render, we finally render it, by creating a root component that sets up libui, create a container, and then render it.