React.js の仕事 ほぼ完了しました!
ここ数ヶ月、久々に詰めて行っていた Recat.js の仕事がほぼ終わりました !!
仕事の詳細は書けませんが。 既存のjQueryベースのWebアプリがメンテナンス不可能に近くなっているので Recat.js に置き換えました。
既存のアプリは
- Backend は Ruby on Rails
- jQueryで作られてた Frontend の JS は約 14K 行 + テンプレート 4K 行
- アプリは大きく3つに別れるが、共有部分無しでコピーペーストで作られている
今回の仕事
- Backend は 落ちていたテストを修正したくらい
- End to End テストが無かったので書いた
- Turnip(RSpec, Gherkin) + Capybara + Poltergeist + Phantom.js
- Featureファイル 2K行、 steps 1.2K行
- 開発期間 約1ヶ月
- jQuery から Reactへの移行
- UI/UX はごく一部を除いて同じ (CSSは基本そのまま)
- Flux/Redux 等は使わず
- ES2016, JSX を使用
- 対応ブラウザーは最新のもの+IE11のみにしてもらった
- いくつかのコンポーネントを共有
- いくつかのReactではないJSライブラリーを開発期間の都合で残した
- NicEdit
- Nestable(+ jQuery)
- 開発環境は サーバーサイドプログラマーのためのReact.js 入門 1. 開発環境の構築で基本は書いたもの
- 開発期間 約1.5ヶ月 (普通にやったら 2.5ヶ月くらい? 詰め過ぎて腰を痛めました ^^;)
- 移行後のJSは 11K行
感想など
- 既存アプリは構成など初期設計は良く出来ている感じで実はそれほど悪いものではないが、実装はコピーぺの山だし無意味な部分も多数あった
- jQueryベースのものはページの変更後の再表示がかなりの部分で全書き換えになっていたが、 React版は Reactのおかげで最小限の書き換えになり高速化された!
- End to End テストを書くことでFrontendの動き、実装に関する理解が深まりました
- React.js は評判通りコードが長くなる、しかし構造が判りやすくメンテナンスしやすいのではと思える
- アプリの行っている事が比較的シンプルで Flux/Redux 等は コード量が増える割に、メリットが少なそうだと思えたので採用しなかった
- さすがに1万行くらいになるとWebpack(ESLint+Babel)に時間がかかるように成るがなんとか使えるレベルではあった
- Reactのコードは長くなるが難しいコードを書いているわけではないので CoC(convention over configuration)なライブラリー/トランスレータが出たら良いな・・・
- 今回得られた知見を元に React.js の教育も開始したいなと思います。そのために React.jsの入門記事を書きました。
- End to End テストのおかげで幾つかのバグが発見できましたが、それ以上に修正した後でテストが通れば「まあ酷いバグはないさ〜!」という安心感が良いですね ^^)