Marionetteからractiveへ
昨日、天下一クライアントサイドJS MV*フレームワーク武道会で話してきた。
以下、そのスライドです。
今日は
自分が現場で使ってきた FWの変遷の軽ーい話をする
元々
- Marionette.js使ってた
- 振り返ると、実装が冗長になってしまった
- 何を言ってるか?というと...
例えば
- ulとliで、その中の要素追加削除やeventを作りたい時
- image
<ul> <li>1st track click me</li> <li>2nd track click me</li> </ul> <button>new track</button>
Marionetteだと...
- 1.html書いて全体像を作って
- 2.templateに切り刻んで
- 3.CompositeView作ってテスト書いて
- 4.ItemView作ってテスト書いて
- 5.CompositeViewをnewする処理書いて
- 6.元のhtmlと繋いで、 ようやく実現
うわー
- やっぱりちょっと大変だった
- Backbone単体より遥かにマシだけど
- 実現までのコストかかりすぎ
- お引っ越しした方が良さそう..
気になってたのは
- やっぱりangular
- ただ、独自の仕組みと多すぎる学習コストが受け入れられなかった
そこで
- 偶々ractive.jsと出会った
ractive.js
- theguardian.comの開発者が開発
- MVVM系のFW
- ここ数年量産されてる簡易版angularの1つ
- IFが大変分かり易くsimple
- ブログまとめたから詳細はブログで
- これでいいじゃん
こんな感じ
<div id="result"> </div> <script id='myTemplate' type="text/ractive"> <p>こんにちわ{{user}} さん。 <strong>{{messages.unread}} 件の未読メッセージがあります。</strong> </p> </script> <script type="text/javascript"> var ractive = new Ractive({ el: "#result", // 出力先の要素 template: "#myTemplate", // template data: { // Reactiveに値を変えたいdata user: '太郎', messages: { total: 11, unread: 4 } } }); </script>
現場でractiveその1
- 勿論、既存のMarionette処理があった
- そのため、当初は、Marionette.Viewのrender(template)内に埋め込んでいた
- 当時、ractiveの強制描写も効かず、setTimeout 0で、ractive描写のtimingズラして使ってた
- が、test書き辛くなって、この書き方は途中で辞めた
現場でractiveその2
- その後、Viewだけ完全にractive.js使うようになった
- Backbone.ViewやMarionette.View要らなくなった
- MarionetteのCompositeViewやstickit等も不要になった
- rails環境だったのでerbに直接template書いた
- image的に、以下のMVC構成になった
- Model : Backbone.Model
- Controller : Marionette.AppRouter + Marionette.Controller
- View : Ractive.js
- カオス感が漂っているが..
ractiveでhappy?
- やっぱり、ReactiveなMVVM FWは生産性が高い
- 特にractive学習コスト低いので、素晴らしい
- 殆ど大きくハマる事は無かった
本当にハマる事が無かったのか?
- 必ずひっかかるのは、以下ぐらい
- 1.ractive.getできるobjが実はpureなobjじゃないので、若干動作違う
- 2.observeはoptionにinit=falseしないとinitでも反応する
- いずれもdoc見ればすぐ解決できる軽微な罠
- これらで大きくハマる事は無い。
ractiveの良くない所
結局、また、jQueryみたいに命令的な所が増えた
- view内で使うhelper的な関数はstatic methodっぽくclassyに書けるが、
- 確かinstanceに対しての挙動は、当時、ゴリゴリcallback書かなきゃいけなかった気がする
そして、何より大事な問題が…
ractive使ってるのが
- 俺しかいなかった
~∞ (ノ^p^)ノ ( ) ~ノ ヽ wwwwwww .
blog書いたけど
- 中々、流行らなかった。
- 最近は、本家の動きも少なくなってきた
- ※追記しておくと、ここ最近は動きが再開してた。一時期、停滞していたという話。
- SNS見ててもractive言及どんどん少なくなってる
今は?
- もう、ractive使ってない
- 振り返ればractive触ってたのも半年前の話
- project変わり諸条件から、
- 裸jsで作ってる
裸js
- BackboneとかMarionetteとかMVVM系FW等
- 色々知ってから裸js戻ると面白い
- 色んなパターン当てはめようとオレオレ実装してる
- scaleしないから良くないけど、
- FW入れる程の物でもないのでそうしてる
振り返ると
- ここ1年でjs FW何個踏んできたのだろうか...
- MVVM周りで落ち着きそうだがRedOcean状態は変わらず
- vue.jsとても良さそう
- 結局、どこに落ち着くか不明だが、日本で仕事する分にはvue.jsが良さそうですな
まとめ
ractiveは、もういいや...
おしまい
以上。
ちなみに、翌日仕事だったので、途中で帰りました。
ビールごちそうさまでしたー。