まだまだ機能は乏しいし、既読化も実装していません（テストでフィードがなくなっちゃうと痛いので後回し）が、ぼく自身、常用しているショートカットまでを実装できたので、ご紹介。

使っている npm パッケージ

React：コンポーネントとかレンダリングとか
react-modal：元記事表示用のモーダルを作る時に
mousetrap：キーボードショートカットで
request：API と通信
lodash：なんやかんやでいつも使う

できること

フィード一覧の取得、表示
選択されたフィードを読み込んで、記事一覧を表示
元記事の表示
最低限のキーボードショートカット

（まだ）できないこと

認証
その他いっぱい

構成

main.js
app/
  component/
    feeds.js
    items.js
  html/
    index.html
  style/
    style.css
  app.js
src/
  feeds.jsx
  items.jsx

main.js がアプリのエントリーポイントになります。package.json からアクセストークンを取得してウィンドウを作っているだけですね。app/html/index.html がウィンドウに読み込まれます。

app/html/index.html は VirtualDOM のコンテナを作って、app/app.js を読み込んでいるだけです。コンテナは、サイドバーのフィード一覧と、フィードが読み込まれた際のアイテム一覧、元記事表示ようのモーダルになります。あとは CSS を読み込んだり。

app/app.js で実際にページを作っていきます。API を叩いているだけですね。mousetrap で r キーをフィード一覧の更新に割り当てていますが、サイドバーをまるっと読み込みなおしています。たぶん React 的にもっとかっちょいい方法があると思いますが、今後書きなおすかもしれません。

app/component/feeds.js は、src/feeds.jsx からコンパイルされて作られます。サイドバーのフィード一覧ですね。mousetrap で a と s が割り当てられています。前と次のフィードへ戻ったり進んだりするショートカットです。

render の中で <ul> と <li> を作っているのですが、当初、<li> は別コンポーネントだったんですね。マウスオーバー・アウトした時やショートカットで移動する時、コンポーネント間のやりとりはどうするんだろう？って感じだったのですが、ドキュメントを見てみると、この書き方が一般的なようで書き直しました。

render: function(){
    return (
        <ul>{this.props.feeds.map(function(item, index){
                return (
                    <Feed item={item}/>
                );
            }, this)}
        </ul>
    );
}

これが、

render: function(){
    return (
        <ul>{this.props.feeds.map(function(item, index){
                return (
                    <li key={item.subscribe_id}
                        onMouseOver={this.doMouseOver.bind(this, index)}
                        onMouseOut={this.doMouseOut.bind(this, index)}
                        onClick={this.doClick.bind(this, index)}>
                        <img src={item.icon}/> {item.title} ({item.unread_count})
                    </li>
                );
            }, this)}
        </ul>
    );
}

こうなりました。

書いてみると、なるほどね、と納得です。クリックやマウスオーバー・アウトのイベントが一つ一つのコンポーネントに貼られてしまうし、this.props.feeds があるので他のフィードを意識できるしで、コンポーネントを分けすぎるのもダメですねって感じでした。
あとは、フィードをクリックすれば記事のアイテムが右ペインに読み込まれます。ほぼ LDR と同じですね。

app/component/items.js は、src/items.jsx からコンパイルされて作られます。記事のアイテムがずらーっと読み込まれます。mousetrap で j k v n が割り当てられています。記事の移動と元記事の開閉になります。なんでぼくが LDR のアプリ化をしたかというと、ほぼ、ココのためになります。ブラウザだと、元記事開くとタブが開かれるんですよね。タブを移動したくないのです。このアプリでは v で react-modal を使って、モーダルで元記事を開きます。LDR にはありませんが、n で元記事のモーダルを閉じます。
app/component/feeds.js と同じように子コンポーネントを作っていたのですが、ここも書き直しました。記事の移動のためですね。フィードの移動はクリックイベントを偽装していたのですが、記事の移動は scrollIntoView を使っています。

元記事の表示には Electron の <webview> を使っています。ここ、React って楽だなあと思ったところです。src は this.state.url になっていますので、this.setState({ url: '元記事の URL' }); してあげるだけで表示する元記事を切り替えられます。とっても楽！モーダルの開閉も this.state 使っていますね。ホント楽！

render: function(){
    return (
        <ul>{this.props.items.map(function(item, index){
                return (
                    <li id={item.id} key={item.id}>
                        <p style={style.title} onClick={this.doOpen.bind(this, index)}>{item.title}</p>
                        <div dangerouslySetInnerHTML={{__html: item.body}}/>
                    </li>
                );
            }, this)}
            <Modal isOpen={this.state.modalIsOpen}>
                <div style={style.close}><button onClick={this.doClose}>閉じる</button></div>
                <webview src={this.state.url} style={style.browser}></webview>
            </Modal>
        </ul>
    );
}

うごかしかた

まずはソースコードをチェックアウトしてきましょう。

$ git clone git@github.com:k0sukey/Electron-LDR.git
$ cd Electron-LDR

で、npm パッケージをインストールします。

$ npm install

認証ができていないので、http://api.ma.la/reader.html からアクセストークンをもらってきます。authorize して、インスペクタ等でローカルストレージにあるアクセストークンを package.json にコピペしてください。有効期限が切れたらもう一度 authorize すれば OK です。

{
  "access_token": "****************************************",
  "token_type": "Bearer",
  "expires_in": 7200,
  "created_at": 1442133518
}

↑の access_token を、

{
  "name": "Electron-LDR",
  // 略
  "devDependencies": {
    "electron-packager": "^5.0.2",
    "electron-prebuilt": "^0.31.0",
    "gulp": "^3.9.0",
    "gulp-babel": "^5.2.1",
    "gulp-load-plugins": "^0.10.0"
  },
  "token": "ここにコピペしてください"
}

コマンドラインで起動します。

$ npm start

まとめ

あらためて、Electron と React って親和性高いなって思いました。あと、自前で認証できないのは致命的ですね...。何とかしないと。