Proton Native - React Nativeのデスクトップ版

Electronを使えばデスクトップアプリとして動作するソフトウェアがクロスプラットフォームで作成できます。しかし、HTMLなのでUIを作るのが若干大変という印象があります。同様のことはモバイルアプリでも起きており、Reactが示した解決策がReact Nativeになります。

そしてProton NativeはReact Nativeと同じ解決策をデスクトップアプリに対して適用しようとしています。

Proton Nativeの使い方

Proton Nativeのサンプルコードです。ノートアプリになります。

import React, { Component } from 'react';
import fs from 'fs'
import { render, Window, App, TextInput, Dialog, Menu, Box } from 'proton-native';
class Notepad extends Component {
    state = {text: ''}
    save() {
        const filename = Dialog('Save')
        fs.writeFile(filename, this.state.text)
    }
    open() {
        const filename = Dialog('Open')
        fs.readFile(filename, (err, data) => {
            if (err)
                throw err
            this.setState({text: data})
        })
    }
  render() {
    return (
      <app>
        <menu label="File">
            </menu><menu .Item type="Item" onClicked={() => this.open()}>Open</menu>
            <menu .Item type="Item" onClicked={() => this.save()}>Save</menu>
        <window title="Notes" size={{w: 500, h: 500}}>
            <box>
                <textinput onChanged={text => this.setState({text})} multiline={true}>{this.state.text}</textinput>
            </box>
        </window>
      </app>
    );
  }
}
render(<notepad></notepad>);

実行結果です。本当に簡単なアプリになります。

Proton Nativeではメニューの定義がありますが、macOSではメニューが出ませんでした。まだ今後対応していくのでしょう。コードはnodeのオブジェクトが使え、UIはネイティブのものが使えるようになっています。

Proton Nativeはnode/JavaScriptのオープンソース・ソフトウェア（MIT License）です。

Home - Proton Native - React Native for the desktop, cross compatible

kusti8/proton-native: A React environment for cross platform native desktop apps