読者です 読者をやめる 読者になる 読者になる

lxyuma BLOG

開発関係のメモ

Marionetteからractiveへ

marionette.js ractive.js backbone.js

昨日、天下一クライアントサイド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と出会った

Centered image

ractive.js

こんな感じ

<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とても良さそう
    • なんだけど、殆ど日本の情報ばっかなのも気になる
    • facebookのreactが海外記事/snsでよく見る気がする
  • 結局、どこに落ち着くか不明だが、日本で仕事する分にはvue.jsが良さそうですな

まとめ

ractiveは、もういいや...

おしまい


以上。

ちなみに、翌日仕事だったので、途中で帰りました。

ビールごちそうさまでしたー。