Node.js/Electronで使えそうなライブラリ

Electronでメディアファイル用のファイルブラウザ「BlackAlbum」を作った - joker1007の日記
http://d.hatena.ne.jp/joker1007/20151019/1445272666


使った主要なライブラリ

dexie.js
IndexedDBを操作するために使ってます。大体何でもPromiseで帰ってくるのでasync/awaitが使えると綺麗に書き易い。

immutable.js
不変データ構造定番のやつ。

material-ui
Material DesignなReact Componentを簡単に使えるライブラリ。見た目がそれっぽくなるw

react-infinite
React用の無限スクロールライブラリ。リングバッファっぽくなっていて、何件表示しようが一定範囲しかDOMを描画しないので項目が大量になっても動作が軽い。
同種のライブラリが他にもいくつかあった。
ファイル数が数万の単位になると、この手のライブラリが無いと重過ぎてまともに描画できなくなる。

mousetrap
キーボード操作によるホットキーの定義に利用。

redux-thunk/redux-promise
Reduxで非同期処理のアクションを扱うためのミドルウェア。

sweetalert
Material Designっぽいアラートダイアログ。

jszip
Pure JSなzipの圧縮・解凍用ライブラリ。adm-zipという同種のライブラリがあるが、こっちの方が大分早い。

pica
Pure JSな画像リサイズライブラリ。lanczosでリサイズできて、触ってみた中ではPureJSでは結構早い方だと思う。

humanize
ファイルサイズとか日付を読み易く整形する。

ビルド環境
gulpとbrowserifyでビルドし、パッケージ化にelectron-packagerを使っています。
一部、browserifyをバイパスしなければならないライブラリがいくつかあるので、その用途で使うものだけどdependenciesに追加し、後は全てdevDependenciesにしてます。
最終的にパッケージ化する時にelectron-packagerのignore設定でdevDependenciesのライブラリを全てignoreすることで、無駄なパッケージでファイルサイズが肥大化しないようにしています。

参考にしたのは以下の記事です。
Real World Electron Development - Qiita
ぼくのかんがえたさいきょうのElectron - Qiita

また、実験的にReactのホットリロードにlivereactloadを使っていますが、SourceMapがおかしくなったりしてちょっと微妙感があります。後、バージョン上げたらビルド壊れたりするし……。

苦労した点
別に大したことはしてないのですが、いくつかハマりました。
まず、無限スクロールはreact-infiniteと同種のライブラリを見つけるまでは、初期描画のパフォーマンスに大きな問題があった。
後、リストする対象が多いのでshouldComponentUpdateをちゃんとやらないとクソ重くなりました。

zip展開と画像縮小のパフォーマンス問題の解決に少し手間取りました。
最初に選択したライブラリが割と遅くて、動作はするけど使い物にならなかった。

picaは高速だったけどbitmap化された画像しか扱えなかったので、BufferをBlobに変換してからCanvasに取り込んでpicaで縮小してからCanvasをElectronのnative-imageモジュールで画像に戻す、というやり方でそこそこ実用的なスピードでzip展開とサムネイル作成ができました。

picaの画像縮小はWebWorkerを使って並列で動作できるようになっているが、そのために利用しているwebworkifyというnpmパッケージが作成したobjectURLをrevokeせずに放置するため、いくつも処理するとobjectURLが溜まり続ける問題があった。そのせいか300件程処理した時点でWebWorkerにアクセスできなくなる謎のエラーが発生。適切にrevokeするようにライブラリをforkして修正して解決しました。

async/awaitのエラー処理をサボると、何の情報も無いままいきなり処理が止まるのでデバッグに苦労した。当たり前ですが、失敗しそうな処理はちゃんとtry/catch書くようにした方が良さそうです。

ElectronはNode.jsのネイティブモジュールが呼べるので、一部のモジュールがbrowserifyと衝突します。何が大丈夫で何が引っかかるのか手探りだったので、動いたり動かなかったり調べてglobal.requireしていくのが面倒だった。

でもbrowserify使わないとnode_modulesでファイルサイズが無駄に膨れ上がるし、それはそれで困る。

後、これ→→ Electronを使ってMac向けのアプリを開発する時のファイル名の扱いについて (所謂UTF-8-MAC問題) - Qiita