reactjsのフォームライブラリざっと見

reactjsのフォームライブラリを歩き方わからないなりに歩いてみる。

TL;DR

tcomb-formかformsy-reactがよさそう。
自分はまずformsy-reactを選んでみたけど、tcomb-formも気になる。

流し見フェーズ

awesome-react#forms
ザーッと見る

まずはstar数で二桁前半は切り捨て。

次に、観点としては

  • 継続して開発されていること
  • 近いけど、react v0.13, v0.14への対応を見据えていること
  • APIがよさげなこと

で、
ざっと見で残った
react-forms, newforms, tcomb-form, formsy-react
の中で、
開発止まってるreact-formsと、過剰にメソッド生えてる感じのnewformsを外す。
tcomb-form, formsy-reactが残る。

あとは、contributerの数と、メインの人のリポジトリの傾向とblogと、方向性を見て決める。

比較

tcomb-form

tcombのgcantiはまずこのtcombってライブラリありき型ありきっぽい。

pros

  • とても簡潔で良く見えるAPI。
  • 意味ごとに小さくファイルに分けられそう。
  • コードベースはes6 + es7 stage 0
  • tcomb-formとtcomb-form-nativeがある。react-nativeに同じ知識が持っていける。

cons

  • ほぼ一人。
  • 型への興味からスタートしてると、エッジケースこぼれてそう(FUD)
  • tcomb-formとtcomb-form-nativeがあって、キャパ超えてないかな。tcomb-formのbug fixをtcomb-form-nativeに反映するの大変じゃないけどだんだんめんどくなりそう。tcomb-form-coreとか作るといいのかな。それはそれでつらいか。
  • bootstrap対応まで手を広げていて、多分こっちに手を出し始めるといくら時間あっても足りない。いちおう他のcssフレームワーク対応は途中でやめてダレカタスケテーてしてる。でも誰も助け名乗りあげてない。
  • 型のdslの部分と、あてこむtemplateを関数で書いて、というのが新しく覚えること。
  • apiはいい感じなんだけど、それが逆に開発参加するのに取っ付きづらいのかな。
  • (Added 2015-04-27 22:37) testがtravis-ciなどのciサービス使ってない & 手元でテスト動かそうとするとよくわからない これちょっと問題だな

formsy-react

formsy-reactのchristianalfoniは、ecサービス開発してるっぽい。

pros

  • 泥臭いのも実際に使ってれば出てくるだろうから、こなれてそう。(後で全然こなれてないと判明。)api docuement見ると、client側でvalidation通ったけどserver側のvalidationでコケた時はここをフックして、とかある。
  • cssフレームワーク対応はない、自分で書けって姿勢が良い wrapper死すべき
  • メインは一人だけど、issueとコミットログ見る限り、周辺部は触っている別の人がいそう。
  • react v0.14にむけてreact見ながら作業してるのもよい。
  • renderのreturnに大量にjsx書くんだーというのは追加で覚えること無くて良い

cons

  • 結構生コード書く量それなりにありそう。
  • ベタ書き一枚岩のjsxが出来てしまいそう。
  • consってほどじゃないけど、コードベースはes5。
  • react-native未対応。

自分にかなりのブーメランになるんだけど、やっぱり一人だけで精力的に開発してる、コード以外にドキュメント、videocast、issue返事、周辺分野までやる、のライブラリはどうしようかな、と思ってしまう。パッタリ止まるリスク。

validaterはともかく、formのライブラリって本体依存に合わせて延々賽の河原式にヤクの毛刈りしていくイメージがある。あと、一個前のバージョンにも両対応する謎のコードを書くか、2ライン、ヘタすると3ラインメンテしていく糞の山っぽさ。なので興味に応じて人が入れ替わり立ち替わりしていかないと続かないんじゃないかなあ。

型ならこの一部だけじゃなくて、typescriptがいいんじゃないかなあ、使ったこと無いし多分しばらく使うことはないけど。

formsy-react採用

だいたいこんな判断基準で、formsy-reactで進めてみる。

createClassとextends React.Components の差でハマる。いままでES6のクラスベースで素振りして(今のコードはcreateClassベースだけど移行するつもりで)書いてるのだけど、ES6のclassベースだとmixinが使えなくて、formライブラリはmixinありきなので、getInitialStateとか、stateとかpropとか、一世代違うのを新しく勉強するはめになってしまう。
あとbootstrap3も調べながらである…

で、進めていったら、任意入力のinput textでハマる。
任意入力(空文字列)を許容、ただし入力する場合には40文字ちょうどしか許さない。こんなのよくあるよね。
Emailのvalidaterは任意入力許していたのも余計にハマった。
で、api熟読して、3パターンぐらいで試すはめになる。さらにapi documentが更新されてないのも踏んだ。こんなの潰せてない上に一貫性がないのって、そもそも誰も使っていないのでは、という気がしてくる。

A non-required text input christianalfoni/formsy-react

一度bootstrapまで混ぜて書いてしまったコードをそれなりに最小限にするのがちょっとめんどい。最小限でもなかなかのコード量。あと、どうにか伝わるように英語を書くとか、こうなってほしいのにこうなってる、とか、コード見る限りこういう振る舞いをするようなコードなんだけど(一貫性がなくナイカ)とか。書いた。
issue自体の反応は悪くなさそうで、まだ直ってないけど、とりいそぎapi documentは直してくれた。で、設計よりの別issue立ててくれたので、進みそう。

まとめ

tcomb-formがbootstrap組み込んでるのが、使う側としては楽だけど継続メンテナンスするには設計として気に喰わないのが一点。
もうちょっと周り巻き込まないとツラそうこれが一点。hacker newsに本人が投稿して本人だけの1コメで落ちてる、ツライ。
この二点以外tcomb-formが良さそう。ただし判断基準はそこにおいた。
tcomb-formに未練たらたらである。

二択まではあってた気がするんだよね。さてさて。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中