proton native Logo by @elisiri

npm npm styled with prettier PRs Welcome MIT License Gitter chat

Create native desktop applications through a React syntax, on all platforms

Features

  • 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

Images

Windows CatApi

Why

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.

Each libui widget has a corresponding component in src/components. All of these are classes, which extend DesktopComponent, 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, 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 props.

Finally, in src/render, we finally render it, by creating a root component that sets up libui, create a container, and then render it.

Built With

Share this project:
×

Updates